使用CSS3各个属性实现小人的动画_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:40:481889浏览
使用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; background:#FFFFFF; border-radius:0 0 33px 33px; position:absolute; left:50%; top:150px; margin-left:-33px; animation:grow 0.7s 2.6s ease; -webkit-animation:grow 0.7s 2.6s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; transform:scale(0); -webkit-transform:scale(0);}/*背景高亮light阴影*/.tight-light{ width:400px; height:600px; background:#ffffff; opacity:0; position:absolute; right:15%; animation:tight-light 1s 2.8s ease; -webkit-animation:tight-light 1s 2.8s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; transform:translate(200px,0px); -webkit-transform:translate(200px,0px);}/*背景高亮dark阴影*/.tight-dark{ width:400px; height:600px; background:#000000; opacity:0; position:absolute; left:10%; top:35px; animation:tight-dark 1s 2.8s ease; -webkit-animation:tight-dark 1s 2.8s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; transform:translate(-200px,0px); -webkit-transform:translate(-200px,0px); z-index:6;}/*外边黄色圈*/.border_circle{ width:399px; height:399px; border-radius:50%; border:10px solid #ff8345; position:absolute; top:50%; left:50%; margin-left:-220px; margin-top:-220px; transform:scale(0); -webkit-transform:scale(0); transform-origin:center; -webkit-transform-origin:center;}/*外边黄色圈one*/.border_circle#one{ animation:border_circle 1s 3.1s ease; -webkit-animation:border_circle 1s 3.1s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}/*外边黄色圈two*/.border_circle#two{ animation:border_circle 1s 3.3s ease; -webkit-animation:border_circle 1s 3.3s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}/*I YOU*/.backgroud_circle .shirt-text{ font-family:"微软雅黑",sans-serif; font-size:50px; font-weight:700; color:#FFFFFF; position:relative; top:180px; display:inline-block; -webkit-text-stroke:2px; text-stroke:2px; opacity:0; -webkit-transform:translate(0px,100px); transform:translate(0px,100px); animation-fill-mode:forwards !important; -webkit-animation-fill-mode:forwards !important; z-index:5;}.backgroud_circle .shirt-text:nth-of-type(1){ animation:shirt-text 0.7s 3.3s ease; -webkit-animation:shirt-text 0.7s 3.3s ease;}.backgroud_circle .shirt-text:nth-of-type(2){ color:#FF0000; animation:shirt-text 0.7s 3.4s ease, heart 2s 4s infinite ease-in-out; -webkit-animation:shirt-text 0.7s 3.4s ease, heart 2s 4s infinite ease-in-out;}.backgroud_circle .shirt-text:nth-of-type(3){ animation:shirt-text 0.7s 3.5s ease; -webkit-animation:shirt-text 0.7s 3.5s ease;}.backgroud_circle .shirt-text:nth-of-type(4){ animation:shirt-text 0.7s 3.6s ease; -webkit-animation:shirt-text 0.7s 3.6s ease;}.backgroud_circle .shirt-text:nth-of-type(5){ animation:shirt-text 0.7s 3.7s ease; -webkit-animation:shirt-text 0.7s 3.7s ease;}/*音符*/.music{ position: absolute; font-size: 150px; color: #FCB040; width: 1px; left: 50%; opacity: 0;}.music#one{ margin-left:-250px; top:50%; animation: note 2s 3.5s infinite ease; animation-fill-mode: forwards; -webkit-animation: note 2s 3.5s infinite ease; -webkit-animation-fill-mode: forwards;}.music#two{ margin-left: 150px; top: 30%; animation: note 2s 4.3s infinite ease; animation-fill-mode: forwards; -webkit-animation: note 2s 4.3s infinite ease; -webkit-animation-fill-mode: forwards;}/*背景圆圈的动画事件：由中心向外扩张*/@-webkit-keyframes grow{ 0%{ -webkit-transform:scale(0); transform:scale(0);} 60%{ -webkit-transform:scale(1.15); transform:scale(1.15);} 80%{ -webkit-transform:scale(0.95); transform:scale(0.95);} 100%{ -webkit-transform:scale(1); transform:scale(1);}}@keyframes grow{ 0%{ -webkit-transform:scale(0); transform:scale(0);} 60%{ -webkit-transform:scale(1.15); transform:scale(1.15);} 80%{ -webkit-transform:scale(0.95); transform:scale(0.95);} 100%{ -webkit-transform:scale(1); transform:scale(1);}}/*身体进入样式：由底部向上先变大再恢复正常*/@-webkit-keyframes body-enter{ 0%{-webkit-transform:translateY(200px);} 60%{-webkit-transform:translateY(-20px);} 80%{-webkit-transform:translateY(30px);} 100%{-webkit-transform:translateY(0);}}@keyframes body-enter{ 0%{-webkit-transform:translateY(200px);} 60%{-webkit-transform:translateY(-20px);} 80%{-webkit-transform:translateY(30px);} 100%{-webkit-transform:translateY(0);}}/*头发动画：*/@-webkit-keyframes hair-main{ 0%{height:0px; -webkit-transform:translateY(137px); transform:translateY(137px);} 100%{height:137px; -webkit-transform:translateY(0); transform:translateY(0);}}@keyframes hair-main{ 0%{height:0px; -webkit-transform:translateY(137px); transform:translateY(137px);} 100%{height:137px; -webkit-transform:translateY(0); transform:translateY(0);}}/*鬓角动画*/@-webkit-keyframes sideburn-main{ 0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);} 100%{opacity:1; -webkit-transform:translateY(0); transform:translateY(0);}}@keyframes sideburn-main{ 0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);} 100%{opacity:1; -webkit-transform:translateY(0); transform:translateY(0);}}/*鼻子阴影动画：*/@-webkit-keyframes shadow-main{ 0%{ opacity:0; -webkit-transform:translate(98px,0px); transform:translate(98px,0px);} 50%{ opacity:0;} 100%{ opacity:1; -webkit-transform:translate(0px,0px); transform:translate(0px,0px);}}@keyframes shadow-main{ 0%{ opacity:0; -webkit-transform:translate(98px,0px); transform:translate(98px,0px);} 50%{ opacity:0;} 100%{ opacity:1; -webkit-transform:translate(0px,0px); transform:translate(0px,0px);}}/*左眼眉动画*/@-webkit-keyframes eyebrow-left{ 0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);} 70%{opacity:1; -webkit-transform:translateY(5px); transform:translateY(5px);} 100%{opacity:1; -webkit-transform:translateY(0); transform:translateY(0);}}@keyframes eyebrow-left{ 0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);} 70%{opacity:1; -webkit-transform:translateY(5px); transform:translateY(5px);} 100%{opacity:1; -webkit-transform:translateY(0); transform:translateY(0);}}/*右眼眉动画*/@-webkit-keyframes eyebrow-right{ 0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);} 70%{opacity:1; -webkit-transform:translateY(5px); transform:translateY(5px);} 100%{opacity:1; -webkit-transform:rotate(9deg) translateY(0); transform:rotate(9deg) translateY(0);}}@keyframes eyebrow-right{ 0%{opacity:0; -webkit-transform:translateY(-25px); transform:translateY(-25px);} 70%{opacity:1; -webkit-transform:translateY(5px); transform:translateY(5px);} 100%{opacity:1; -webkit-transform:rotate(9deg) translateY(0); transform:rotate(9deg) translateY(0);}}/*眉毛上升动画*/@-webkit-keyframes eyebrow-right-raise{ 0%{top:-35px;} 70%{top:-35px;} 100%{top:-45px;}}@keyframes eyebrow-right-raise{ 0%{top:-35px;} 70%{top:-35px;} 100%{top:-45px;}}/*背景高亮light动画*/@-webkit-keyframes tight-light{ 0%{opacity:0; -webkit-transform:translate(200px,0px); transform:translate(200px,0px);} 100%{opacity:0.2; -webkit-transform:rotate(45deg) translate(0px,0px); transform:rotate(45deg) translate(0px,0px);}}@keyframes tight-light{ 0%{opacity:0; -webkit-transform:translate(200px,0px); transform:translate(200px,0px);} 100%{opacity:0.2; -webkit-transform:rotate(45deg) translate(0px,0px); transform:rotate(45deg) translate(0px,0px);}}/*背景高亮dark动画*/@-webkit-keyframes tight-dark{ 0%{opacity:0; -webkit-transform:translate(-200px,0px); transform:translate(-200px,0px);} 100%{opacity:0.2; -webkit-transform:rotate(-45deg) translate(0px,0px); transform:rotate(-45deg) translate(0px,0px);}}@keyframes tight-dark{ 0%{opacity:0; -webkit-transform:translate(-200px,0px); transform:translate(-200px,0px);} 100%{opacity:0.2; -webkit-transform:rotate(-45deg) translate(0px,0px); transform:rotate(-45deg) translate(0px,0px);}}/*外面黄色圈动画*/@-webkit-keyframes border_circle{ 0%{ border-width:20px; transform:scale(0); -webkit-transform:scale(0);} 40%{ border-width:20px; transform:scale(1); -webkit-transform:scale(1); margin-left:-220px; margin-top:-220px;} 100%{ border-width:0px; transform:scale(1.5); -webkit-transform:scale(1.5); border-style:double; margin-left:-200px; margin-top:-200px;}}@keyframes border_circle{ 0%{ border-width:20px; transform:scale(0); -webkit-transform:scale(0);} 40%{ border-width:20px; transform:scale(1); -webkit-transform:scale(1); margin-left:-220px; margin-top:-220px;} 100%{ border-width:0px; transform:scale(1.5); -webkit-transform:scale(1.5); border-style:double; margin-left:-200px; margin-top:-200px;}}/*文字*/@-webkit-keyframes shirt-text{ 0%{opacity:0; -webkit-transform:translate(0px, 80px); transform:translate(0px, 80px);} 60%{opacity:1; -webkit-transform:translate(0px, -50px); transform:translate(0px, -50px);} 80%{opacity:1; -webkit-transform:translate(0px, 140px); transform:translate(0px, 140px);} 100%{opacity:1; -webkit-transform:translate(0px, 100px); transform:translate(0px, 100px);}}@keyframes shirt-text{ 0%{opacity:0; -webkit-transform:translate(0px, 80px); transform:translate(0px, 80px);} 60%{opacity:1; -webkit-transform:translate(0px, -50px); transform:translate(0px, -50px);} 80%{opacity:1; -webkit-transform:translate(0px, 140px); transform:translate(0px, 140px);} 100%{opacity:1; -webkit-transform:translate(0px, 100px); transform:translate(0px, 100px);}}@-webkit-keyframes heart{ 0%{ } 30%{color:#00FF99;} 70%{color:#FFFF00;} 100%{}}@keyframes heart{ 0%{ } 30%{color:#00FF99;} 70%{color:#FFFF00;} 100%{}}/*音符*/@-webkit-keyframes note{ 0% { opacity: 0; -webkit-transform: translate(0px,50px); transform: translate(0px,50px); } 30% { -webkit-transform:rotate(12deg) translate(-30px,0px); transform:rotate(12deg) translate(-30px,0px); } 45% { opacity: 1; } 60% { -webkit-transform: rotate(-12deg) translate(30px,-100px); transform:rotate(-12deg) translate(30px,-100px); } 100% { opacity: 0; -webkit-transform:rotate(0deg) translate(0px,-200px); transform:rotate(0deg) translate(0px,-200px); }}@keyframes note{ 0% { opacity: 0; -webkit-transform: translate(0px,50px); transform: translate(0px,50px); } 30% { -webkit-transform:rotate(12deg) translate(-30px,0px); transform:rotate(12deg) translate(-30px,0px); } 45% { opacity: 1; } 60% { -webkit-transform: rotate(-12deg) translate(30px,-100px); transform:rotate(-12deg) translate(30px,-100px); } 100% { opacity: 0; -webkit-transform:rotate(0deg) translate(0px,-200px); transform:rotate(0deg) translate(0px,-200px); }}
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn