前几天在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>
在html代码部分，其实是有赘余的。像react-top 和 react-bottom这两个部分是可以不用的。由于自己没有通过比例计算。所以，
只好用这两个东东打补丁了。
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的同学是个不错的小案例，分享给你们，有兴趣的可以试试。当然，如果有更好的思路的，可以在下面留言，相互探讨，一起进步。
