純css3製作寫輪眼開眼及進化過程

来源:http://www.cnblogs.com/shouce/archive/2016/05/26/5529600.html
-Advertisement-
Play Games

今天是火影忍者（漫畫）宣告完結的日子，也是我首發的第一個隨筆。看過火影的朋友都知道，寫輪眼是什麼，這裡就不多說了。下麵就直接展示整個效果，上張圖，先睹為快： 目前已經測試 IE10、Firefox瀏覽器、Chrome瀏覽器、Opera瀏覽器、360瀏覽器（兩種模式）相容已通過。 溫馨提示：以上瀏覽器 ...


今天是火影忍者（漫畫）宣告完結的日子，也是我首發的第一個隨筆。看過火影的朋友都知道，寫輪眼是什麼，這裡就不多說了。下麵就直接展示整個效果，上張圖，先睹為快：

目前已經測試 IE10、Firefox瀏覽器、Chrome瀏覽器、Opera瀏覽器、360瀏覽器（兩種模式）相容已通過。

溫馨提示：以上瀏覽器版本號均最新的；動畫過程中每個階段大約會停留5秒鐘，希望你不會中幻術^_^。

線上演示　　　　源碼下載

 

HTML代碼：

複製代碼 
 1 <div class="container">
 2     <!--左眼開始-->
 3     <div class="eyesBoxs pullLeft">
 4         <div class="profile skewLeft"></div>
 5         <div class="shadow skewLeft"></div>
 6         <div class="basic ani-narrow"></div>
 7         <div class="eyes ani-zoom">
 8             <div class="line">           
 9                 <div class="hook ani-rotateHook">
10                     <span class="bar"><b></b></span>
11                     <span class="bar"><b></b></span>
12                     <span class="bar"><b></b></span>
13                 </div>
14                 <div class="tube ani-rotateTube">
15                     <span class="bar"></span>
16                     <span class="bar"></span>
17                     <span class="bar"></span>
18                 </div>
19             </div>
20         </div>
21         <div class="trans skewLeft">
22             <span class="bar ani-shadow"></span>
23         </div>
24     </div>
25     <!--左眼結束-->
27     <!--右眼開始-->
28     <div class="eyesBoxs pullRight">
29         <div class="profile skewRight"></div>
30         <div class="shadow skewRight"></div>
31         <div class="basic ani-narrow"></div>
32         <div class="eyes ani-zoom">
33             <div class="line">           
34                 <div class="hook ani-rotateHook">
35                     <span class="bar"><b></b></span>
36                     <span class="bar"><b></b></span>
37                     <span class="bar"><b></b></span>
38                 </div>
39                 <div class="tube ani-rotateTube">
40                     <span class="bar"></span>
41                     <span class="bar"></span>
42                     <span class="bar"></span>
43                 </div>
44             </div>
45         </div>
46         <div class="trans skewRight">
47             <span class="bar ani-shadow"></span>
48         </div>
49     </div>
50     <!--右眼結束-->
51 </div>
複製代碼

CSS代碼：

  1 *{margin:0;padding:0;}
  2 .container{ width:750px; height:200px; margin:30px auto;overflow:hidden; background:#000; position:relative;}
  3 .eyesBoxs{width:130px;height:70px;position:absolute;top:50px;}
  4 .pullLeft{left:100px;}
  5 .pullRight{right:100px;}
  6 .profile{
  7     width:130px;
  8     height:70px;
  9     background:#fff;
 10     position:absolute;
 11     top:0;
 12     left:0;
 13     overflow:hidden;
 14     border-radius:0 70px 0 50px;
 15 }
 16 .shadow{
 17     display:block;
 18     width:130px;
 19     height:70px;
 20     position:absolute;
 21     top:0;
 22     z-index:5;
 23     border-radius:0 90px 0 60px;
 24     box-shadow:5px 12px 2px 5px rgba(0,0,0,.25) inset;
 25 }
 26 .skewLeft{
 27     transform:skewX(15deg);
 28     -webkit-transform:skewX(15deg);
 29     -o-transform:skewX(15deg);
 30 }
 31 .skewRight{
 32     transform:skewX(-15deg) scale(-1,1);
 33     -webkit-transform:skewX(-15deg) scale(-1,1);
 34     -o-transform:skewX(-15deg) scale(-1,1);
 35 }
 36 .basic{
 37     width:60px;
 38     height:60px;
 39     background:#000;
 40     position:absolute;
 41     top:50%;
 42     left:50%;
 43     z-index:10;
 44     margin-top:-30px;
 45     border-radius:60%;
 46 }
 47 .basic:before{
 48     content:"";
 49     display:block;
 50     width:10px;
 51     height:11px;
 52     position:absolute;
 53     left:15px;
 54     top:15px;
 55     z-index:100;
 56     border-radius:60%;
 57     background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
 58     -webkit-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
 59     -o-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
 60 }
 61 .pullLeft .basic{
 62     margin-left:-33px;
 63 }
 64 .pullRight .basic{
 65     margin-left:-27px;
 66 }
 67 .eyes{
 68     width:55px;
 69     height:55px;
 70     background:#ff0000;
 71     position:absolute;
 72     top:8px;
 73     border-radius:60%;
 74     box-shadow:0 0 2px 4px #bd0000 inset,0 0 0 2px #000;
 75 }
 76 .pullLeft .eyes{left:35px;}
 77 .pullRight .eyes{right:35px;}
 78 .eyes .line{
 79     width:64%;
 80     height:64%;
 81     background:#ff0000;
 82     position:absolute;
 83     right:0;
 84     left:0;
 85     top:10px;
 86     margin:0 auto;
 87     border-radius:60%;
 88     box-shadow:0 0 2px 0 #b20000 inset;
 89 }
 90 .eyes .line:before{
 91     content:"";
 92     display:block;
 93     width:10px;
 94     height:11px;
 95     position:absolute;
 96     left:3px;
 97     top:4px;
 98     z-index:100;
 99     border-radius:60%;
100     background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
101     -webkit-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
102     -o-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
103 }
104 .eyes .line:after{
105     content:"";
106     display:block;
107     width:10px;
108     height:10px;
109     position:absolute;
110     background:#000;
111     right:0;
112     left:-1px;
113     top:13px;
114     z-index:100;
115     margin:0 auto;
116     border-radius:60%;
117     transform:rotate(150deg);
118     -webkit-transform:rotate(150deg);
119     -o-transform:rotate(150deg);
120     animation:colour 20s ease-in infinite;
121     -webkit-animation:colour 20s ease-in infinite;
122     -o-animation:colour 20s ease-in infinite;
123 }
124 @keyframes colour{
125     0%{background:#000;}
126     35%{background:#000;}
127     40%{background:#f00;}
128     100%{background:#f00;}
129 }
130 @-webkit-keyframes colour{
131     0%{background:#000;}
132     35%{background:#000;}
133     40%{background:#f00;}
134     100%{background:#f00;}
135 }
136 @-o-keyframes colour{
137     0%{background:#000;}
138     35%{background:#000;}
139     40%{background:#f00;}
140     100%{background:#f00;}
141 }
142 /*******三勾玉 開始*******/
143 .hook{
144     width:92%;
145     height:92%;
146     position:absolute;
147     right:0;
148     left:0;
149     top:5%;
150     margin:0 auto;
151     border-radius:60%;
152 }
153 .hook .bar{
154     display:block;
155     width:100%;
156     height:100%;
157     position:absolute;
158     left:0;
159     top:0;
160     border-radius:60%;
161 }
162 .hook .bar b{
163     display:block;
164     width:8px;
165     height:8px;
166     background:#000;
167     position:absolute;
168     left:0;
169     bottom:0;
170     border-radius:60%;
171 }
172 .hook .bar b:after{
173     content:"";
174     width:8px;
175     height:8px;
176     border-color:transparent transparent #000 transparent;
177     border-style:solid;
178     border-width:0 0 5px 0;
179     position:absolute;
180     top:-1px;
181     left:-3px;
182     z-index:100;
183     border-radius:0 0 0 70%;
184     transform:rotate(-75deg);
185     -webkit-transform:rotate(-75deg);
186     -o-transform:rotate(-75deg);
187 }
188 .hook .bar:nth-child(1){
189     transform:rotate(10deg);
190     -webkit-transform:rotate(10deg);
191     -o-transform:rotate(10deg);
192 }
193 .hook .bar:nth-child(2){
194     transform:rotate(130deg);
195     -webkit-transform:rotate(130deg);
196     -o-transform:rotate(130deg);
197 }
198 .hook .bar:nth-child(3){
199     transform:rotate(250deg);
200     -webkit-transform:rotate(250deg);
201     -o-transform:rotate(250deg);
202 }
203 /*******三勾玉 結束*******/
204 /*******萬花筒 開始*******/
205 .tube{
206     width:93%;
207     height:93%;
208     position:absolute;
209     right:0;
210     left:0px;
211     top:2px;
212     margin:0 auto;
213     background:#000;
214     border-radius:60%;
215 }
216 .tube .bar{
217     display:block;
218     width:10px;
219     height:20px;
220     border-style:solid;
221     border-width:0 0 0 10px;
222     border-color:transparent transparent transparent black;
223     position:absolute;
224     border-radius:100% 0 0 0;
225 }
226 .tube .bar:nth-child(1){
227     top:-10px;
228     left:2px;
229     transform:rotate(-10deg);
230 }
231 .tube .bar:nth-child(2){
232     bottom:0px;
233     right:-10px;
234     transform:rotate(105deg);
235     -webkit-transform:rotate(105deg);
236     -o-transform:rotate(105deg);
237 }
238 .tube .bar:nth-child(3){
239     bottom:-3px;
240     left:-10px;
241     transform:rotate(235deg);
242     -webkit-transform:rotate(235deg);
243     -o-transform:rotate(235deg);
244 }
245 /*******萬花筒 結束*******/
246 /*******輪迴眼 開始*******/
247 .trans{
248     width:130px;
249     height:70px;
250     position:absolute;
251     overflow:hidden;
252     top:0;
253     left:0;
254     border-radius:0 70px 0 50px;
255 }
256 .trans .bar{
257     display:block;
258     width:9px;
259     height:9px;
260     background:#000;
261     position:absolute;
262     top:50%;
263     z-index:2;
264     margin:-4px 0 0 -4px;
265     border-radius:60%;
266 }
267 .trans .bar:after{    
268     content:"";
269     display:block;
270     width:11px;
271     height:12px;
272     position:absolute;
273     top:-13px;
274     left:-13px;
275     z-index:100;
276     border-radius:60%;
277     background:rgba(250,250,250,.85);
278 }
279 .pullLeft .trans .bar{
280     transform:skewX(-15deg);
281     -webkit-transform:skewX(-15deg);
282     -o-transform:skewX(-15deg);
283 }
284 .pullLeft .trans .bar{left:48%;}
285 .pullRight .trans .bar{
286     transform:skewX(-15deg) scale(-1,1);
287     -webkit-transform:skewX(-15deg) scale(-1,1);
288     -o-transform:skewX(-15deg) scale(-1,1);
289 }
290 .pullRight .trans .bar{right:48%;}
291 /*******輪迴眼 結束*******/
292 .ani-narrow{
293     animation:ani-narrow 20s ease-out infinite;
294     -webkit-animation:ani-narrow 20s ease-out infinite;
295     -o-animation:ani-narrow 20s ease-out infinite;
296 }
297 @keyframes ani-narrow{
298     0%{opacity:1;transform:scale(1);}
299     5%{opacity:1;transform:scale(1);}
300     10%{opacity:0;transform:scale(0);}
301     87%{opacity:0;transform:scale(0);}
302     90%{opacity:1;transform:scale(1);}
303     100%{opacity:1;transform:scale(1);}
304 }
305 @-webkit-keyframes ani-narrow{
306     0%{opacity:1;-webkit-transform:scale(1);}
307     5%{opacity:1;-webkit-transform:scale(1);}
308     10%{opacity:0;-webkit-transform:scale(0);}
309     87%{opacity:0;-webkit-transform:scale(0);}
310     90%{opacity:1;-webkit-transform:scale(1);}
311     100%{opacity:1;-webkit-transform:scale(1);}
312 }
313 @-o-keyframes ani-narrow{
314     0%{opacity:1;-o-transform:scale(1);}
315     5%{opacity:1;-o-transform:scale(1);}
316     10%{opacity:0;-o-transform:scale(0);}
317     87%{opacity:0;-o-transform:scale(0);}
318     90%{opacity:1;-o-transform:scale(1);}
319     100%{opacity:1;-o-transform:scale(1);}
320 }
321 .ani-zoom{
322     animation:ani-zoom 20s linear infinite;
323     -webkit-animation:ani-zoom 20s linear infinite;
324     -o-animation:ani-zoom 20s linear infinite;
325 }
326 @keyframes ani-zoom{
327     0%{opacity:0;transform:scale(0);}
328     5%{opacity:0;transform:scale(0);}
329     8%{opacity:1;transform:scale(1);}
330     60%{opacity:1;transform:scale(1);}
331     62%{opacity:0;transform:scale(1.5);}
332     100%{opacity:0;transform:scale(0);}
333 }
334 @-webkit-keyframes ani-zoom{
335     0%{opacity:0;-webkit-transform:scale(0);}
336     5%{opacity:0;-webkit-transform:scale(0);}
337     8%{opacity:1;-webkit-transform:scale(1);}
338     60%{opacity:1;-webkit-transform:scale(1);}
339     62%{opacity:0;-webkit-transform:scale(1.5);}
340     100%{opacity:0;-webkit-transform:scale(0);}
341 }
342 <
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 能判斷是否還有剩餘空間的靜態鏈表
    第一次系統的學習數據結構是在半年前，看小甲魚的數據結構與演算法視頻，自學的話有許多不懂得地方，什麼AVL樹，紅黑樹，圖的最短路徑，最小生成樹...但總歸對數據結構與演算法有一個大體的印象，到現在隨著不斷寫代碼，做OJ題，愈發認識到數據結構與演算法的重要性，打算再看一遍，現在看著：大話數據結構（程傑著），數 ...
  • 最好用的離線markdown編輯器Haroopad介紹
    最好用的離線markdown編輯器Haroopad介紹 經常寫技術文檔，需要將文檔像代碼一樣管理，例如可以提交SVN或者GIT，可以比對歷史差異。用WORD之類的工具，文檔不是純文本，沒法滿足需求。用簡單文本沒有格式不美觀。Latex最強大，但是對於一般文檔撰寫又太重量，配置一個好的模板太費神，而且 ...
  • PHP實現數據分頁顯示
    分頁在後臺管理中是經常使用的功能，分頁顯示方便大量數據的管理。 實例代碼如下： ...
  • 6.python字元串-內置方法列舉
    所謂內置方法，就是凡是字元串都能用的方法，這個方法在創建字元串的類中，下麵是總結： 首先，我們要學習一個獲取幫助的內置函數 help(對象) ，對象可以是一個我們創建出來的，也可以是創建對象的那個類，類也是一個對象，被稱為類對象。 當我們進入解釋器的交互模式中輸入以下代碼時： 其中，str就是創建字 ...
  • 一道有趣的erlang建模練習
    一道有趣的erlang建模練習 領域建模在於不斷挖掘領域的本質，然後用優秀的代碼簡潔地表現出來。而函數式非常適合將領域映射到數學本質上。前一陣子學習erlang，用erlang做了一些練習，分享其中的一個。 practice 1 : count tiangle 題目： 數數如下圖形中一共包含多少三角 ...
  • 千呼萬喚 HTML 5 (8) - 畫布（canvas）之繪製圖形
    [索引頁][源碼下載] 千呼萬喚 HTML 5 (8) - 畫布（canvas）之繪製圖形 作者：webabcd 介紹HTML 5: 畫布（canvas）之繪製圖形 畫布 Demo - 畫布的基本概念及 Demo，canvas.getContext(), CanvasRenderingContext ...
  • jQuery點擊tr實現checkbox
    標題描述的有點不貼切，但希望大家能夠明白，為了更形像的表達，我特意錄製了一張GIF動畫圖片。 我不知道實際開發中有沒有用到這種效果，但我個人認為，這種方式更人性化，因為只要點到一行，就可以使CheckBox.checked=true； 不用非得點覆選按鈕才能實現; 實現的過程有點糾結，試了幾次都沒成 ...
  • javascript中的變數、作用域和記憶體問題
    【變數】[1]定義：可變的量，相當於給一個不定的數據起了一個外號。變數是存儲信息的容器。[2]特性：js中的變數是鬆散類型的，可以保存任何類型的數據。它只是在特定時間用於保存特定值的一個名字而已。由於不存在定義某個變數必須要保存何種數據類型值的規則，變數的值及其數據類型可以在腳本的生命周期內改變。[ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類