html⼩⼈动画效果代码，使⽤CSS3各个属性实现⼩⼈的动画实
例代码
使⽤CSS3各个属性实现带有⾳乐⼩⼈的动画，完全不使⽤JS代码：
注：chrome浏览器效果最佳，最终效果静态图：
HTML代码如下：
练习⼀个⼩⼈的动画
I
♥
Y
O
U
♫
♪
CSS代码如下：
/* CSS Document */body,html{
width:100%;
height:100%;
margin:0;
display:table;
text-align:center;
}.music1{
display:none;
margin-top:100px;
vertical-align:middle;
position:relative;
}.backgroud_circle{
width:400px;
height:400px;
border-radius:100%;
background:#6699FF;
margin:0 auto;
overflow:hidden;
-webkit-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
-moz-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
-o-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
-ms-mask-image: -webkit-radial-gradient(#BADA55, #BADA55); /*执⾏动画*/ animation:grow 0.7s ease;
-webkit-animation:grow 0.7s ease;
transform-origin:center;
}/*⾝体body*/.body{
width:285px;
height:400px;
margin:0 auto;
background:#333333;
position:relative;
top:100px;
border-radius:100px; /*执⾏动画*/
-webkit-animation:body-enter 0.7s 0.2s 1 ease;
animation:body-enter 0.7s 0.2s 1 ease; /*-webkit-animation-fill-mode:forwards; animation-fill-mode:forwards;*/}/*头部head*/.head{
width:196px;
height:260px;
border-radius:50px;
background:#ffe4be;
position:absolute;
left:50%;
margin-top:-210px;
margin-left:-98px; /*动画执⾏*/
animation:grow 0.7s 0.5s ease;
-webkit-animation:grow 0.7s 0.5s ease; transform-origin:bottom;
}/*头发*/.hair-main{
width:220px;
height:0px;
background:#FF9966;
border-radius:54px 54px 0px 0px; animation:hair-main 0.7s 0.9s ease;
-webkit-animation:hair-main 0.7s 0.9s ease; animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards; position:relative;
margin-left:-12px;
margin-top:-10px;
z-index:2;
}/*鬓⾓*/.sideburn{
width:8px;
height:25px;
background:#FF9966;
opacity:0;
bottom:-25px;
position:absolute;
animation:sideburn-main 0.7s 1s ease;
-webkit-animation:sideburn-main 0.7s 1s ease; animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}.sideburn#left{
left:12px;
}.sideburn#right{
}/*⽿朵*/.ear{
width:24px;
height:35px;
position:absolute;
background:#ffe4be;
top:116px;
border-radius:12px;
animation:grow 0.7s 1.3s ease;
-webkit-animation:grow 0.7s 1.3s ease; animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards; transform:scale(0);
-webkit-transform:scale(0);
}.ear#left{
left:-12px;
}.ear#right{
right:-12px;
}/*脸部*/.face{
width:180px;
height:0px;
border-radius:48px;
background:#ffe4be;
position:absolute;
top:40px;
left:8px;
animation:hair-main 0.7s 0.5s linear;
-webkit-animation:hair-main 0.7s 0.5s linear; animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
z-index:3;
}/*⿐⼦*/.nose{
width:20px;
height:45px;
border-top-left-radius:20px;
background:#ffe4be;
position:absolute;
top:80px;
left:50%;
margin-left:-20px;
animation:shadow-main 0.7s 3s ease; animation-fill-mode: forwards;
-webkit-animation:shadow-main 0.7s 3s ease; -webkit-animation-fill-mode: forwards; opacity:0;
z-index:5;
}/*形成⿐⼦的阴影*/.shadow-main{
width:98px;
height:260px;
position:absolute;
bottom:-84px;
left:-8px;
z-index:4;
overflow:hidden;
}.shadow{
width:98px;
height:260px;
border-radius:50px;
background:rgba(149,36,0,0.1);
position:absolute;
opacity:0;
z-index:4;
animation:shadow-main 1s 2.8s ease;
-
webkit-animation:shadow-main 1s 2.8s ease; animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
js控制css3动画触发}/*眼睛阴影*/.eye-shadow{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。