CSS3实现小黄人动画
生活随笔
收集整理的這篇文章主要介紹了
CSS3实现小黄人动画
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
轉(zhuǎn)載請(qǐng)注明出處，謝謝！
每次看到CSS3動(dòng)畫就心癢癢想試一下，記得一個(gè)多月前看了白樹哥哥的一篇博客，突然開竅，于是拿他提供的demo試了一下，感覺(jué)很棒！下圖為demo提供的動(dòng)畫幀設(shè)計(jì)稿。
自己也想說(shuō)搞一個(gè)DIY的動(dòng)畫出來(lái)，可是，會(huì)PS不一定會(huì)設(shè)計(jì)啊，我搞不出一套動(dòng)畫設(shè)計(jì)稿出來(lái)啊【抓狂】….于是乎，去了站酷網(wǎng)找找素材，我果然還是太天真了，最后從心只找到了一張圖：
聯(lián)想到我要做CSS3動(dòng)畫，呵呵……怎么辦 ? ——沒(méi)辦法，摳唄！（此處勿噴，著實(shí)無(wú)素材）
……最后效果變成這樣子,這是移動(dòng)端的例子！(gif圖有卡頓現(xiàn)象，請(qǐng)湊合看吧,非喜勿噴…)：
OK,其實(shí)主要目的還是知識(shí)點(diǎn)的學(xué)習(xí)吧：
這個(gè)demo涉及的知識(shí)點(diǎn)有：
perspective
perspective-origin
transform-style
transform-origin
animation
@keyframes
translate3d,translateX，rotateY….
這些知識(shí)點(diǎn)有些涉及css3d動(dòng)畫，各個(gè)知識(shí)點(diǎn)的具體詳解我就不解釋了，有興趣可以到這里了解一下：http://isux.tencent.com/css3/index.html
回到這個(gè)案例，話說(shuō)這么挫的動(dòng)畫是怎么具體實(shí)現(xiàn)的呢？ 我將分享代碼給大家練習(xí)：
html結(jié)構(gòu)：
<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);}}代碼應(yīng)該還是很簡(jiǎn)單就能看懂的，不足之處在于圖片沒(méi)有合并，就湊合吧，主要目的還是對(duì)CSS3動(dòng)畫（特別是3d）知識(shí)點(diǎn)的學(xué)習(xí)及實(shí)踐。多練習(xí)，才能記得更牢，用得更順，這只是開始……
PS：附上我摳的圖片
1.png
righthair.png
lefthair.png
eyeblack.png
whiteeye.png
mouse.png
rightfoot.png
leftfoot.png
轉(zhuǎn)載于:https://www.cnblogs.com/jr1993/p/4654622.html
總結(jié)
以上是生活随笔為你收集整理的CSS3实现小黄人动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： javascript设计模式-学习笔记
- 下一篇： 面向对象的十大原则