纯css实现扁平化360卫士logo demo
前几天在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>
1 * { 2 padding: 0; 3 margin: 0; 4 } 5 6 body { 7 background-color: #d5d3d4; 8 } 9 10 .container { 11 width: 450px; 12 height: 450px; 13 position: relative; 14 top: 100px; 15 left: 50%; 16 transform: translateX(-50%); 17 background-color: #fff; 18 border-radius: 10px; 19 box-shadow: 0 0 5px #c2bfbf; 20 } 21 22 .content { 23 width: 300px; 24 height: 300px; 25 border-radius: 50%; 26 position: absolute; 27 } 28 .top{ 29 top: 55px; 30 left: 100px; 31 box-shadow:0 30px 0 #50dd45; 32 transform:rotate(50deg); 33 z-index:1000; 34 } 35 .center{ 36 top: 75px; 37 left: 75px; 38 background-color: #e8fc38; 39 40 } 41 .bottom{ 42 top: 95px; 43 left: 50px; 44 box-shadow:0 -30px 0 #50dd45; 45 transform:rotate(50deg); 46 z-index:1000; 47 } 48 .clip{ 49 width:1px; 50 height:1px; 51 border:150px solid transparent; 52 border-left-color:#e8fc38; 53 border-right-color:#e8fc38; 54 border-radius:50%; 55 position:absolute; 56 top:50%; 57 left:50%; 58 transform:translate(-50%,-50%); 59 z-index:1001; 60 } 61 .line{ 62 background-color:#50dd45; 63 border-radius:20px; 64 position:absolute; 65 top:50%; 66 left:50%; 67 transform:translate(-50%,-50%); 68 z-index:1010; 69 } 70 .x{ 71 width:180px; 72 height:45px; 73 } 74 .y{ 75 width:45px; 76 height:180px; 77 } 78 .circle{ 79 width: 30px; 80 height: 32px; 81 border-radius: 50%; 82 background-color: #50dd45; 83 z-index: 1012; 84 } 85 .circle-bottom{ 86 position: absolute; 87 top: 302px; 88 left: 114px; 89 } 90 .circle-top{ 91 position:absolute; 92 top: 111px; 93 left: 300px; 94 } 95 .react-top{ 96 width: 15px; 97 height: 8px; 98 background-color: #e8fc38; 99 transform: rotate(150deg); 100 position: absolute; 101 top: 115px; 102 left: 120px; 103 z-index: 1100; 104 } 105 .react-bottom{ 106 width: 15px; 107 height: 8px; 108 background-color: #e8fc38; 109 transform: rotate(150deg); 110 position: absolute; 111 top: 326px; 112 left: 317px; 113 z-index: 1100; 114 }
由于自己比较喜欢用firefox的开发者工具，所以这个只在firefox上测试过。
对于刚在学习css的同学是个不错的小案例，分享给你们，有兴趣的可以试试。当然，如果有更好的思路的，可以在下面留言，相互探讨，一起进步。
