前几天在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
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。