!doctypehtml
htmllang="en"
head
!--网站编码格式，UTF-8国际编码，GBK或gb中文编码--
metacharset="UTF-8"
metaname="Keywords"content="关键词一，关键词二"
metaname="Description"content="网站描述内容"
titleDocument/title
style
body{
width:%;
height:%;
margin:0;
padding:0;
overflow:hidden;
background:#;
}
body.leftEye,
body.rightEye{
width:5vh;
height:5vh;
border-radius:50%;
background:#dfdfc2;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
-webkit-animation:leftEyeAnimation3sinfinitecubic-bezier(0.,0.03,0.,0.);
animation:leftEyeAnimation3sinfinitecubic-bezier(0.,0.03,0.,0.);
}
body.rightEye{
-webkit-animation:rightEyeAnimation3sinfinitecubic-bezier(0.,0.03,0.,0.);
animation:rightEyeAnimation3sinfinitecubic-bezier(0.,0.03,0.,0.);
}
body.mouth{
width:10vh;
height:10vh;
border-radius:50%;
border:solid1.3vh#dfdfc2;
border-right:solid1.3vhrgba(,,,0);
border-left:solid1.3vhrgba(,,,0);
border-bottom:solid1.3vhrgba(,,,0);
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%)rotate(deg);
transform:translate(-50%,-50%)rotate(deg);
-webkit-animation:mouthAnimation3sinfinitecubic-bezier(0.,0.03,0.,0.);
animation:mouthAnimation3sinfinitecubic-bezier(0.,0.03,0.,0.);
}
-webkit-keyframesmouthAnimation{0%{
-webkit-transform:translate(-50%,-50%)rotateX(deg);
transform:translate(-50%,-50%)rotateX(deg);
}
10%{
-webkit-transform:translate(-50%,-50%)rotateZ(deg);
transform:translate(-50%,-50%)rotateZ(deg);
}
40%{
-webkit-transform:translate(-50%,-50%)rotateZ(deg);
transform:translate(-50%,-50%)rotateZ(deg);
}
60%{
-webkit-transform:translate(-50%,-50%)rotateZ(deg);
transform:translate(-50%,-50%)rotateZ(deg);
}
%{
-webkit-transform:translate(-50%,-50%)rotateZ(deg);
transform:translate(-50%,-50%)rotateZ(deg);
}
}
keyframesmouthAnimation{0%{
-webkit-transform:translate(-50%,-50%)rotateX(deg);
transform:translate(-50%,-50%)rotateX(deg);
}
10%{
-webkit-transform:translate(-50%,-50%)rotateZ(deg);
transform:translate(-50%,-50%)rotateZ(deg);
}
40%{
-webkit-transform:translate(-50%,-50%)rotateZ(deg);
transform:translate(-50%,-50%)rotateZ(deg);
}
60%{
-webkit-transform:translate(-50%,-50%)rotateZ(deg);
transform:translate(-50%,-50%)rotateZ(deg);
}
%{
-webkit-transform:translate(-50%,-50%)rotateZ(deg);
transform:translate(-50%,-50%)rotateZ(deg);
}
}
-webkit-keyframesleftEyeAnimation{0%{
width:5vh;
height:5vh;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
50%{
width:5vh;
height:5vh;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
60%{
width:2vh;
height:2vh;
-webkit-transform:translate(-%,-50%);
transform:translate(-%,-50%);
}
90%{
width:2vh;
height:2vh;
-webkit-transform:translate(-%,-50%);
transform:translate(-%,-50%);
}
%{
width:5vh;
height:5vh;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
}
keyframesleftEyeAnimation{0%{
width:5vh;
height:5vh;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
50%{
width:5vh;
height:5vh;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
60%{
width:2vh;
height:2vh;
-webkit-transform:translate(-%,-50%);
transform:translate(-%,-50%);
}
90%{
width:2vh;
height:2vh;
-webkit-transform:translate(-%,-50%);
transform:translate(-%,-50%);
}
%{
width:5vh;
height:5vh;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
}
-webkit-keyframesrightEyeAnimation{0%{
width:5vh;
height:5vh;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
50%{
width:5vh;
height:5vh;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
60%{
width:2vh;
height:2vh;
-webkit-transform:translate(50%,-50%);
transform:translate(50%,-50%);
}
70%{
width:2vh;
height:2vh;
-webkit-transform:translate(50%,-50%);
transform:translate(50%,-50%);
}
75%{
width:2vh;
height:2px;
-webkit-transform:translate(50%,-50%);
transform:translate(50%,-50%);
}
80%{
width:2vh;
height:2vh;
-webkit-transform:translate(50%,-50%);
transform:translate(50%,-50%);
}
90%{
width:2vh;
height:2vh;
-webkit-transform:translate(50%,-50%);
transform:translate(50%,-50%);
}
%{
width:5vh;
height:5vh;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
}
keyframesrightEyeAnimation{0%{
width:5vh;
height:5vh;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
50%{
width:5vh;
height:5vh;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
60%{
width:2vh;
height:2vh;
-webkit-transform:translate(50%,-50%);
transform:translate(50%,-50%);
}
70%{
width:2vh;
height:2vh;
-webkit-transform:translate(50%,-50%);
transform:translate(50%,-50%);
}
75%{
width:2vh;
height:2px;
-webkit-transform:translate(50%,-50%);
transform:translate(50%,-50%);
}
80%{
width:2vh;
height:2vh;
-webkit-transform:translate(50%,-50%);
transform:translate(50%,-50%);
}
90%{
width:2vh;
height:2vh;
-webkit-transform:translate(50%,-50%);
transform:translate(50%,-50%);
}
%{
width:5vh;
height:5vh;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
}
/style
/head
body
divclass="leftEye"/div
divclass="rightEye"/div
divclass="mouth"/div
/body
/html
感谢·转发欢迎大家留言赞赏
人赞赏