css3之圖形繪制
由於近期的項目中出現了不規則的邊框和圖形， 所以重新溫習一下CSS3的圖形繪制。。。樣式繪制的圖形比圖片的性能要好，體驗更佳，關鍵一點是更加有趣！ 以下幾個例子主要是運用了css3中border、bordr-radius、transform、偽元素等屬性來完成的，我們先了解下它們的基本原理 ...
原文：純CSS3繪制的貓咪老師——獻給喜歡CSS3及《夏目友人帳》的你
最近正發愁着畢業設計做些什么，而后閑逛時看到了諸如twitter小鳥 哆啦A夢 灰太狼等純CSS 實現的圖像。於是本着初學的心態，挑了喜歡的卡通形象來解悶。 於是花了一個晚上做完，現在想來多少有點遺憾。因為當時沒有分段做個記錄，要不現在就能搞個更詳細的制作過程給各位了。 綜上，這篇博文主要用來分享用CSS 繪圖的心得及所需的技術。 不知道園里有朋友看過 夏目友人帳 沒，不然很難向您解釋我為什么喜 ...
2012-04-13 09:05 8 1767 推薦指數：
相關推薦
《夏目友人帳：結緣空蟬》-二丫影院在線觀看
《夏目友人帳：結緣空蟬》-二丫影院在線觀看 劇情簡介： 在人與妖怪之間過着忙碌日子的夏目，偶然與以前的同學結城重逢，由此回憶起了被妖怪纏身的苦澀記憶。此時，夏目認識了在歸還名字的妖怪記憶中出現的女性·津村容莉枝。和玲子相識的她，現在和獨子椋雄一同過着平穩的生活。夏目 ...
CSS3 繪制的BMW logo
火熱的移動互聯網讓我看到了HTML5，CSS3的偉大前景。 雖然web端對CSS3的支持還有很多兼容性問題，但是我很願意相信web端越來越富了，越來越生動了。 這是我對他們的學習越來越有興趣了。 下面是我用CSS3繪制的一個BMW的標志。 瀏覽器支持：chrome， safari ...
CSS3繪制不規則圖形（一）
由於近期的項目中出現了不規則的邊框和圖形， 所以只好提前先溫習一下，以前收集的一些CSS3繪制的圖形。。。樣式繪制的圖形比圖片的性能要好，體驗更佳。 廢話不多說，我們直接看效果： 1、三角形系列（三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角） 主要 ...
使用 CSS3 繪制 Hello Kitty
偶然間看到了 SegmentFault 上的一篇文章，感覺這個 Hello Kitty 畫的還不錯，心血來潮也用 CSS3 畫了個 Hello Kitty，現在在這里記錄一下詳細的繪制過程。想要源碼、素材、在線演示的同學可以直接拉到最下面。 我們先看下原圖： 結構分解 從上圖可以看出 ...
CSS3繪制六邊形
因為很簡單，所以先總結一下：使用CSS3繪制六邊形主要使用偽類:before和:after在源元素之前和之后再繪制兩個元素，並利用css3的邊框樣式，將這兩個元素變成三角形放置在源元素的兩端即可。 （因為之前在生物公司工作過，覺得六邊形更貼近生物分子、基因等概念，包括我們在網上搜索關於生物分子 ...
CSS3繪制彈球動畫效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin ...
CSS3繪制旋轉的太極圖案（一）
實現步驟： 基礎HTML： 步驟一： 畫一個寬高為400px的圓，加上陰影。 ...