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

认真你就输了丶
认真你就输了丶 发布于 2017-01-09 23:01:28 浏览:2934 类型:原创 - 随笔 分类: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
给个赞 49 人点赞
收藏 37 人收藏
评论 已有 15 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
506075813
5060758134 天前14F
6到不行,我刚开始学的时候就想着用CSS做一个写轮眼的。但是动手能力不足。今天逛逛,居然发现有人和你有一样想法,并且还实现了你的想法,你知道这是什么感觉吗!?太棒了!写轮眼出现的那一刻,我当时就大叫了“下令干”!
举报 支持 (1) 回复 (0)
最新评论
ablikim915
ablikim9153 天前15F
不错啊 我也试试
举报 支持 (0) 回复 (0)
506075813
5060758134 天前14F
6到不行,我刚开始学的时候就想着用CSS做一个写轮眼的。但是动手能力不足。今天逛逛,居然发现有人和你有一样想法,并且还实现了你的想法,你知道这是什么感觉吗!?太棒了!写轮眼出现的那一刻,我当时就大叫了“下令干”!
举报 支持 (1) 回复 (0)
dyyzht
dyyzht5 天前13F
好逼真啊,好逼真!!!
举报 支持 (0) 回复 (0)
159211788
1592117886 天前12F
都好牛逼
举报 支持 (0) 回复 (0)
单先生
单先生6 天前11F
痛里呀给痛
举报 支持 (0) 回复 (0)
晓晓的麦兜兜
晓晓的麦兜兜6 天前10F
来个万花筒
举报 支持 (0) 回复 (0)
jinjidexiaowen
jinjidexiaowen7 天前9F
我身上一团黑色的火焰在燃烧
举报 支持 (0) 回复 (0)
认真你就输了丶
emoticon //@xiaolongyuanzi:看的我背后一凉emoticon
举报 支持 (0) 回复 (0)
xiaolongyuanzi
xiaolongyuanzi7 天前7F
看的我背后一凉emoticon
举报 支持 (0) 回复 (1)
认真你就输了丶
emoticon //@探花:阁下的幻术,果然厉害
举报 支持 (0) 回复 (0)
探花
探花7 天前5F
阁下的幻术,果然厉害
举报 支持 (0) 回复 (1)
蓝波乃
蓝波乃7 天前4F
轮回眼颜色偏蓝点会比较好,这个看着有点黑白!!!总之挺赞的,收藏了。
举报 支持 (0) 回复 (0)
认真你就输了丶
emoticon //@天凉好个秋:这不是我大鼬神的写轮眼么
举报 支持 (0) 回复 (0)
天凉好个秋
天凉好个秋7 天前2F
这不是我大鼬神的写轮眼么
举报 支持 (0) 回复 (1)
jenn89
jenn892017-01-09 23:18:551F
吓死宝宝了
举报 支持 (0) 回复 (0)
认真你就输了丶 认真你就输了丶 作者

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

作者最新