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

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

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

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

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

效果图:

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

 <div class="container">
         <div class="content top"></div>
         <div class="content bottom"></div>
         <div class="content center">
             <div class="line x"></div>
             <div class="line y"></div>
         </div>
         <div class="clip"></div>
         <div class="circle circle-top"></div>
         <div class="circle circle-bottom"></div>
         <div class="react-top"></div>
         <div class="react-bottom"></div>
     </div>

 * {
             padding:;
             margin:;
         }

         body {
             background-color: #d5d3d4;
         }

         .container {
             width: 450px;
             height: 450px;
             position: relative;
             top: 100px;
             left: 50%;
             transform: translateX(-50%);
             background-color: #fff;
             border-radius: 10px;
             box-shadow: 0 0 5px #c2bfbf;
         }

         .content {
             width: 300px;
             height: 300px;
             border-radius: 50%;
             position: absolute;
         }
         .top{
             top: 55px;
             left: 100px;
             box-shadow:0 30px 0 #50dd45;
             transform:rotate(50deg);
             z-index:;
         }
         .center{
             top: 75px;
             left: 75px;
             background-color: #e8fc38;

         }
         .bottom{
             top: 95px;
             left: 50px;
             box-shadow:0 -30px 0 #50dd45;
             transform:rotate(50deg);
             z-index:;
         }
         .clip{
             width:1px;
             height:1px;
             border:150px solid transparent;
             border-left-color:#e8fc38;
             border-right-color:#e8fc38;
             border-radius:50%;
             position:absolute;
             top:50%;
             left:50%;
             transform:translate(-50%,-50%);
             z-index:;
         }
         .line{
             background-color:#50dd45;
             border-radius:20px;
             position:absolute;
             top:50%;
             left:50%;
             transform:translate(-50%,-50%);
             z-index:;
         }
         .x{
             width:180px;
             height:45px;
         }
         .y{
             width:45px;
             height:180px;
         }
         .circle{
             width: 30px;
             height: 32px;
             border-radius: 50%;
             background-color: #50dd45;
             z-index:;
         }
         .circle-bottom{
             position: absolute;
             top: 302px;
             left: 114px;
         }
         .circle-top{
             position:absolute;
             top: 111px;
             left: 300px;
         }
         .react-top{
             width: 15px;
             height: 8px;
             background-color: #e8fc38;
             transform: rotate(150deg);
             position: absolute;
             top: 115px;
             left: 120px;
             z-index:;
         }
         .react-bottom{
             width: 15px;
             height: 8px;
             background-color: #e8fc38;
             transform: rotate(150deg);
             position: absolute;
             top: 326px;
             left: 317px;
             z-index:;
         }

由于自己比较喜欢用firefox的开发者工具，所以这个只在firefox上测试过。

对于刚在学习css的同学是个不错的小案例，分享给你们，有兴趣的可以试试。当然，如果有更好的思路的，可以在下面留言，相互探讨，一起进步。