web前端|html教程
纯css3制作写轮眼开眼及进化过程
web前端-html教程
dux主题源码,vscode必须使用路径,ubuntu新德里,运行tomcat无法选择,sqlite3 判断语句,爬虫如何破解加密文档里的密码,linux切换php版本,免费seo优化软件排名,音乐网站数据库,社区信息模板下载lzw
今天是火影忍者（漫画）宣告完结的日子，也是我首发的第一个随笔。看过火影的朋友都知道，写轮眼是什么，这里就不多说了。下面就直接展示整个效果，上张图，先睹为快：
装饰公司网站php源码,ubuntu字符界面教程,银行信息爬虫采集,<<– php,威海seo诊断lzw
真禧源码,ubuntu 进入c盘,tomcat运行时提示错误,爬虫python 视频下载,html如何向php传递参数,英德seo推广lzw
目前已经测试 IE10、Firefox浏览器、Chrome浏览器、Opera浏览器、360浏览器（两种模式）兼容已通过。
温馨提示：以上浏览器版本号均最新的；动画过程中每个阶段大约会停留5秒钟，希望你不会中幻术^_^。
在线演示源码下载
HTML代码：
1
23
4
5
6
7
8
9
10111213
14
15161718
19
20
21
22 23
24
252728
29
30
31
32
33
34
35363738
39
40414243
44
45
46
47 48
49
5051
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{
7width:130px;
8height:70px;
9background:#fff;
10position:absolute;
11top:0;
12left:0;
13overflow:hidden;
14border-radius:0 70px 0 50px;
15 }
16 .shadow{
17display:block;
18width:130px;
19height:70px;
20position:absolute;
21top:0;
22z-index:5;
23border-radius:0 90px 0 60px;
24box-shadow:5px 12px 2px 5px rgba(0,0,0,.25) inset;
25 }
26 .skewLeft{
27transform:skewX(15deg);
28-webkit-transform:skewX(15deg);
29-o-transform:skewX(15deg);
30 }
31 .skewRight{
32transform:skewX(-15deg) scale(-1,1);
33-webkit-transform:skewX(-15deg) scale(-1,1);
34-o-transform:skewX(-15deg) scale(-1,1);
35 }
36 .basic{
37width:60px;
38height:60px;
39background:#000;
40position:absolute;
41top:50%;
42left:50%;
43z-index:10;
44margin-top:-30px;
45border-radius:60%;
46 }
47 .basic:before{
48content:"";
49display:block;
50width:10px;
51height:11px;
52position:absolute;
53left:15px;
54top:15px;
55z-index:100;
56border-radius:60%;
57background-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{
62margin-left:-33px;
63 }
64 .pullRight .basic{
65margin-left:-27px;
66 }
67 .eyes{
68width:55px;
69height:55px;
70background:#ff0000;
71position:absolute;
72top:8px;
73border-radius:60%;
74box-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{
79width:64%;
80height:64%;
81background:#ff0000;
82position:absolute;
83right:0;
84left:0;
85top:10px;
86margin:0 auto;
87border-radius:60%;
88box-shadow:0 0 2px 0 #b20000 inset;
89 }
90 .eyes .line:before{
91content:"";
92display:block;
93width:10px;
94height:11px;
95position:absolute;
96left:3px;
97top:4px;
98z-index:100;
99border-radius:60%;
100background-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{
105content:"";
106display:block;
107width:10px;
108height:10px;
109position:absolute;
110background:#000;
111right:0;
112left:-1px;
113top:13px;
114z-index:100;
115margin:0 auto;
116border-radius:60%;
117transform:rotate(150deg);
118-webkit-transform:rotate(150deg);
119-o-transform:rotate(150deg);
120animation: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{
1250%{background:#000;}
12635%{background:#000;}
12740%{background:#f00;}
128100%{background:#f00;}
129 }
130 @-webkit-keyframes colour{
1310%{background:#000;}
13235%{background:#000;}
13340%{background:#f00;}
134100%{background:#f00;}
135 }
136 @-o-keyframes colour{
1370%{background:#000;}
13835%{background:#000;}
13940%{background:#f00;}
140100%{background:#f00;}
141 }
142 /*******三勾玉 开始*******/
143 .hook{
144width:92%;
145height:92%;
146position:absolute;
147right:0;
148left:0;
149top:5%;
150margin:0 auto;
151border-radius:60%;
152 }
153 .hook .bar{
154display:block;
155width:100%;
156height:100%;
157position:absolute;
158left:0;
159top:0;
160border-radius:60%;
161 }
162 .hook .bar b{
163display:block;
164width:8px;
165height:8px;
166background:#000;
167position:absolute;
168left:0;
169bottom:0;
170border-radius:60%;
171 }
172 .hook .bar b:after{
173content:"";
174width:8px;
175height:8px;
176border-color:transparent transparent #000 transparent;
177border-style:solid;
178border-width:0 0 5px 0;
179position:absolute;
180top:-1px;
181left:-3px;
182z-index:100;
183border-radius:0 0 0 70%;
184transform:rotate(-75deg);
185-webkit-transform:rotate(-75deg);
186-o-transform:rotate(-75deg);
187 }
188 .hook .bar:nth-child(1){
189transform:rotate(10deg);
190-webkit-transform:rotate(10deg);
191-o-transform:rotate(10deg);
192 }
193 .hook .bar:nth-child(2){
194transform:rotate(130deg);
195-webkit-transform:rotate(130deg);
196-o-transform:rotate(130deg);
197 }
198 .hook .bar:nth-child(3){
199transform:rotate(250deg);
200-webkit-transform:rotate(250deg);
201-o-transform:rotate(250deg);
202 }
203 /*******三勾玉 结束*******/
204 /*******万花筒 开始*******/
205 .tube{
206width:93%;
207height:93%;
208position:absolute;
209right:0;
210left:0px;
211top:2px;
212margin:0 auto;
213background:#000;
214border-radius:60%;
215 }
216 .tube .bar{
217display:block;
218width:10px;
219height:20px;
220border-style:solid;
221border-width:0 0 0 10px;
222border-color:transparent transparent transparent black;
223position:absolute;
224border-radius:100% 0 0 0;
225 }
226 .tube .bar:nth-child(1){
227top:-10px;
228left:2px;
229transform:rotate(-10deg);
230 }
231 .tube .bar:nth-child(2){
232bottom:0px;
233right:-10px;
234transform:rotate(105deg);
235-webkit-transform:rotate(105deg);
236-o-transform:rotate(105deg);
237 }
238 .tube .bar:nth-child(3){
239bottom:-3px;
240left:-10px;
241transform:rotate(235deg);
242-webkit-transform:rotate(235deg);
243-o-transform:rotate(235deg);
244 }
245 /*******万花筒 结束*******/
246 /*******轮回眼 开始*******/
247 .trans{
248width:130px;
249height:70px;
250position:absolute;
251overflow:hidden;
252top:0;
253left:0;
254border-radius:0 70px 0 50px;
255 }
256 .trans .bar{
257display:block;
258width:9px;
259height:9px;
260background:#000;
261position:absolute;
262top:50%;
263z-index:2;
264margin:-4px 0 0 -4px;
265border-radius:60%;
266 }
267 .trans .bar:after{
268content:"";
269display:block;
270width:11px;
271height:12px;
272position:absolute;
273top:-13px;
274left:-13px;
275z-index:100;
276border-radius:60%;
277background:rgba(250,250,250,.85);
278 }
279 .pullLeft .trans .bar{
280transform:skewX(-15deg);
281-webkit-transform:skewX(-15deg);
282-o-transform:skewX(-15deg);
283 }
284 .pullLeft .trans .bar{left:48%;}
285 .pullRight .trans .bar{
286transform: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{
293animation: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{
2980%{opacity:1;transform:scale(1);}
2995%{opacity:1;transform:scale(1);}
30010%{opacity:0;transform:scale(0);}
30187%{opacity:0;transform:scale(0);}
30290%{opacity:1;transform:scale(1);}
303100%{opacity:1;transform:scale(1);}
304 }
305 @-webkit-keyframes ani-narrow{
3060%{opacity:1;-webkit-transform:scale(1);}
3075%{opacity:1;-webkit-transform:scale(1);}
30810%{opacity:0;-webkit-transform:scale(0);}
30987%{opacity:0;-webkit-transform:scale(0);}
31090%{opacity:1;-webkit-transform:scale(1);}
311100%{opacity:1;-webkit-transform:scale(1);}
312 }
313 @-o-keyframes ani-narrow{
3140%{opacity:1;-o-transform:scale(1);}
3155%{opacity:1;-o-transform:scale(1);}
31610%{opacity:0;-o-transform:scale(0);}
31787%{opacity:0;-o-transform:scale(0);}
31890%{opacity:1;-o-transform:scale(1);}
319100%{opacity:1;-o-transform:scale(1);}
320 }
321 .ani-zoom{
322animation: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{
3270%{opacity:0;transform:scale(0);}
3285%{opacity:0;transform:scale(0);}
3298%{opacity:1;transform:scale(1);}
33060%{opacity:1;transform:scale(1);}
33162%{opacity:0;transform:scale(1.5);}
332100%{opacity:0;transform:scale(0);}
333 }
334 @-webkit-keyframes ani-zoom{
3350%{opacity:0;-webkit-transform:scale(0);}
3365%{opacity:0;-webkit-transform:scale(0);}
3378%{opacity:1;-webkit-transform:scale(1);}
33860%{opacity:1;-webkit-transform:scale(1);}
33962%{opacity:0;-webkit-transform:scale(1.5);}
340100%{opacity:0;-webkit-transform:scale(0);}
341 }
342 @-o-keyframes ani-zoom{
3430%{opacity:0;-o-transform:scale(0);}
3445%{o
如果觉得《纯css3制作写轮眼开眼及进化过程》对你有帮助，请点赞、收藏，并留下你的观点哦！
