純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的同學是個不錯的小案例，分享給你們，有興趣的可以試試。當然，如果有更好的思路的，可以在下麵留言，相互探討，一起進步。