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

Posted 2020-06-13

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