以下是 纯CSS3实现卡通小黄人头像特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>纯CSS3实现卡通小黄人头像特效</title>
<style>
*{
padding: 0;
margin: 0;
list-style-type: none;
}
h3{
text-align: center;
margin-top: 10px;
}
h4{
text-align: center;
}
#canvas{
width: 500px;
height: 600px;
border: 1px solid #ddd;
margin: 10px auto;
position: relative;
background: #f9f9f9;
overflow: hidden;
}
.body{
width: 282px;
height: 485px;
border-radius:137px;
border: 5px solid #000;
position: absolute;
top: 5%;
left: 50%;
margin-left: -150px;
overflow: hidden;
background: #ffdd40;
z-index: 2;
}
.niuzaiku_b{
width: 100%;
height: 125px;
background: #2074a0;
border-top: 5px solid #000;
position: absolute;
bottom: 0;
overflow: hidden;
}
.niuzaiku_m{
width: 200px;
height: 70px;
border: 5px solid #000;
border-bottom: 0 none;
background: #2074a0;
position: absolute;
left: 50%;
margin-left: -105px;
bottom: 125px;
}
.niuzaiku_t{
width: 96px;
height: 18px;
border: 5px solid #000;
background: #2074a0;
position: absolute;
top: 46%;
}
.niuzaiku_l{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: left;
-moz-transform-origin: left;
-ms-transform-origin: left;
-o-transform-origin: left;
transform-origin: left;
left: -10px;
border-left: 0 none;
}
.niuzaiku_r{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: right;
-moz-transform-origin: right;
-ms-transform-origin: right;
-o-transform-origin: right;
transform-origin: right;
right: -10px;
border-right: 0 none;
}
.kou_l,.kou_r{
width: 0px;
height: 0px;
background: #000;
line-height: 18px;
border: 5px solid #000;
border-radius: 50%;
}
.kou_l{
position: absolute;
top: 4px;
right: 5px;
}
.kou_r{
position: absolute;
top: 4px;
left: 5px;
}
.koudai{
width: 45%;
height: 56px;
border: 5px solid #000;
margin: 45px auto;
border-radius: 0 0 30px 30px;
}
.kuxian{
height: 54px;
width: 0px;
border: 3px solid #000;
left: 50%;
margin-left: -3px;
position: absolute;
bottom: 0;
border-radius: 30px 30px 0 0;
}
.dou_l,.dou_r{
width: 46px;
height: 55px;
border: 5px solid #2074a0;
border-bottom: 5px solid #000;
border-radius: 50%;
position: absolute;
}
.dou_l{
left: -17px;
top: -16px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-right: 5px solid #000;
}
.dou_r{
right: -17px;
top: -16px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
border-left: 5px solid #000;
}
.eye{
width: 224px;
height: 112px;
margin: 70px auto;
display: flex;
flex-flow: row;
}
.eyes{
width: 50%;
height: 100%;
border: 6px solid #000;
box-sizing: border-box;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
@-webkit-keyframes zhuzi{
0%{-webkit-transform: translate(0,0) rotate(0deg)}
10%{-webkit-transform: translate(-20px,0) rotate(0deg)}
20%{-webkit-transform: translate(-20px,0) rotate(0deg)}
30%{-webkit-transform: translate(0,0) rotate(0deg)}
50%{-webkit-transform: translate(0,0) rotate(0deg)}
60%{-webkit-transform: translate(20px,0) rotate(14deg)}
70%{-webkit-transform: translate(20px,0) rotate(14deg)}
80%{-webkit-transform: translate(0,0) rotate(0deg)}
}
@-moz-keyframes zhuzi{
0%{-moz-transform: translate(0,0) rotate(0deg)}
10%{-moz-transform: translate(-20px,0) rotate(0deg)}
20%{-moz-transform: translate(-20px,0) rotate(0deg)}
30%{-moz-transform: translate(0,0) rotate(0deg)}
50%{-moz-transform: translate(0,0) rotate(0deg)}
60%{-moz-transform: translate(20px,0) rotate(14deg)}
70%{-moz-transform: translate(20px,0) rotate(14deg)}
80%{-moz-transform: translate(0,0) rotate(0deg)}
}
@-ms-keyframes zhuzi{
0%{-ms-transform: translate(0,0) rotate(0deg)}
10%{-ms-transform: translate(-20px,0) rotate(0deg)}
20%{-ms-transform: translate(-20px,0) rotate(0deg)}
30%{-ms-transform: translate(0,0) rotate(0deg)}
50%{-ms-transform: translate(0,0) rotate(0deg)}
60%{-ms-transform: translate(20px,0) rotate(14deg)}
70%{-ms-transform: translate(20px,0) rotate(14deg)}
80%{-ms-transform: translate(0,0) rotate(0deg)}
}
@-o-keyframes zhuzi{
0%{-o-transform: translate(0,0) rotate(0deg)}
10%{-o-transform: translate(-20px,0) rotate(0deg)}
20%{-o-transform: translate(-20px,0) rotate(0deg)}
30%{-o-transform: translate(0,0) rotate(0deg)}
50%{-o-transform: translate(0,0) rotate(0deg)}
60%{-o-transform: translate(20px,0) rotate(14deg)}
70%{-o-transform: translate(20px,0) rotate(14deg)}
80%{-o-transform: translate(0,0) rotate(0deg)}
}
@keyframes zhuzi{
0%{transform: translate(0,0) rotate(0deg)}
10%{transform: translate(-20px,0) rotate(0deg)}
20%{transform: translate(-20px,0) rotate(0deg)}
30%{transform: translate(0,0) rotate(0deg)}
50%{transform: translate(0,0) rotate(0deg)}
60%{transform: translate(20px,0) rotate(14deg)}
70%{transform: translate(20px,0) rotate(14deg)}
80%{transform: translate(0,0) rotate(0deg)}
}
.zhuzi{
background: #000;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
-webkit-transform: translate(0,0) rotate(0deg);
-moz-transform: translate(0,0) rotate(0deg);
-ms-transform: translate(0,0) rotate(0deg);
-o-transform: translate(0,0) rotate(0deg);
transform: translate(0,0) rotate(0deg);
-webkit-animation: zhuzi 5s linear infinite;
-moz-animation: zhuzi 5s linear infinite;
-ms-animation: zhuzi 5s linear infinite;
-o-animation: zhuzi 5s linear infinite;
animation: zhuzi 5s linear infinite;
}
@-webkit-keyframes gaoguang{
0%{-webkit-transform: translate(10px,-4px)}
10%{-webkit-transform: translate(-8px,0)}
20%{-webkit-transform: translate(-8px,0)}
30%{-webkit-transform: translate(10px,-4px)}
50%{-webkit-transform: translate(10px,-4px)}
60%{-webkit-transform: translate(10px,-4px)}
70%{-webkit-transform: translate(10px,-4px)}
80%{-webkit-transform: translate(10px,-4px)}
}
@-moz-keyframes gaoguang{
0%{-moz-transform: translate(10px,-4px)}
10%{-moz-transform: translate(-8px,0)}
20%{-moz-transform: translate(-8px,0)}
30%{-moz-transform: translate(10px,-4px)}
50%{-moz-transform: translate(10px,-4px)}
60%{-moz-transform: translate(10px,-4px)}
70%{-moz-transform: translate(10px,-4px)}
80%{-moz-transform: translate(10px,-4px)}
}
@-ms-keyframes gaoguang{
0%{-ms-transform: translate(10px,-4px)}
10%{-ms-transform: translate(-8px,0)}
20%{-ms-transform: translate(-8px,0)}
30%{-ms-transform: translate(10px,-4px)}
50%{-ms-transform: translate(10px,-4px)}
60%{-ms-transform: translate(10px,-4px)}
70%{-ms-transform: translate(10px,-4px)}
80%{-ms-transform: translate(10px,-4px)}
}
@-o-keyframes gaoguang{
0%{-o-transform: translate(10px,-4px)}
10%{-o-transform: translate(-8px,0)}
20%{-o-transform: translate(-8px,0)}
30%{-o-transform: translate(10px,-4px)}
50%{-o-transform: translate(10px,-4px)}
60%{-o-transform: translate(10px,-4px)}
70%{-o-transform: translate(10px,-4px)}
80%{-o-transform: translate(10px,-4px)}
}
@keyframes gaoguang{
0%{transform: translate(10px,-4px)}
10%{transform: translate(-8px,0)}
20%{transform: translate(-8px,0)}
30%{transform: translate(10px,-4px)}
50%{transform: translate(10px,-4px)}
60%{transform: translate(10px,-4px)}
70%{transform: translate(10px,-4px)}
80%{transform: translate(10px,-4px)}
}
.gaoguang{
width: 22px;
height: 22px;
background: #fff;
border-radius: 50%;
-webkit-transform: translate(10px,-4px);
-moz-transform: translate(10px,-4px);
-ms-transform: translate(10px,-4px);
-o-transform: translate(10px,-4px);
transform: translate(10px,-4px);
-webkit-animation: gaoguang 5s linear infinite;
-moz-animation: gaoguang 5s linear infinite;
-ms-animation: gaoguang 5s linear infinite;
-o-animation: gaoguang 5s linear infinite;
animation: gaoguang 5s linear infinite;
}
.dai_l,.dai_r{
width: 36px;
height: 18px;
background: #000;
position: absolute;
top: 120px;
}
.dai_l{
left: -2px;
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-ms-transform: rotate(8deg);
-o-transform: rotate(8deg);
transform: rotate(8deg);
}
.dai_r{
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
transform: rotate(-8deg);
right: -2px;
}
@-webkit-keyframes mouse{
0%{ -webkit-transform:rotate(-35deg) scale(1.1,1.1);border-radius: 0 0 0 30px;}
15%{-webkit-transform: rotate(-35deg) scale(.9,.9); border-radius: 0 0 0 50px;}
30%{-webkit-transform:rotate(-35deg) scale(1.1,1.1);border-radius: 0 0 0 30px;}
100%{-webkit-transform: rotate(-35deg) scale(1.1,1.1);border-radius: 0 0 0 30px;}
}
@-moz-keyframes mouse{
0%{ -moz-transform:rotate(-35deg) scale(1.1,1.1);border-radius: 0 0 0 30px;}
15%{-moz-transform: rotate(-35deg) scale(.9,.9); border-radius: 0 0 0 50px;}
30%{-moz-transform:rotate(-35deg) scale(1.1,1.1);border-radius: 0 0 0 30px;}
100%{-moz-transform: rotate(-35deg) scale(1.1,1.1);border-radius: 0 0 0 30px;}
}
@-ms-keyframes mouse{
0%{ -ms-transform:rotate(-35deg) scale(1.1,1.1);border-radius: 0 0 0 30px;}
15%{-ms-transform: rotate(-35deg) scale(.9,.9); border-radius: 0 0 0 50px;}
30%{-ms-transform:rotate(-35deg) scale(1.1,1.1);border-radius: 0 0 0 30px;}
100%{-ms-transform: rotate(-35deg) scale(1.1,1.1);border-radius: 0 0 0 30px;}
}
@-o-keyframes mouse{
0%{ -o-transform:rotate(-35deg) scale(1.1,1.1);border-radius: 0 0 0 30px;}
15%{-o-transform: rotate(-35deg) scale(.9,.9); border-radius: 0 0 0 50px;}
30%{-o-transform:rotate(-35deg) scale(1.1,1.1);border-radius: 0 0 0 30px;}
100%{-o-transform: rotate(-35deg) scale(1.1,1.1);border-radius: 0 0 0 30px;}
}
@keyframes mouse{
0%{ transform:rotate(-35deg) scale(1.1,1.1);border-radius: 0 0 0 30px;}
15%{transform: rotate(-35deg) scale(.9,.9); border-radius: 0 0 0 50px;}
30%{transform:rotate(-35deg) scale(1.1,1.1);border-radius: 0 0 0 30px;}
100%{transform: rotate(-35deg) scale(1.1,1.1);border-radius: 0 0 0 30px;}
}
.mouse{
width: 56px;
height: 44px;
border: 5px solid #000;
margin: 0 auto;
margin-top: -50px;
border-radius: 0 0 0 30px;
border-top:0 none;
border-right:0 none;
background: #fff;
margin-left: 113px;
position: relative;
overflow: hidden;
-webkit-transform: rotate(-35deg) scale(1.1,1.1);
-moz-transform: rotate(-35deg) scale(1.1,1.1);
-ms-transform: rotate(-35deg) scale(1.1,1.1);
-o-transform: rotate(-35deg) scale(1.1,1.1);
transform: rotate(-35deg) scale(1.1,1.1);
-webkit-animation: mouse 4s linear 1s infinite;
-moz-animation: mouse 4s linear 1s infinite;
-ms-animation: mouse 4s linear 1s infinite;
-o-animation: mouse 4s linear 1s infinite;
animation: mouse 4s linear 1s infinite;
}
.mouse_top{
background:#ffdd40 ;
border-bottom: 5px solid #000;
width: 78px;
height: 39px;
position: absolute;
top: -15px;
right: -19px;
-webkit-transform: rotate(33deg);
-moz-transform: rotate(33deg);
-ms-transform: rotate(33deg);
-o-transform: rotate(33deg);
transform: rotate(33deg);
}
@-webkit-keyframes foot_l{
0%{-webkit-transform: rotate(0deg)}
30%{-webkit-transform: rotate(6deg)}
60%{-webkit-transform: rotate(0deg)}
100%{-webkit-transform: rotate(0deg)}
}
@-moz-keyframes foot_l{
0%{-moz-transform: rotate(0deg)}
30%{-moz-transform: rotate(6deg)}
60%{-moz-transform: rotate(0deg)}
100%{-moz-transform: rotate(0deg)}
}
@-ms-keyframes foot_l{
0%{-ms-transform: rotate(0deg)}
30%{-ms-transform: rotate(6deg)}
60%{-ms-transform: rotate(0deg)}
100%{-ms-transform: rotate(0deg)}
}
@-o-keyframes foot_l{
0%{-o-transform: rotate(0deg)}
30%{-o-transform: rotate(6deg)}
60%{-o-transform: rotate(0deg)}
100%{-o-transform: rotate(0deg)}
}
@keyframes foot_l{
0%{transform: rotate(0deg)}
30%{transform: rotate(6deg)}
60%{transform: rotate(0deg)}
100%{transform: rotate(0deg)}
}
.foot_l{
width: 80px;
height: 80px;
position: absolute;
top: 500px;
left: 163px;
-webkit-transform-origin: right top;
-moz-transform-origin: right top;
-ms-transform-origin: right top;
-o-transform-origin: right top;
transform-origin: right top;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation: foot_l 1s linear infinite ;
-moz-animation: foot_l 1s linear infinite ;
-ms-animation: foot_l 1s linear infinite ;
-o-animation: foot_l 1s linear infinite ;
animation: foot_l 1s linear infinite ;
}
.l_l{
position: absolute;
width: 40px;
height: 100%;
background: #000;
right: 0;
border-radius: 0 0 8px 0;
}
.f_l{
width: 100%;
height: 50%;
position: absolute;
bottom: 0;
background: #000;
border-radius: 30px 0 8px 15px;
z-index: 1;
}
@-webkit-keyframes foot_r{
0%{-webkit-transform: rotate(0deg)}
30%{-webkit-transform: rotate(-6deg)}
60%{-webkit-transform: rotate(0deg)}
100%{-webkit-transform: rotate(0deg)}
}
@-moz-keyframes foot_r{
0%{-moz-transform: rotate(0deg)}
30%{-moz-transform: rotate(-6deg)}
60%{-moz-transform: rotate(0deg)}
100%{-moz-transform: rotate(0deg)}
}
@-ms-keyframes foot_r{
0%{-ms-transform: rotate(0deg)}
30%{-ms-transform: rotate(-6deg)}
60%{-ms-transform: rotate(0deg)}
100%{-ms-transform: rotate(0deg)}
}
@-o-keyframes foot_r{
0%{-o-transform: rotate(0deg)}
30%{-o-transform: rotate(-6deg)}
60%{-o-transform: rotate(0deg)}
100%{-o-transform: rotate(0deg)}
}
@keyframes foot_r{
0%{transform: rotate(0deg)}
30%{transform: rotate(-6deg)}
60%{transform: rotate(0deg)}
100%{transform: rotate(0deg)}
}
.foot_r{
width: 80px;
height: 80px;
position: absolute;
top: 500px;
left: 249px;
z-index: 1;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation: foot_r 1s linear .5s infinite ;
-moz-animation: foot_r 1s linear .5s infinite ;
-ms-animation: foot_r 1s linear .5s infinite ;
-o-animation: foot_r 1s linear .5s infinite ;
animation: foot_r 1s linear .5s infinite ;
}
.l_r{
position: absolute;
width: 40px;
height: 100%;
background: #000;
left: 0;
border-radius: 0 0 0 8px ;
}
.f_r{
width: 100%;
height: 50%;
position: absolute;
bottom: 0;
background: #000;
border-radius: 0 30px 15px 8px;
}
.h_l,.h_r{
width: 60px;
height: 60px;
background:#ffdd40 ;
border: 5px solid #000000;
position: absolute;
}
@-webkit-keyframes h_l{
from{-webkit-transform: rotate(42deg);}
to{-webkit-transform: rotate(38deg);}
}
@-moz-keyframes h_l{
from{-moz-transform: rotate(42deg);}
to{-moz-transform: rotate(38deg);}
}
@-ms-keyframes h_l{
from{-ms-transform: rotate(42deg);}
to{-ms-transform: rotate(38deg);}
}
@-o-keyframes h_l{
from{-o-transform: rotate(42deg);}
to{-o-transform: rotate(38deg);}
}
@keyframes h_l{
from{transform: rotate(42deg);}
to{transform: rotate(38deg);}
}
.h_l{
border-radius: 0 0 0 25px ;
top: 347px;
left: 86px;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(42deg);
-moz-transform: rotate(42deg);
-ms-transform: rotate(42deg);
-o-transform: rotate(42deg);
transform: rotate(42deg);
-webkit-animation:h_l .5s linear infinite alternate ;
-moz-animation:h_l .5s linear infinite alternate ;
-ms-animation:h_l .5s linear infinite alternate ;
-o-animation:h_l .5s linear infinite alternate ;
animation:h_l .5s linear infinite alternate ;
}
@-webkit-keyframes h_r{
from{-webkit-transform: rotate(-42deg);}
to{-webkit-transform: rotate(-38deg);}
}
@-moz-keyframes h_r{
from{-moz-transform: rotate(-42deg);}
to{-moz-transform: rotate(-38deg);}
}
@-ms-keyframes h_r{
from{-ms-transform: rotate(-42deg);}
to{-ms-transform: rotate(-38deg);}
}
@-o-keyframes h_r{
from{-o-transform: rotate(-42deg);}
to{-o-transform: rotate(-38deg);}
}
@keyframes h_r{
from{transform: rotate(-42deg);}
to{transform: rotate(-38deg);}
}
.h_r{
border-radius: 0 0 25px 0;
top: 302px;
right: 108px;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(-42deg);
-moz-transform: rotate(-42deg);
-ms-transform: rotate(-42deg);
-o-transform: rotate(-42deg);
transform: rotate(-42deg);
-webkit-animation:h_r .5s linear .3s infinite alternate ;
-moz-animation:h_r .5s linear .3s infinite alternate ;
-ms-animation:h_r .5s linear .3s infinite alternate ;
-o-animation:h_r .5s linear .3s infinite alternate ;
animation:h_r .5s linear .3s infinite alternate ;
}
.l_xian_l{
width: 0;
height: 50%;
border: 3px solid #000000;
border-radius: 30px;
margin-left: 37%;
}
.l_xian_r{
width: 0;
height: 50%;
border: 3px solid #000000;
border-radius: 30px;
margin-left: 55%;
}
.yinying{
background: #ccc;
width: 250px;
height: 15px;
border-radius: 50%;
margin: 573px auto;
box-shadow: 0 0 5px #ccc;
}
@-webkit-keyframes mao{
from{-webkit-transform: rotate(5deg);}
to{-webkit-transform: rotate(2deg);}
}
@-moz-keyframes mao{
from{-moz-transform: rotate(5deg);}
to{-moz-transform: rotate(2deg);}
}
@-ms-keyframes mao{
from{-ms-transform: rotate(5deg);}
to{-ms-transform: rotate(2deg);}
}
@-o-keyframes mao{
from{-o-transform: rotate(5deg);}
to{-o-transform: rotate(2deg);}
}
@keyframes mao{
from{transform: rotate(5deg);}
to{transform: rotate(2deg);}
}
.mao{
width: 113px;
height: 80px;
border-right: 8px solid #000000;
border-top: 8px solid #000000;
border-radius: 50%;
position: absolute;
top: 10px;
left: 128px;
-webkit-transform-origin: right top;
-moz-transform-origin: right top;
-ms-transform-origin: right top;
-o-transform-origin: right top;
transform-origin: right top;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
-webkit-animation: mao 1s ease infinite alternate;
-moz-animation: mao 1s ease infinite alternate;
-ms-animation: mao 1s ease infinite alternate;
-o-animation: mao 1s ease infinite alternate;
animation: mao 1s ease infinite alternate;
}
.xiaomao{
width: 80px;
height: 50px;
border-top:6px solid #000 ;
border-radius: 50%;
position: absolute;
top: 20px;
left: 165px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}
@-webkit-keyframes tall{
0%{opacity: 0;}
10%{opacity: 1;}
60%{opacity: 1;}
70%{opacity: 0;}
100%{opacity: 0;}
}
@-moz-keyframes tall{
0%{opacity: 0;}
10%{opacity: 1;}
60%{opacity: 1;}
70%{opacity: 0;}
100%{opacity: 0;}
}
@-ms-keyframes tall{
0%{opacity: 0;}
10%{opacity: 1;}
60%{opacity: 1;}
70%{opacity: 0;}
100%{opacity: 0;}
}
@-o-keyframes tall{
0%{opacity: 0;}
10%{opacity: 1;}
60%{opacity: 1;}
70%{opacity: 0;}
100%{opacity: 0;}
}
@keyframes tall{
0%{opacity: 0;}
10%{opacity: 1;}
60%{opacity: 1;}
70%{opacity: 0;}
100%{opacity: 0;}
}
.tall{
width: 60px;
height: 200px;
position: absolute;
right: 25px;
top: 30px;
opacity: 0;
-webkit-animation: tall 10s infinite linear;
-moz-animation: tall 10s infinite linear;
-ms-animation: tall 10s infinite linear;
-o-animation: tall 10s infinite linear;
animation: tall 10s infinite linear;
}
.jiao{
border: 2px solid deepskyblue;
border-right: 0 none;
border-top: 0 none;
background: #fff;
position: absolute;
right: 43px;
top: 170px;
width: 10px;
height: 10px;
-webkit-transform: skew(-35deg);
-moz-transform: skew(-35deg);
-ms-transform: skew(-35deg);
-o-transform: skew(-35deg);
transform: skew(-35deg);
}
.t_b{
width: 100%;
height: 100%;
border-radius: 51%;
border: 2px solid deepskyblue;
background: #fff;
font-size: 30px;
color: #333;
text-align: center;
line-height: 30px;
padding-top: 47px;
padding-left: 3px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h3>纯CSS编写小黄人，詹小宇制作</h3>
<div id="canvas">
<div class="tall">
<div class="t_b">Hi,<br />I`m<br /> Bob.</div>
<div class="jiao"></div>
</div>
<div class="mao"></div>
<div class="xiaomao"></div>
<div class="body">
<div class="niuzaiku_b">
<div class="dou_l"></div>
<div class="dou_r"></div>
<div class="kuxian"></div>
</div>
<div class="niuzaiku_m">
<div class="koudai"></div>
</div>
<div class="niuzaiku_t niuzaiku_l">
<div class="kou_l"></div>
</div>
<div class="niuzaiku_t niuzaiku_r">
<div class="kou_r"></div>
</div>
<div class="dai_l"></div>
<div class="dai_r"></div>
<div class="eye">
<div class="eyes">
<div class="zhuzi">
<div class="gaoguang"></div>
</div>
</div>
<div class="eyes">
<div class="zhuzi">
<div class="gaoguang"></div>
</div>
</div>
</div>
<div class="mouse">
<div class="mouse_top"></div>
</div>
</div>
<div class="foot_l">
<div class="l_l"></div>
<div class="f_l"></div>
</div>
<div class="foot_r">
<div class="l_r"></div>
<div class="f_r"></div>
</div>
<div class="h_l">
<div class="l_xian_l"></div>
</div>
<div class="h_r">
<div class="l_xian_r"></div>
</div>
<div class="yinying"></div>
</div>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
