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

CSS

纯CSS3画出小黄人并实现动画效果

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

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

前言

前兩天我剛發(fā)布了一篇CSS3實(shí)現(xiàn)小黃人動(dòng)畫的博客，但是實(shí)現(xiàn)的CSS3動(dòng)畫是基于我在站酷網(wǎng)找到的一張小黃人的jpg格式圖片，并自己用PS摳出需要實(shí)現(xiàn)動(dòng)畫的部分，最后才完成的動(dòng)畫效果。但是，其實(shí)我的初衷是想體驗(yàn)一下用圖片做動(dòng)畫的趕腳，但是找不到素材，才無奈用了最笨的方法來滿足自己的需求，本想勉強(qiáng)能看就行了?？墒悄?#xff0c;還是抵不住自己內(nèi)心的完美，于是乎，用了一個(gè)晚上用CSS3畫出了小黃人再實(shí)現(xiàn)類似的動(dòng)畫效果。

內(nèi)容

OK，大家看一下下面兩張圖有什么不同：

當(dāng)然，很多人會(huì)說，明顯大小不同，嘴巴，頭發(fā)也是不一樣的。但是其實(shí)最大的不同是，用一個(gè)形象一點(diǎn)的例子就是：這是兩個(gè)孩子，第一個(gè)是從超市貨架上拿的，另外一個(gè)是我自己生的。怎么生呢？——用CSS3！

那么生下來得會(huì)動(dòng)啊，不然就夭折了，所以，我就多拍了幾個(gè)，就變成這樣子了：

怎么樣？雖然手腳動(dòng)畫還是不怎么神似，但人類聰明地大腦還是能看得出啥意思的吧！今天就讓我們一起學(xué)習(xí)如何生出一個(gè)小黃人來。

首先，還是直接把HTML結(jié)構(gòu)放出來給大家打量打量：

好的，每一處我都標(biāo)明了它的用途，大家可以稍微理解一下，在頭腦里有一個(gè)大概的模型或者層次結(jié)構(gòu)。

接下來就是猛料了。。。我將分步講解，一步一步實(shí)現(xiàn)：

首先對(duì)容器和整體做一些簡(jiǎn)單的樣式設(shè)置：

body{margin: 0;padding:0; } .wrapper{width: 300px;margin:100px auto; } .litteH{position: relative; } .bodyH{position: absolute;width: 240px;height: 400px;border:5px solid #000;border-radius: 115px;background: rgb(249,217,70);overflow: hidden;z-index: 2; }

其中.bodyH主要就是繪制小黃人的身體，身體的比例很重要，現(xiàn)在運(yùn)行看一下效果：

OK，身體已經(jīng)有了，現(xiàn)在趕緊給它穿個(gè)褲子吧！

.bodyH .condoleBelt{position: absolute; } .bodyH .trousers{position: absolute;bottom: 0;width: 100%;height: 100px;border-top: 6px solid #000;background: rgb(32,116,160); } .trousers_top{width: 160px;height: 60px;border:6px solid #000;border-bottom: none;border-radius: 0 0 5px 5px;background: rgb(32,116,160);position: absolute;bottom: 100px;left:34px; }

其中.trousers_top就是矩形部分，那么穿完褲子是什么樣子的呢？

現(xiàn)在怎么看都像一顆膠囊，不行，趕緊修飾修飾，給它一個(gè)吊帶，不然褲子會(huì)掉呢：

.bodyH .condoleBelt .left, .bodyH .condoleBelt .right{width: 100px;height: 16px;border:5px solid #000;background: rgb(32,116,160);position: absolute;top:-90px;left:-35px;z-index: 2;-webkit-transform:rotate(45deg); } .bodyH .condoleBelt .left{top:-88px;left:165px;-webkit-transform:rotate(-45deg); } .bodyH .condoleBelt .left:after, .bodyH .condoleBelt .right:after{content: '';width: 8px;height: 8px;border-radius: 50%;background: #000;position: absolute;top:4px;left:88px; }.bodyH .condoleBelt .left:after{left:5px; }

這一塊主要就是實(shí)現(xiàn)兩個(gè)吊帶，左右各一條，然后我使用：after偽元素來實(shí)現(xiàn)吊帶上的小黑點(diǎn)：

咦，開始有模有樣了，接下來我們一鼓作氣把褲袋和一下修飾的邊邊給實(shí)現(xiàn)了：

.pocket{width: 60px;height: 45px;border:6px solid #000;border-radius: 0px 0px 25px 25px;position: absolute;bottom:65px;left:84px; } .line_right{width: 30px;height: 30px;border-bottom-left-radius: 100px;border-bottom:6px solid #000;border-left:6px solid #000;position: absolute;left: 0;bottom:60px;-webkit-transform:rotate(-75deg); } .line_left{width: 30px;height: 30px;border-bottom-right-radius: 100px;border-bottom:6px solid #000;border-right:6px solid #000;position: absolute;right: 0;bottom:63px;-webkit-transform:rotate(75deg); } .line_bottom{height: 40px;border:3px solid #000;border-radius: 3px;position: absolute;left:118px;bottom: 0px; }

先看效果圖：

OK，兩個(gè)注意點(diǎn)說一下：

1.我把褲子放在身體里面，然后給.bodyH添加overflow:hidden，這樣我們就不用去多慮溢出怎么辦，而且很輕松就能實(shí)現(xiàn)褲子的效果；

2.可以看到褲子兩邊有兩條有弧度的曲線段，我是通過給矩形某一個(gè)角實(shí)現(xiàn)圓角效果，然后只設(shè)置與這個(gè)角相鄰的兩條邊的邊框樣式，然后旋轉(zhuǎn)一下角度就實(shí)現(xiàn)這個(gè)效果了，當(dāng)然只能實(shí)現(xiàn)簡(jiǎn)單一點(diǎn)的效果。

好的，我們繼續(xù)，接下來先實(shí)現(xiàn)以下眼睛部分吧：

.eyes{position: relative;z-index: 3; } .eyes .leftEye,.eyes .rightEye{width: 85px;height: 85px;border-radius: 50%;border:6px solid #000;background: #fff;position: absolute;top:60px;left: 27px; } .eyes .leftEye{left: 124px; } .eyes .leftEye .left_blackEye, .eyes .rightEye .right_blackEye{width: 40px;height: 40px;border-radius: 50%;background: #000;position: absolute;top:24px;left:22px; } .eyes .leftEye .left_blackEye .left_white, .eyes .rightEye .right_blackEye .right_white{width: 20px;height: 20px;border-radius: 50%;background: #fff;position: absolute;top:7px;left:17px; } .eyes .leftEye .left_blackEye .left_white{top:4px;left:17px; } .eyes .leftEye:after, .eyes .rightEye:after{content: '';width: 28px;height: 18px;background: #000;position: absolute;left:-30px;top:37px;-webkit-transform:skewX(20deg) rotate(7deg); } .eyes .leftEye:after{left:89px;top:37px;-webkit-transform:skewX(-20deg) rotate(-7deg); }

眼睛部分還是挺好實(shí)現(xiàn)的，先畫眼鏡，然后黑眼珠，再畫白點(diǎn)，最后我才畫的眼鏡框，眼睛框我是用：after偽元素實(shí)現(xiàn)的。效果圖如下：

嘴巴是最困惑我的，但還是最后還是能實(shí)現(xiàn)：

.mouse{position: relative; } .mouse .mouse_shape{width: 55px;height: 35px;border:5px solid #000;border-bottom-left-radius: 30px;background: #fff;position: absolute;top:175px;left:98px;z-index: 3;-webkit-transform:rotate(-35deg); }

首先也是通過矩形其中一個(gè)角實(shí)現(xiàn)圓角來模擬嘴巴形狀，再加以旋轉(zhuǎn)：

結(jié)果是這樣的，那么想要達(dá)到我們預(yù)期的效果，就需要把上半部分給遮掉，所以我用：after偽元素來實(shí)現(xiàn)遮罩效果：

.mouse .mouse_shape:after{content: '';width: 70px;height: 32px;border-bottom:5px solid #000;border-radius:35px 26px 5px 5px;background: red;position: absolute;top:-16px;left:3px;-webkit-transform:rotate(34deg);}

這個(gè)地方就需要慢慢調(diào)到合適的位置，模擬圖如下：

紅色部分就是遮罩了，也是一個(gè)矩形，設(shè)置了底邊框，實(shí)現(xiàn)和嘴巴下半部分形成閉合效果，現(xiàn)在我們就可以把顏色改成膚色就行了：

.mouse .mouse_shape:after{content: '';width: 70px;height: 32px;border-bottom:5px solid #000;border-radius:35px 26px 5px 5px;background: rgb(249,217,70);position: absolute;top:-16px;left:3px;-webkit-transform:rotate(34deg);-webkit-animation: mouse_mask 5s ease-in-out infinite; }

效果圖如下：

接下來實(shí)現(xiàn)雙手部分，這一部分不難，就是兩個(gè)圓角矩形，旋轉(zhuǎn)了角度，然后層級(jí)低于身體的層級(jí)就行，然后再通過：after偽元素實(shí)現(xiàn)胳膊關(guān)節(jié)處就搞定了。

.hands{position: relative; } .hands .leftHand, .hands .rightHand{width: 80px;height: 80px;border:6px solid #000;border-radius: 25px;background: rgb(249,217,70);position: absolute;top:220px;left:-23px;-webkit-transform:rotate(40deg); } .hands .leftHand{left:182px;top:220px;-webkit-transform:rotate(-40deg); } .hands .leftHand:after, .hands .rightHand:after{content: '';width: 6px;border:3px solid #000;border-radius: 3px;position: absolute;left:13px;top:50px;-webkit-transform:rotate(90deg); }.hands .leftHand:after{left:53px;top:50px;-webkit-transform:rotate(-90deg); }

效果圖如下：

再接下來就是雙腳的部分了，主要就是鞋面的設(shè)計(jì)，我是通過一個(gè)矩形，然后設(shè)置不同的圓角值，加上一點(diǎn)點(diǎn)的旋轉(zhuǎn)來模擬的，這一塊的話，怎么做我都覺得不是很像，所以最后差不多我就妥協(xié)了。

.feet{position: relative; } .feet .left_foot, .feet .right_foot{width: 36px;height: 50px;border-bottom-right-radius: 6px;border-bottom-left-radius: 9px;background: #000;position: absolute;top: 406px;left:88px;-webkit-transform-origin: right top; } .feet .left_foot{border-bottom-right-radius: 9px;border-bottom-left-radius: 6px;left:130px;-webkit-transform-origin: left top; } .feet .left_foot:after, .feet .right_foot:after{content: '';width: 60px;height: 35px;border-radius: 20px 10px 21px 15px;background: #000;position: absolute;left:-36px;top:14.4px;-webkit-transform:rotate(5deg); } .feet .left_foot:after{border-radius: 10px 20px 15px 21px;left:13px;-webkit-transform:rotate(-5deg); }

效果圖如下：

本來是不想畫頭發(fā)的，感覺怪難的，最后嘗試了一下，還是能出個(gè)樣子，那就添加上去吧。原理跟褲子左右兩邊的實(shí)現(xiàn)原理是一樣的，只是參數(shù)值不一樣罷了，大家參考代碼琢磨一下：

.hair{position: relative; } .left_hair_one{width: 130px;height: 100px;border-radius: 50%;border-top:8px solid #000;position: absolute;left:17px;top:-17px;-webkit-transform:rotate(27deg); } .left_hair_two{width: 80px;height: 80px;border-radius: 50%;border-top:6px solid #000;position: absolute;left:45px;top:-10px;-webkit-transform:rotate(15deg); }

補(bǔ)充腳底陰影部分：

.groundShadow{width: 200px;height: 2px;border-radius: 50%;background: rgba(0,0,0,0.3);box-shadow: 0 0 2px 4px rgba(0,0,0,0.3);position: relative;top: 455px;left:25px; }

最后就是最初的效果了：

這時(shí)大家可能會(huì)問：然后呢？不是還會(huì)動(dòng)的嗎？

是的，這里我就大概講一下實(shí)現(xiàn)的思路吧：

1.頭發(fā)：頭發(fā)我想實(shí)現(xiàn)的是被小風(fēng)輕輕地吹起來，然后很快就塌下去，所以吹起和下塌分配的時(shí)間很關(guān)鍵；

2.眼睛：眼睛我設(shè)想的場(chǎng)景是小黃人在悠閑地走路，然后不時(shí)左右看一下兩邊的風(fēng)景，所以眼睛轉(zhuǎn)動(dòng)很悠哉，所以分配的時(shí)間可以稍微長(zhǎng)一點(diǎn)點(diǎn)；

3.嘴巴：讓嘴巴動(dòng)起來確實(shí)比較難，因?yàn)橐獎(jiǎng)拥脑?#xff0c;遮罩也得實(shí)時(shí)跟著改變，而且不能露餡，所以最后實(shí)現(xiàn)的是當(dāng)它往左邊看了一下之后賣了一下萌；

4.雙手和雙腳：這部分確實(shí)很難逼真，本來腳就不是正常的走路狀態(tài)，所以只能按卓別林老爺爺?shù)淖呗贩绞侥M一下，而且左右腳動(dòng)作是緊接實(shí)現(xiàn)而不是同步實(shí)現(xiàn)。雙手的話，我是簡(jiǎn)單模擬人在走路時(shí)有擺手的自然慣性，而且是左腳配右手，右腳配左手。考慮到它的雙手是放在背后的，所以我的擺動(dòng)幅度設(shè)置為非常小，有效果但不明顯。

OK，我就直接把動(dòng)畫代碼放上來吧：

.left_hair_one{-webkit-animation: lefthair 2s ease-in-out infinite; } @-webkit-keyframes lefthair{0%,25%,31%,100%{}30%{-webkit-transform: rotate(31deg) translate3d(-3px,-1px,0);} } .eyes .leftEye .left_blackEye, .eyes .rightEye .right_blackEye{-webkit-animation: blackeye 5s ease-in infinite; } @-webkit-keyframes blackeye{0%,20%,50%,70%,100%{-webkit-transform: translateX(0px);}30%,40%{-webkit-transform: translateX(15px);}80%,90%{-webkit-transform: translateX(-15px);} } .eyes .leftEye .left_blackEye .left_white, .eyes .rightEye .right_blackEye .right_white{-webkit-animation: whiteeye 5s ease-in-out infinite; } @-webkit-keyframes whiteeye{0%,20%,50%,70%,100%{-webkit-transform: translateX(0px);}30%,40%{-webkit-transform: translate3d(3px,4px,0);}80%,90%{-webkit-transform: translate3d(-15px,4px,0);} } .mouse .mouse_shape{-webkit-animation: mouse 5s ease-in-out infinite; } @-webkit-keyframes mouse{40%,43%{width: 45px;height: 25px;top:180px;}0%,35%,48%,100%{width: 55px;height: 35px;top:175px;-webkit-transform:rotate(-35deg);} } .mouse .mouse_shape:after{-webkit-animation: mouse_mask 5s ease-in-out infinite; } @-webkit-keyframes mouse_mask{40%,43%{width: 60.5px;top:-19.3px;left:1.5px;}0%,35%,48%,100%{width: 70px;top:-16px;left:3px;-webkit-transform:rotate(33deg);} } .hands .rightHand{-webkit-animation:rightHand .8s ease-in-out infinite; } @-webkit-keyframes rightHand{0%,50%,100%{-webkit-transform: rotate(40deg);}30%{-webkit-transform: rotate(37deg) translateX(1px);} } .hands .leftHand{-webkit-animation:leftHand .8s ease-in-out infinite; } @-webkit-keyframes leftHand{0%,50%,100%{-webkit-transform: rotate(-40deg);}80%{-webkit-transform: rotate(-37deg) translateX(-1px);} } .feet .right_foot{-webkit-animation: rightfoot .8s ease-in-out infinite; } @-webkit-keyframes rightfoot{0%,50%,100%{-webkit-transform: rotate(0deg);}80%{-webkit-transform: rotate(10deg);} } .feet .left_foot{-webkit-animation: leftfoot .8s ease-in-out infinite; } @-webkit-keyframes leftfoot{0%,50%,100%{-webkit-transform: rotate(0deg);}30%{-webkit-transform: rotate(-10deg);} }

篇幅比較大，代碼看多了會(huì)亂，如果覺得自己懶得整理的話，可以直接到我的github上下載這個(gè)簡(jiǎn)單又好玩的案例吧：https://github.com/JR93/littleHuang

PS：若需轉(zhuǎn)載，請(qǐng)注明出處！謝謝合作！

轉(zhuǎn)載于:https://www.cnblogs.com/jr1993/p/4658772.html

總結(jié)

以上是生活随笔為你收集整理的纯CSS3画出小黄人并实现动画效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：计算机网络之应用层：2、DNS域名解析系
下一篇：一次面试引发的思考(中小型网站优化思考)