使用CSS3各个属性实现带有音乐小人的动画，完全不使用JS代码：
注：Chrome浏览器效果最佳，最终效果静态图：
HTML代码如下：
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8";> <title>练习一个小人的动画</title> <link rel="stylesheet" href="/CSS3/css/people.css" /></head><body> <div class="music1"> <audio src="/CSS3/theme_8.mp3" autoplay loop/> </div> <!--整体的div布局--> <div class="warp"> <div class="border_circle" id="one"></div> <div class="border_circle" id="two"></div> <!--背景圆圈--> <div class="backgroud_circle"> <div class="tight-light"></div> <span class="shirt-text">I</span> <span class="shirt-text">♥</span> <span class="shirt-text">Y</span> <span class="shirt-text">O</span> <span class="shirt-text">U</span> <div class="tight-dark"></div> <!--身体--> <div class="body"></div> </div> <!--头部--> <div class="head"> <!--耳朵--> <div class="ear" id="left"></div> <div class="ear" id="right"></div> <!--头发--> <div class="hair-main"> <div class="sideburn" id="left"></div> <div class="sideburn" id="right"></div> <div class="hair-top"></div> </div> <!--脸--> <div class="face"> <div class="hair-bottom"></div> <div class="nose"></div> <!--形成鼻子的阴影--> <div class="shadow-main"> <div class="shadow"></div> </div> <!--左眼--> <div class="eye-shadow" id="left"> <div class="eyebrow" id="left"></div> <div class="eye"></div> </div> <!--右眼--> <div class="eye-shadow" id="right"> <div class="eyebrow" id="right"></div> <div class="eye"></div> </div> <!--嘴巴--> <div class="mouse"></div> </div> </div> <!--音符--> <span class="music" id="one">♫</span> <span class="music" id="two">♪</span> </div></body></html>
CSS代码如下：
/* CSS Document */body,html{ width:100%; height:100%; margin:0; display:table; text-align:center;}.music1{ display:none;}.warp{ 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; top:50%; 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{ right:12px;}/*耳朵*/.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; opacity:1; 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;}/*眼睛阴影*/.eye-shadow{ width:30px; height:15px; border-radius:0 0 15px 15px; background:rgba(149,36,0,0.1); position:absolute; top:70px; animation:grow 0.7s 2s ease; -webkit-animation:grow 0.7s 2s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; transform:scale(0); -webkit-transform:scale(0);}.eye-shadow#left{ left:35px; z-index:5;}.eye-shadow#right{ right:35px;}/*眼眉*/.eyebrow{ width:40px; height:10px; background:#FF9966; position:absolute; top:-35px; left:50%; opacity:0; margin-left:-20px; -webkit-backface-visibility:hidden;/*设定元素的背面是否可见*/}.eyebrow#left{ animation:eyebrow-left 0.7s 2.2s ease; -webkit-animation:eyebrow-left 0.7s 2.2s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}.eyebrow#right{ animation:eyebrow-right 0.7s 2.2s ease, eyebrow-right-raise 2s 6.6s infinite alternate ease-in-out; -webkit-animation:eyebrow-right 0.7s 2.2s ease, eyebrow-right-raise 2s 6.6s infinite alternate ease-in-out; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}/*两只蓝色眼睛*/.eye{ width:20px; height:28px; border-radius:10px; background:#334C68; position:absolute; top:-18px; left:50%; margin-left:-10px; animation:grow 0.7s 2.2s ease; -webkit-animation:grow 0.7s 2.2s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; transform:scale(0); -webkit-transform:scale(0); transform-origin:bottom; -webkit-transform-origin:bottom;}/*嘴巴*/.mouse{ width:66px; height:33px;
新闻热点
疑难解答
