纯CSS3实现写轮眼进化动画特效

html

 <body><div class="container"><!--左眼开始--><div class="eyesBoxs pullLeft"><!--轮廓开始--><div class="profile skewLeft"></div><div class="shadow skewLeft"></div><!--轮廓结束--><div class="basic ani-narrow"></div><!--写轮眼开始--><div class="eyes ani-zoom"><div class="line"><!--三勾玉--><div class="hook ani-rotateHook"><span class="bar"><b></b></span><span class="bar"><b></b></span><span class="bar"><b></b></span></div><!--end--><!--万花筒--><div class="tube ani-rotateTube"><span class="bar"></span><span class="bar"></span><span class="bar"></span></div><!--end--></div></div><!--写轮眼结束--><!--轮回眼开始--><div class="trans skewLeft"><span class="bar ani-shadow"></span></div><!--轮回眼结束--></div><!--左眼结束--><!--右眼开始--><div class="eyesBoxs pullRight"><!--轮廓开始--><div class="profile skewRight"></div><div class="shadow skewRight"></div><!--轮廓结束--><div class="basic ani-narrow"></div><!--写轮眼开始--><div class="eyes ani-zoom"><div class="line"><!--三勾玉--><div class="hook ani-rotateHook"><span class="bar"><b></b></span><span class="bar"><b></b></span><span class="bar"><b></b></span></div><!--end--><!--万花筒--><div class="tube ani-rotateTube"><span class="bar"></span><span class="bar"></span><span class="bar"></span></div><!--end--></div></div><!--写轮眼结束--><!--轮回眼开始--><div class="trans skewRight"><span class="bar ani-shadow"></span></div><!--轮回眼结束--></div><!--右眼结束--></div><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p><a href="https://blog.csdn.net/qq_44382922" target="_blank">qq_yu_kok</a></p></div></body>

css

自己创建一个空白的style.css 文件然后把下面的代码直接复制进去就行了

@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;}
.container{ width:800px; height:200px; margin:30px auto;overflow:hidden; background:#000; position:relative;}
.eyesBoxs{width:130px;height:70px;position:absolute;top:50px;}
.pullLeft{left:100px;}
.pullRight{right:100px;}
.profile{width:130px;height:70px;background:#fff;position:absolute;top:0;left:0;overflow:hidden;border-radius:0 70px 0 50px;
}
.shadow{display:block;width:130px;height:70px;position:absolute;top:0;z-index:5;border-radius:0 90px 0 60px;box-shadow:5px 12px 2px 5px rgba(0,0,0,.25) inset;
}
.skewLeft{transform:skewX(15deg);-webkit-transform:skewX(15deg);-o-transform:skewX(15deg);
}
.skewRight{transform:skewX(-15deg) scale(-1,1);-webkit-transform:skewX(-15deg) scale(-1,1);-o-transform:skewX(-15deg) scale(-1,1);
}
.basic{width:60px;height:60px;background:#000;position:absolute;top:50%;left:50%;z-index:10;margin-top:-30px;border-radius:60%;
}
.basic:before{content:"";display:block;width:10px;height:11px;position:absolute;left:15px;top:15px;z-index:100;border-radius:60%;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));-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));-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));
}
.pullLeft .basic{margin-left:-33px;
}
.pullRight .basic{margin-left:-27px;
}
.eyes{width:55px;height:55px;background:#ff0000;position:absolute;top:8px;border-radius:60%;box-shadow:0 0 2px 4px #bd0000 inset,0 0 0 2px #000;
}
.pullLeft .eyes{left:35px;}
.pullRight .eyes{right:35px;}
.eyes .line{width:64%;height:64%;background:#ff0000;position:absolute;right:0;left:0;top:10px;margin:0 auto;border-radius:60%;box-shadow:0 0 2px 0 #b20000 inset;
}
.eyes .line:before{content:"";display:block;width:10px;height:11px;position:absolute;left:3px;top:4px;z-index:100;border-radius:60%;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));-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));-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));
}
.eyes .line:after{content:"";display:block;width:10px;height:10px;position:absolute;background:#000;right:0;left:-1px;top:13px;z-index:100;margin:0 auto;border-radius:60%;transform:rotate(150deg);-webkit-transform:rotate(150deg);-o-transform:rotate(150deg);animation:colour 0.5s ease-in 7s;-webkit-animation:colour 0.5s ease-in 7s;-o-animation:colour 0.5s ease-in 7s;
}
@keyframes colour{0%{background:#000;}100%{background:#f00;}
}
@-webkit-keyframes colour{0%{background:#000;}100%{background:#f00;}
}
@-o-keyframes colour{0%{background:#000;}100%{background:#f00;}
}
/*******三勾玉 开始*******/
.hook{width:92%;height:92%;position:absolute;right:0;left:0;top:5%;margin:0 auto;border-radius:60%;
}
.hook .bar{display:block;width:100%;height:100%;position:absolute;left:0;top:0;border-radius:60%;
}
.hook .bar b{display:block;width:8px;height:8px;background:#000;position:absolute;left:0;bottom:0;border-radius:60%;
}
.hook .bar b:after{content:"";width:8px;height:8px;border-color:transparent transparent #000 transparent;border-style:solid;border-width:0 0 5px 0;position:absolute;top:-1px;left:-3px;z-index:100;border-radius:0 0 0 70%;transform:rotate(-75deg);-webkit-transform:rotate(-75deg);-o-transform:rotate(-75deg);
}
.hook .bar:nth-child(1){transform:rotate(10deg);-webkit-transform:rotate(10deg);-o-transform:rotate(10deg);
}
.hook .bar:nth-child(2){transform:rotate(130deg);-webkit-transform:rotate(130deg);-o-transform:rotate(130deg);
}
.hook .bar:nth-child(3){transform:rotate(250deg);-webkit-transform:rotate(250deg);-o-transform:rotate(250deg);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tube{width:93%;height:93%;position:absolute;right:0;left:0px;top:2px;margin:0 auto;background:#000;border-radius:60%;
}
.tube .bar{display:block;width:10px;height:20px;border-style:solid;border-width:0 0 0 10px;border-color:transparent transparent transparent black;position:absolute;border-radius:100% 0 0 0;
}
.tube .bar:nth-child(1){top:-10px;left:2px;transform:rotate(-10deg);
}
.tube .bar:nth-child(2){bottom:0px;right:-10px;transform:rotate(105deg);-webkit-transform:rotate(105deg);-o-transform:rotate(105deg);
}
.tube .bar:nth-child(3){bottom:-3px;left:-10px;transform:rotate(235deg);-webkit-transform:rotate(235deg);-o-transform:rotate(235deg);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{width:130px;height:70px;position:absolute;overflow:hidden;top:0;left:0;border-radius:0 70px 0 50px;
}
.trans .bar{display:block;width:9px;height:9px;background:#000;position:absolute;top:50%;z-index:2;margin:-4px 0 0 -4px;border-radius:60%;
}
.trans .bar:after{  content:"";display:block;width:11px;height:12px;position:absolute;top:-13px;left:-13px;z-index:100;border-radius:60%;background:rgba(250,250,250,.85);
}
.pullLeft .trans .bar{transform:skewX(-15deg);-webkit-transform:skewX(-15deg);-o-transform:skewX(-15deg);
}
.pullLeft .trans .bar{left:48%;}
.pullRight .trans .bar{transform:skewX(-15deg) scale(-1,1);-webkit-transform:skewX(-15deg) scale(-1,1);-o-transform:skewX(-15deg) scale(-1,1);
}
.pullRight .trans .bar{right:48%;}
/*******轮回眼 结束*******/
.ani-narrow{            /*基本眼*/animation:ani-narrow 0.5s linear 1s;-webkit-animation:ani-narrow 0.5s linear 1s;-o-animation:ani-narrow 0.5s linear 1s;
}
@keyframes ani-narrow{from{transform:scale(1);}to{opacity:0;transform:scale(0);}
}
@-webkit-keyframes ani-narrow{from{-webkit-transform:scale(1);}to{opacity:0;-webkit-transform:scale(0);}
}
@-o-keyframes ani-narrow{from{-o-transform:scale(1);}to{opacity:0;-o-transform:scale(0);}
}
.ani-zoom{              /*红色眼*/animation:ani-zoom 11s linear 0.8s;-webkit-animation:ani-zoom 11s linear 0.8s;-o-animation:ani-zoom 11s linear 0.8s;
}
@keyframes ani-zoom{0%{opacity:0;transform:scale(0);}6%{opacity:1;transform:scale(1);}95%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1.5);}
}
@-webkit-keyframes ani-zoom{0%{opacity:0;-webkit-transform:scale(0);}6%{opacity:1;-webkit-transform:scale(1);}95%{opacity:1;-webkit-transform:scale(1);}100%{opacity:0;-webkit-transform:scale(1.5);}
}
@-o-keyframes ani-zoom{0%{opacity:0;-o-transform:scale(0);}6%{opacity:1;-o-transform:scale(1);}95%{opacity:1;-o-transform:scale(1);}100%{opacity:0;-o-transform:scale(1.5);}
}
.ani-rotateHook{            /*三勾玉*/animation:ani-rotateHook 5s ease-in 2.5s;-webkit-animation:ani-rotateHook 5s ease-in 2.5s;-o-animation:ani-rotateHook 5s ease-in 2.5s;
}
@keyframes ani-rotateHook{0%{opacity:0;transform:scale(0) rotate(0);}15%{opacity:1;transform:scale(1) rotate(-360deg);}90%{opacity:1;transform:scale(1) rotate(-360deg);}100%{opacity:0;transform:scale(1.8) rotate(-540deg);}
}
@-webkit-keyframes ani-rotateHook{0%{opacity:0;-webkit-transform:scale(0) rotate(0);}15%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}90%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}100%{opacity:0;-webkit-transform:scale(1.8) rotate(-540deg);}
}
@-o-keyframes ani-rotateHook{0%{opacity:0;-o-transform:scale(0) rotate(0);}15%{opacity:1;-o-transform:scale(1) rotate(-360deg);}90%{opacity:1;-o-transform:scale(1) rotate(-360deg);}100%{opacity:0;-o-transform:scale(1.8) rotate(-540deg);}
}
.ani-rotateTube{            /*万花筒*/animation:ani-rotateTube 5s ease-in-out 6.5s;-webkit-animation:ani-rotateTube 5s ease-in-out 6.5s;-o-animation:ani-rotateTube 5s ease-in-out 6.5s;
}
@keyframes ani-rotateTube{0%{opacity:0;transform:scale(0) rotate(0);}30%{opacity:1;transform:scale(1) rotate(-360deg);}100%{opacity:1;transform:scale(1) rotate(-360deg);}
}
@-webkit-keyframes ani-rotateTube{0%{opacity:0;-webkit-transform:scale(0) rotate(0);}30%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}100%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}
}
@-o-keyframes ani-rotateTube{0%{opacity:0;-o-transform:scale(0) rotate(0);}30%{opacity:1;-o-transform:scale(1) rotate(-360deg);}100%{opacity:1;-o-transform:scale(1) rotate(-360deg);}
}
.ani-shadow{            /*轮回眼*/animation:ani-shadow 1s linear 11s;-webkit-animation:ani-shadow 1s linear 11s;-o-animation:ani-shadow 1s linear 11s;
}
@keyframes ani-shadow{0%{opacity:0;box-shadow:none;}100%{opacity:1;box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000;}
}
@-webkit-keyframes ani-shadow{0%{opacity:0;box-shadow:none;}100%{opacity:1;box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000;}
}
@-o-keyframes ani-shadow{0%{opacity:0;box-shadow:none;}100%{opacity:1;box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000;}
}
.ani-narrow,
.ani-zoom,
.ani-rotateHook,
.ani-rotateTube,
.ani-shadow,
.eyes .line:after{animation-fill-mode:both;-webkit-animation-fill-mode:both;-o-animation-fill-mode:both;
}

如有雷同勿怪我也学来的
还有想要文件的可以直接私聊我
然后请期待我下次会更新什么吧

纯CSS3实现写轮眼进化动画特效，在别的素材网站要20积分哟，不过我在这里的就直接免费输出了相关推荐

css滑动星星评分,纯css3滑动星星打分动画特效
特效描述:纯css3 滑动星星打分动画.纯css3滑动星星打分动画特效代码结构 1. 引入CSS 2. HTML代码基本样式: Basic star rating: 5 stars 4 stars ...
2014圣诞节一款纯css3实现的雪人动画特效
在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览源码下载实现的代码. html代码: <span cla ...
html汽车跑动特效,纯CSS3实现汽车行驶动画特效源码！
效果图各位朋友大家好! 今天给大家带来的是纯CSS3实现汽车行驶动画看完效果图以后是不是很炫酷! 想要文件版源码的,请加穷522323792 废话不多说,上源码 CSS: body{ marg ...
html飞机动画,基于纯CSS3纸飞机炫酷动画特效
简要教程 Flyaway.css是一款使用纯CSS3制作的炫酷纸飞机动画特效.Flyout模式可以应用于登录页面,信息发送成功,如果填的信息有误,可以使用Shake模式,代表信息输入有误. Flyaw ...
纯css3 夜晚天空月亮动画特效（源码公益站）
特效截图样式
纯CSS3绘制神奇宝贝伊布动画特效
在线演示本地下载
html加载特效大全,10种炫酷的CSS3 loading加载动画特效
这是一组效果非常炫酷的纯CSS3 loading加载动画特效.这组loading动画共10种不同的效果,全部使用animation帧动画制作而成.这些特效代码简洁,效果炫酷,非常值得学习借鉴. 制作方 ...
HTML荧光文字动态效果,CSS3荧光灯文字闪烁动画特效
这是一款纯CSS3荧光灯文字闪烁动画特效.该特效在HTML结构中将文字拆分为单个span元素,然后通过CSS3代码来制作荧光灯和闪烁特效. 使用方法 HTML结构 J Q u e r y CSS样式 ...
css元素发光效果图,纯CSS3实现圆圈动态发光特效动画的示例代码
本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码,分享给大家,具体如下: 效果图: 代码: 纯CSS3实现圆圈动态发光特效动画 body { background-color: #00000 ...

纯CSS3实现写轮眼进化动画特效，在别的素材网站要20积分哟，不过我在这里的就直接免费输出了

纯CSS3实现写轮眼进化动画特效

html

css

纯CSS3实现写轮眼进化动画特效，在别的素材网站要20积分哟，不过我在这里的就直接免费输出了相关推荐

最新文章

热门文章