纯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: 0;
margin: 0;
}

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:1000;
}
.center{
top: 75px;
left: 75px;
background-color: #e8fc38;

}
.bottom{
top: 95px;
left: 50px;
box-shadow:0 -30px 0 #50dd45;
transform:rotate(50deg);
z-index:1000;
}
.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:1001;
}
.line{
background-color:#50dd45;
border-radius:20px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:1010;
}
.x{
width:180px;
height:45px;
}
.y{
width:45px;
height:180px;
}
.circle{
width: 30px;
height: 32px;
border-radius: 50%;
background-color: #50dd45;
z-index: 1012;
}
.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: 1100;
}
.react-bottom{
width: 15px;
height: 8px;
background-color: #e8fc38;
transform: rotate(150deg);
position: absolute;
top: 326px;
left: 317px;
z-index: 1100;
}

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

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