當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

CSS3实现小黄人动画

發(fā)布時(shí)間：2025/3/15 CSS 49 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3实现小黄人动画小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

轉(zhuǎn)載請(qǐng)注明出處，謝謝！

每次看到CSS3動(dòng)畫(huà)就心癢癢想試一下，記得一個(gè)多月前看了白樹(shù)哥哥的一篇博客，突然開(kāi)竅，于是拿他提供的demo試了一下，感覺(jué)很棒！下圖為demo提供的動(dòng)畫(huà)幀設(shè)計(jì)稿。

自己也想說(shuō)搞一個(gè)DIY的動(dòng)畫(huà)出來(lái)，可是，會(huì)PS不一定會(huì)設(shè)計(jì)啊，我搞不出一套動(dòng)畫(huà)設(shè)計(jì)稿出來(lái)啊【抓狂】….于是乎，去了站酷網(wǎng)找找素材，我果然還是太天真了，最后從心只找到了一張圖：

聯(lián)想到我要做CSS3動(dòng)畫(huà)，呵呵……怎么辦 ? ——沒(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)畫(huà)，各個(gè)知識(shí)點(diǎn)的具體詳解我就不解釋了，有興趣可以到這里了解一下：http://isux.tencent.com/css3/index.html

回到這個(gè)案例，話說(shuō)這么挫的動(dòng)畫(huà)是怎么具體實(shí)現(xiàn)的呢？我將分享代碼給大家練習(xí)：

html結(jié)構(gòu)：

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)畫(huà)（特別是3d）知識(shí)點(diǎn)的學(xué)習(xí)及實(shí)踐。多練習(xí)，才能記得更牢，用得更順，這只是開(kāi)始……

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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： javascript设计模式-学习笔记
下一篇：面向对象的十大原则