你的位置:首页 > 网页设计

[网页设计]纯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>

在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的同学是个不错的小案例,分享给你们,有兴趣的可以试试。当然,如果有更好的思路的,可以在下面留言,相互探讨,一起进步。