你的位置:首页 > 软件开发 > 网页设计 > 纯css实现扁平化360卫士logo demo

纯css实现扁平化360卫士logo demo

发布时间:2016-02-03 01:00:12
前几天在w3ctech上看到有人用纯css写出了360卫士的logo,感觉蛮好玩的。 因为自己用css以来,还没有写过这种玩意,出于娱乐,我也来试着尝试一下。 开始也不知到怎么下手,最棘手的是那两个像太极的东东不好弄。不过,好在以前用过photoshop绘制过一些简单的i ...

前几天在w3ctech上看到有人用纯css写出了360卫士的logo,感觉蛮好玩的。

 

因为自己用css以来,还没有写过这种玩意,出于娱乐,我也来试着尝试一下。

 

开始也不知到怎么下手,最棘手的是那两个像太极的东东不好弄。不过,好在以前用过photoshop绘制过一些简单的icon。所以,经过我仔细

 

的分析。大概有了思路,这两个东东是可以利用box-shadow这个属性来实现。虽然跟photoshop绘制有点不同,但是大致还是差不多的。

 

代码效果预览地址:http://code.w3ctech.com/detail/2501。

 1 <div class="container"> 2     <div class="content top"></div> 3     <div class="content bottom"></div> 4     <div class="content center"> 5       <div class="line x"></div> 6       <div class="line y"></div> 7     </div> 8     <div class="clip"></div> 9     <div class="circle circle-top"></div>10     <div class="circle circle-bottom"></div>11     <div class="react-top"></div>12     <div class="react-bottom"></div>13   </div>

原标题:纯css实现扁平化360卫士logo demo

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。