隨著對css3了解得越深入,越來越發現了css3的強大。css3不但能完成一些基本的特效如圓角陰影等,還能借助動畫技術實現一些複雜的動畫,能替代很多以前js才能完成的工作,css3的作用還不止於此,甚至一些複雜的也能通過css3實現,沒有做不到,只有想不到。在逛國外的一些前端設計**時發現一些國外牛人的奇思妙想--用純粹的css3畫的一些公司的logo,不得不承認國外的技術比國內要先進很多。
下面是收集到的一些純css3寫的logo
下面的示例請在支援css3的瀏覽器下檢視。
1.abn
純css3實現的logo-abn
檢視示例
2.addidas
純css3實現的logo-addidas
檢視示例
3.adobe
純css3實現的logo-adobe
檢視示例
4.android
純css3實現的logo-android
檢視示例
6.atari & animated pong
純css3實現的logo-atari & animated pong
檢視示例
7.bp
純css3實現的logo-bp
檢視示例
8. cbs
純css3實現的logo-cbs
檢視示例
9.cloud9
純css3實現的logo-cloud9
檢視示例
10.colorvivo
純css3實現的logo-colorvivo
檢視示例
11.designmodo
純css3實現的logo-designmodo
檢視示例
12.dribbble
純css3實現的logo-dribbble
檢視示例
13.fotopersbureau ldb prod
純css3實現的logo-fotopersbureau ldb prod
檢視示例
14.magento
純css3實現的logo-magento
檢視示例
15.mcdonald
純css3實現的logo-mcdonalds
檢視示例
16.mctutorial
純css3實現的logo-mctutorial
檢視示例
17.nike
純css3實現的logo-nike
檢視示例
18.persi
純css3實現的logo-persi
檢視示例
19.twiter
純css3實現的logo-twiter
檢視示例
20.windows
純css3實現的logo-windows
檢視示例
CSS3 使用純css繪製天貓logo
本文主要記錄如何使用純css繪製出乙個天貓logo,即那只黑色的貓。在編寫 之前,注意一些有用的小tips html 如下所示 class wrap class ear class earl class earr class earm div class face class eyel div cl...
Css3學習之路,畫公司的Logo
最開始的時候,我想的是能不能只用乙個div畫出來,但是思考了很久,能力有限啊 先放個總的div 首先寫的時最外面的藍色的框 bg然後我是吧那個100分成上半部分和下半部分放在各自的div裡面寫的,上部分就是top的div top並且利用box shadow複製了2個,box shadow是個好東西啊...
CSS3 一些屬性
1.flex direction 調整主軸方向 預設為水平方向 包括row column row reverse column reverse 2.justify content 主軸方向對齊,可以調整元素在主軸方向上的對齊方式,包括flex start flex end center space ...