使用CSS3各个属性实现小人的动画
生活随笔
收集整理的這篇文章主要介紹了
使用CSS3各个属性实现小人的动画
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用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);} }?
轉載于:https://www.cnblogs.com/grnBlogs/p/4661231.html
總結
以上是生活随笔為你收集整理的使用CSS3各个属性实现小人的动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： YII2 实现登录时候修改最新登录时间
- 下一篇： 快速幂 (转载，详细)