背景图长这样子
因为中间的过渡动画没办法截出来,只能贴上变化的画面,强烈建议看看
因为全部代码太长,我分开贴出来
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="wrapper">
<img src="//cdn.files.qdfuns.com/article/content/picture/201806/12/212057px8onxoyxokyq88x.jpg" width="1350">
</div>
<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>
<!--轮回眼end-->
</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>
<!--轮回眼end-->
</div>
<!--右眼结束-->
</div>
</body>
</html>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
Css
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #000;
width: 1350px;
}
.wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.container {
width: 800px;
height: 200px;
margin: 200px auto;
/*background: #000000;*/
position: relative;
}
.eyesBoxs {
width: 130px;
height: 70px;
position: absolute;
top: 50px;
}
.pullLeft {
top: 60px;
left: 225px;
}
.pullRight {
top: 60px;
right: 10px;
}
.profile {
width: 130px;
height: 70px;
/*background: #fff;*/
position: absolute;
top: 0;
left: 0;
/*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 {
border-radius: 10px 180px 25px 50px;
transform: skew(20deg, 5deg);
-webkit-transform: skew(20deg, 1deg);
}
.skewRight {
border-radius: 0 100px 10px 140px;
transform: skew(-10deg, -1deg) scale(-1, 1);
-webkit-transform: skew(-10deg, 1deg) scale(-1, 1);
-o-transform: 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 20s ease-in infinite;
-webkit-animation: colour 20s ease-in infinite;
-o-animation: colour 20s ease-in infinite;
}
@keyframes colour {
0% {
background: #000;
}
35% {
background: #000;
}
40% {
background: #f00;
}
100% {
background: #f00;
}
}
@-webkit-keyframes colour {
0% {
background: #000;
}
35% {
background: #000;
}
40% {
background: #f00;
}
100% {
background: #f00;
}
}
@-o-keyframes colour {
0% {
background: #000;
}
35% {
background: #000;
}
40% {
background: #f00;
}
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: 0;
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);
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
}
.tube .bar:nth-child(2) {
bottom: 0;
right: -10px;
transform: rotate(105deg);
-webkit-transform: rotate(105deg);
-moz-transform: rotate(105deg);
}
.tube .bar:nth-child(3) {
bottom: -3px;
left: -10px;
transform: rotate(235deg);
-webkit-transform: rotate(235deg);
-moz-transform: rotate(235deg);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans {
width: 130px;
height: 70px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
border-radius: 0 50px 0 20px;
}
.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 20s ease-out infinite;
-webkit-animation: ani-narrow 20s ease-out infinite;
-o-animation: ani-narrow 20s ease-out infinite;
}
@keyframes ani-narrow {
0% {
opacity: 1;
transform: scale(1);
}
6% {
opacity: 1;
transform: scale(1);
}
8% {
opacity: 0;
transform: scale(0);
}
87% {
opacity: 0;
transform: scale(0);
}
90% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes ani-narrow {
0% {
opacity: 1;
-webkit-transform: scale(1);
}
5% {
opacity: 1;
-webkit-transform: scale(1);
}
8% {
opacity: 0;
-webkit-transform: scale(0);
}
87% {
opacity: 0;
-webkit-transform: scale(0);
}
90% {
opacity: 1;
-webkit-transform: scale(1);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
/*红色眼*/
.ani-zoom {
animation: ani-zoom 20s linear infinite;
-webkit-animation: ani-zoom 20s linear infinite;
-o-animation: ani-zoom 20s linear infinite;
}
@keyframes ani-zoom {
0% {
opacity: 0;
transform: scale(0);
}
6% {
opacity: 0;
transform: scale(0);
}
7% {
opacity: 1;
transform: scale(1);
}
60% {
opacity: 1;
transform: scale(1);
}
62% {
opacity: 0;
transform: scale(1.5);
}
100% {
opacity: 0;
transform: scale(0);
}
}
@-webkit-keyframes ani-zoom {
0% {
opacity: 0;
-webkit-transform: scale(0);
}
5% {
opacity: 0;
-webkit-transform: scale(0);
}
6% {
opacity: 1;
-webkit-transform: scale(1);
}
60% {
opacity: 1;
-webkit-transform: scale(1);
}
62% {
opacity: 0;
-webkit-transform: scale(1.5);
}
100% {
opacity: 0;
-webkit-transform: scale(0);
}
}
/*三勾玉*/
.ani-rotateHook {
animation: ani-rotateHook 20s ease-in infinite;
-webkit-animation: ani-rotateHook 20s ease-in infinite;
-o-animation: ani-rotateHook 20s ease-in infinite;
}
@keyframes ani-rotateHook {
0% {
opacity: 0;
transform: scale(0) rotate(0);
}
10% {
opacity: 0;
transform: scale(0) rotate(0);
}
13% {
opacity: 1;
transform: scale(1) rotate(-2600deg);
}
20% {
opacity: 1;
transform: scale(1) rotate(-2600deg);
}
35% {
opacity: 1;
transform: scale(1) rotate(-5000deg);
}
38% {
opacity: 0;
transform: scale(0.6) rotate(-6400deg);
}
100% {
opacity: 0;
transform: scale(0) rotate(0);
}
}
@-webkit-keyframes ani-rotateHook {
0% {
opacity: 0;
-webkit-transform: scale(0) rotate(0);
}
10% {
opacity: 0;
-webkit-transform: scale(0) rotate(0);
}
13% {
opacity: 1;
-webkit-transform: scale(1) rotate(-2600deg);
}
20% {
opacity: 1;
-webkit-transform: scale(1) rotate(-2600deg);
}
35% {
opacity: 1;
-webkit-transform: scale(1) rotate(-5000deg);
}
38% {
opacity: 0;
-webkit-transform: scale(0.6) rotate(-6400deg);
}
100% {
opacity: 0;
-webkit-transform: scale(0) rotate(0);
}
}
/*万花筒*/
.ani-rotateTube {
animation: ani-rotateTube 20s ease-in-out infinite;
-webkit-animation: ani-rotateTube 20s ease-in-out infinite;
-o-animation: ani-rotateTube 20s ease-in-out infinite;
}
@keyframes ani-rotateTube {
0% {
opacity: 0;
transform: scale(0) rotate(0);
}
35% {
opacity: 0;
transform: scale(0) rotate(0);
}
45% {
opacity: 1;
transform: scale(1) rotate(-1360deg);
}
58% {
opacity: 1;
transform: scale(1) rotate(-1360deg);
}
64% {
opacity: 0;
transform: scale(0) rotate(1360deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(-1360deg);
}
}
@-webkit-keyframes ani-rotateTube {
0% {
opacity: 0;
-webkit-transform: scale(0) rotate(0);
}
35% {
opacity: 0;
-webkit-transform: scale(0) rotate(0);
}
45% {
opacity: 1;
-webkit-transform: scale(1) rotate(-1360deg);
}
58% {
opacity: 1;
-webkit-transform: scale(1) rotate(-1360deg);
}
64% {
opacity: 0;
-webkit-transform: scale(0) rotate(1360deg);
}
100% {
opacity: 1;
-webkit-transform: scale(1) rotate(-1360deg);
}
}
/*轮回眼*/
.ani-shadow {
animation: ani-shadow 20s linear infinite;
-webkit-animation: ani-shadow 20s linear infinite;
-o-animation: ani-shadow 20s linear infinite;
}
@keyframes ani-shadow {
0% {
opacity: 0;
box-shadow: none;
}
58% {
opacity: 0;
box-shadow: none;
}
64% {
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;
}
87% {
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;
}
90% {
opacity: 0;
box-shadow: none;
}
100% {
opacity: 0;
box-shadow: none;
}
}
@-webkit-keyframes ani-shadow {
0% {
opacity: 0;
box-shadow: none;
}
58% {
opacity: 0;
box-shadow: none;
}
64% {
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;
}
87% {
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;
}
90% {
opacity: 0;
box-shadow: none;
}
100% {
opacity: 0;
box-shadow: none;
}
}
.ani-narrow,
.ani-rotateHook,
.ani-rotateTube,
.ani-shadow,
.ani-zoom,
.eyes .line:after {
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
-o-animation-fill-mode: both;
}
</style>
网友评论