CSS3写轮眼。。。(超逼真)

认真你就输了丶
认真你就输了丶 发布于 2017-01-09 23:01:28 浏览:3697 类型:原创 - 随笔 分类:HTML/CSS - css 二维码: 作者原创 版权保护
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS3实现眨眼</title>
<style>

*{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));
}
.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));
}
.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);
    animation:colour 0.5s ease-in 7s;
    -webkit-animation:colour 0.5s ease-in 7s;
}
@keyframes colour{
    0%{
        background:#000;
    }
    100%{
        background:#f00;
    }
}
@-webkit-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);
}
.hook .bar:nth-child(1){
    transform:rotate(10deg);
    -webkit-transform:rotate(10deg);
}
.hook .bar:nth-child(2){
    transform:rotate(130deg);
    -webkit-transform:rotate(130deg);
}
.hook .bar:nth-child(3){
    transform:rotate(250deg);
    -webkit-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);
}
.tube .bar:nth-child(3){
    bottom:-3px;
    left:-10px;
    transform:rotate(235deg);
    -webkit-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;
}
@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);
    }
}
.ani-zoom{              /*红色眼*/
    animation:ani-zoom 11s linear 0.8s;
    -webkit-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);
    }
}
.ani-rotateHook{            /*三勾玉*/
    animation:ani-rotateHook 5s ease-in 2.5s;
    -webkit-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);
    }
}
.ani-rotateTube{            /*万花筒*/
    animation:ani-rotateTube 5s ease-in-out 6.5s;
    -webkit-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);
    }
}
.ani-shadow{            /*轮回眼*/
    animation:ani-shadow 1s linear 11s;
    -webkit-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;
    }
}
/* 规定动画在播放之前或之后,其动画效果是否可见。 */
.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;
}

</style>
</head>
<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>
</body>
</html>
标签:
z
给个赞 50 人点赞
收藏 40 人收藏
评论 已有 15 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
506075813
5060758132017-01-13 13:35:1914F
6到不行,我刚开始学的时候就想着用CSS做一个写轮眼的。但是动手能力不足。今天逛逛,居然发现有人和你有一样想法,并且还实现了你的想法,你知道这是什么感觉吗!?太棒了!写轮眼出现的那一刻,我当时就大叫了“下令干”!
举报 支持 (1) 回复 (0)
最新评论
ablikim915
ablikim9152017-01-14 14:47:0215F
不错啊 我也试试
举报 支持 (0) 回复 (0)
506075813
5060758132017-01-13 13:35:1914F
6到不行,我刚开始学的时候就想着用CSS做一个写轮眼的。但是动手能力不足。今天逛逛,居然发现有人和你有一样想法,并且还实现了你的想法,你知道这是什么感觉吗!?太棒了!写轮眼出现的那一刻,我当时就大叫了“下令干”!
举报 支持 (1) 回复 (0)
dyyzht
dyyzht2017-01-12 15:20:4613F
好逼真啊,好逼真!!!
举报 支持 (0) 回复 (0)
159211788
1592117882017-01-11 16:16:2112F
都好牛逼
举报 支持 (0) 回复 (0)
单先生
单先生2017-01-11 12:00:4511F
痛里呀给痛
举报 支持 (0) 回复 (0)
晓晓的麦兜兜
晓晓的麦兜兜2017-01-11 09:46:1510F
来个万花筒
举报 支持 (0) 回复 (0)
jinjidexiaowen
jinjidexiaowen2017-01-10 19:36:429F
我身上一团黑色的火焰在燃烧
举报 支持 (0) 回复 (0)
认真你就输了丶
认真你就输了丶2017-01-10 15:18:518F
emoticon //@xiaolongyuanzi:看的我背后一凉emoticon
举报 支持 (0) 回复 (0)
xiaolongyuanzi
xiaolongyuanzi2017-01-10 15:18:047F
看的我背后一凉emoticon
举报 支持 (0) 回复 (1)
认真你就输了丶
认真你就输了丶2017-01-10 09:28:486F
emoticon //@探花:阁下的幻术,果然厉害
举报 支持 (0) 回复 (0)
探花
探花2017-01-10 09:24:275F
阁下的幻术,果然厉害
举报 支持 (0) 回复 (1)
蓝波乃
蓝波乃2017-01-10 09:14:164F
轮回眼颜色偏蓝点会比较好,这个看着有点黑白!!!总之挺赞的,收藏了。
举报 支持 (0) 回复 (0)
认真你就输了丶
认真你就输了丶2017-01-10 08:38:373F
emoticon //@天凉好个秋:这不是我大鼬神的写轮眼么
举报 支持 (0) 回复 (0)
天凉好个秋
天凉好个秋2017-01-10 08:34:312F
这不是我大鼬神的写轮眼么
举报 支持 (0) 回复 (1)
jenn89
jenn892017-01-09 23:18:551F
吓死宝宝了
举报 支持 (0) 回复 (0)
认真你就输了丶 认真你就输了丶 作者

涸辙遗鲋,旦暮成枯;人而无志,与彼何殊.

作者最新