如果你觉得我的代码还算有趣，在你的学习中能有所帮助，请查看我的置顶文章，我由衷感谢！
前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获。
效果图：
小眼睛一左一右固定在屏幕上，可调整屏幕宽度以控制二者间距。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS3实现眨眼动画DEMO演示</title>
</head>
<style> @charset "utf-8"; *{ margin:0;padding:0;} .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 6s; -webkit-animation:colour 0.5s ease-in 6s; -o-animation:colour 0.5s ease-in 6s; } @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 1.5s; -webkit-animation:ani-rotateHook 5s ease-in 1.5s; -o-animation:ani-rotateHook 5s ease-in 1.5s; } @keyframes ani-rotateHook{ 0%{ opacity:0; transform:scale(0) rotate(0); } 90%{ opacity:1; transform:scale(1) rotate(-3240deg); } 100%{ opacity:0; transform:scale(1.4) rotate(-540deg); } } @-webkit-keyframes ani-rotateHook{ 0%{ opacity:0; -webkit-transform:scale(0) rotate(0); } 90%{ opacity:1; -webkit-transform:scale(1) rotate(-3240deg); } 100%{ opacity:0; -webkit-transform:scale(1.4) rotate(-540deg); } } @-o-keyframes ani-rotateHook{ 0%{ opacity:0; -o-transform:scale(0) rotate(0); } 90%{ opacity:1; -o-transform:scale(1) rotate(-3240deg); } 100%{ opacity:0; -o-transform:scale(1.4) rotate(-540deg); } } .ani-rotateTube{ animation:ani-rotateTube 5s ease-in-out 5.5s; -webkit-animation:ani-rotateTube 5s ease-in-out 5.5s; -o-animation:ani-rotateTube 5s ease-in-out 5.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 forwards 10s; -webkit-animation:ani-shadow 1s forwards 10s; -o-animation:ani-shadow 1s forwards 10s; } @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; } </style>
<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>
代码开源，但需要有一定JS语言基础方可阅读。我明白“ 授人以鱼不如授人以渔 ”的道理，所以代码中常常只留下自定义注释，方便大家修改，但不能凭此参透其中的奥妙，我并没有藏拙，好学的人自然会想办法寻找答案，自学也是人生的一门必修课。
推荐阅读以下内容：
Canvas悟空推箱子
Canvas线条动画
CSS旋转魔方
JS迷你键盘
CSS逼真小象
我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan
