使用CSS3各个属性实现带有音乐小人的动画，完全不使用JS代码：注：chrome浏览器效果最佳，最终效果静态图： HTML代码如下：<!DOCTYPE html><html><head> <meta http-equiv=&qu ...
使用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="http://www.cnblogs.com//CSS3/css/people.css" /></head><body> <div class="music1"> <audio src='/images/loading.gif' data-original="http://www.cnblogs.com//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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：使用CSS3各个属性实现小人的动画
关键词：CSS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
