纯css实现扁平化360卫士logo demo_html/css

纯css实现扁平化360卫士logo demo_html/css_WEB-ITnose

WBOY

Libérer： 2016-06-24 11:27:32

original

1411 Les gens l'ont consulté

前几天在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>

Copier après la connexion

在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         }

Copier après la connexion

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

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