一些純css3寫的公司logo

2022-04-03 11:23:06 字數 1734 閱讀 5908

隨著對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 ...