CSS3实现小黄人动画
生活随笔
收集整理的這篇文章主要介紹了
CSS3实现小黄人动画
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
轉載請注明出處，謝謝！
每次看到CSS3動畫就心癢癢想試一下，記得一個多月前看了白樹哥哥的一篇博客，突然開竅，于是拿他提供的demo試了一下，感覺很棒！下圖為demo提供的動畫幀設計稿。
自己也想說搞一個DIY的動畫出來，可是，會PS不一定會設計啊，我搞不出一套動畫設計稿出來啊【抓狂】….于是乎，去了站酷網找找素材，我果然還是太天真了，最后從心只找到了一張圖：
聯想到我要做CSS3動畫，呵呵……怎么辦 ? ——沒辦法，摳唄！（此處勿噴，著實無素材）
……最后效果變成這樣子,這是移動端的例子！(gif圖有卡頓現象，請湊合看吧,非喜勿噴…)：
OK,其實主要目的還是知識點的學習吧：
這個demo涉及的知識點有：
perspective
perspective-origin
transform-style
transform-origin
animation
@keyframes
translate3d,translateX，rotateY….
這些知識點有些涉及css3d動畫，各個知識點的具體詳解我就不解釋了，有興趣可以到這里了解一下：http://isux.tencent.com/css3/index.html
回到這個案例，話說這么挫的動畫是怎么具體實現的呢？ 我將分享代碼給大家練習：
html結構：
<body><div class="title"><p>小黃人</p></div><div class="wrapper"><div class="littleH"><div class="light"><div class="light_left"><p>歡迎歡迎，熱烈歡迎</p></div><div class="light_right"><p>歡迎歡迎，熱烈歡迎</p></div><div class="load"></div></div><div class="littleH_body"><div class="leftHair"></div><div class="rightHair"></div><div class="leftBlackeye"></div><div class="leftWhiteeye"></div><div class="rightBlackeye"></div><div class="rightWhiteeye"></div><div class="mouse"></div><div class="leftFoot"></div><div class="rightFoot"></div></div></div></div> </body>css代碼：
body{margin: 0;padding: 0;width: 100%;height: 100%;}.title p{text-align: center;font-size: 100px;font-weight: bolder;color:#333;}.wrapper{margin: 400px auto;}.littleH{position: relative;-webkit-perspective: 800;-webkit-perspective-origin: 50% 50%;}.light{-webkit-transform-style: preserve-3d;}.light .light_left,.light .light_right{position: absolute;width: 100%;height: 300px;background: lightblue;-webkit-transform: rotateY(90deg) translate3d(0,300px,-200px);-webkit-animation: changeBgColor 2s linear infinite;}.light .light_right{-webkit-transform: rotateY(-90deg) translate3d(0,300px,-215px);-webkit-animation-delay: 1s;}@-webkit-keyframes changeBgColor{0%,100%{background: lightblue;}50%{background: lightgreen;}}.light .light_left p,.light .light_right p{color:#fff;font-size: 80px;font-weight: bold;margin-left: 100px;}.light .light_right p{float: right;margin-right: 100px;}.light .load{position: absolute;width: 500px;height: 1500px;background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,#aadbdc), color-stop(52%,#ffffff));background: -webkit-linear-gradient(top, #aadbdc 51%,#ffffff 52%);background: linear-gradient(to bottom, #aadbdc 51%,#ffffff 52%); background-size: 350px 80px;-webkit-animation: move_load 5s linear infinite;}@-webkit-keyframes move_load{0%{-webkit-transform:rotateX(90deg) translate3d(250px,0,0);}100%{-webkit-transform:rotateX(90deg) translate3d(250px,-320px,0);}}.littleH_body{position: absolute;left:50%;margin-left: -157px;width: 314px;height: 425px;background: url(1.png);-webkit-transform-style: preserve-3d;}.leftHair{position: absolute;right: 58px;top:-5px;width: 100px;height: 17px;background: url(lefthair.png);-webkit-transform-origin: left bottom;-webkit-animation: lefthair 1s .3s ease-in-out infinite;}@-webkit-keyframes lefthair{0%,10%,40%,100%{-webkit-transform: rotate(0deg) translateY(1px);}30%{-webkit-transform: rotate(-3deg) translateY(1px);}}.rightHair{position: absolute;left: 58px;top:-8px;width: 100px;height: 16px;background: url(righthair.png);-webkit-transform-origin: right bottom;-webkit-animation: righthair 1s ease-in-out infinite;}@-webkit-keyframes righthair{0%,10%,40%,100%{-webkit-transform: rotate(0deg) translateY(1px);}30%{-webkit-transform: rotate(4deg) translateY(1px);}}.leftBlackeye{position: absolute;right: 87px;top:102px;width: 43px;height: 43px;background: url(eyeblack.png);-webkit-animation: leftblackeye 5s ease-in infinite;}@-webkit-keyframes leftblackeye{0%,20%,50%,70%,100%{-webkit-transform: translateX(0px);}30%,40%{-webkit-transform: translateX(15px);}80%,90%{-webkit-transform: translateX(-15px);}}.leftWhiteeye{position: absolute;right: 92px;top:110px;width: 20px;height: 21px;background: url(whiteeye.png);background-size: 95% 95%;background-repeat: no-repeat;-webkit-animation: leftwhiteeye 5s ease-in infinite;}@-webkit-keyframes leftwhiteeye{0%,20%,50%,70%,100%{-webkit-transform: translateX(0px);}30%,40%{-webkit-transform: translate3d(15px,3px,0);}80%,90%{-webkit-transform: translate3d(-30px,3px,0);}}.rightBlackeye{position: absolute;left: 84px;top:102px;width: 43px;height: 43px;background: url(eyeblack.png);-webkit-animation: rightblackeye 5s ease-in infinite;}@-webkit-keyframes rightblackeye{0%,20%,50%,70%,100%{-webkit-transform: translateX(0px);}30%,40%{-webkit-transform: translateX(15px);}80%,90%{-webkit-transform: translateX(-15px);}}.rightWhiteeye{position: absolute;left: 102px;top:112px;width: 20px;height: 21px;background: url(whiteeye.png);background-size: 95% 95%;background-repeat: no-repeat;-webkit-animation: rightwhiteeye 5s ease-in infinite;}@-webkit-keyframes rightwhiteeye{0%,20%,50%,70%,100%{-webkit-transform: translateX(0px);}30%,40%{-webkit-transform: translate3d(15px,3px,0);}80%,90%{-webkit-transform: translate3d(-30px,3px,0);}}.mouse{position: absolute;left: 126px;top:210px;width: 71px;height: 30px;background: url(mouse.png);-webkit-transform-origin: center top;-webkit-animation: mouse 5s ease-in-out infinite;}@-webkit-keyframes mouse{40%{-webkit-transform: rotate(-15deg) translateX(22px);}0%,20%,60%,100%{-webkit-transform: rotate(0deg);}}.leftFoot{position: absolute;right: 85px;top:424px;width: 68px;height: 43px;background: url(leftfoot.png);-webkit-transform-origin: left top;-webkit-animation: leftfoot .6s ease-in-out infinite;}@-webkit-keyframes leftfoot{0%,50%,100%{-webkit-transform: rotate(0deg);}80%{-webkit-transform: rotate(-10deg);}}.rightFoot{position: absolute;left: 85px;top:424px;width: 68px;height: 43px;background: url(rightfoot.png);margin-bottom: 100px;-webkit-transform-origin: right top;-webkit-animation: rightfoot .6s ease-in-out infinite;}@-webkit-keyframes rightfoot{0%,50%,100%{-webkit-transform: rotate(0deg);}30%{-webkit-transform: rotate(10deg);}}代碼應該還是很簡單就能看懂的，不足之處在于圖片沒有合并，就湊合吧，主要目的還是對CSS3動畫（特別是3d）知識點的學習及實踐。多練習，才能記得更牢，用得更順，這只是開始……
PS：附上我摳的圖片
1.png
righthair.png
lefthair.png
eyeblack.png
whiteeye.png
mouse.png
rightfoot.png
leftfoot.png
轉載于:https://www.cnblogs.com/jr1993/p/4654622.html
總結
以上是生活随笔為你收集整理的CSS3实现小黄人动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript设计模式-学习笔记
- 下一篇： CSS入门学习（转）