新聞中心
前言

前兩天我剛發(fā)布了一篇CSS3實(shí)現(xiàn)小黃人動(dòng)畫(huà)的博客,但是實(shí)現(xiàn)的CSS3動(dòng)畫(huà)是基于我在站酷網(wǎng)找到的一張小黃人的jpg格式圖片,并自己用PS摳出需要實(shí)現(xiàn)動(dòng)畫(huà)的部分,***才完成的動(dòng)畫(huà)效果。但是,其實(shí)我的初衷是想體驗(yàn)一下用圖片做動(dòng)畫(huà)的趕腳,但是找不到素材,才無(wú)奈用了最笨的方法來(lái)滿足自己的需求,本想勉強(qiáng)能看就行了??墒悄?,還是抵不住自己內(nèi)心的***,于是乎,用了一個(gè)晚上用CSS3畫(huà)出了小黃人再實(shí)現(xiàn)類似的動(dòng)畫(huà)效果。
正題
OK,大家看一下下面兩張圖有什么不同:
當(dāng)然,很多人會(huì)說(shuō),明顯大小不同,嘴巴,頭發(fā)也是不一樣的。但是其實(shí)***的不同是,用一個(gè)形象一點(diǎn)的例子就是:這是兩個(gè)孩子,***個(gè)是從超市貨架上拿的,另外一個(gè)是我自己生的。怎么生呢?——用CSS3!
那么生下來(lái)得會(huì)動(dòng)啊,不然就夭折了,所以,我就多拍了幾個(gè),就變成這樣子了:
怎么樣?雖然手腳動(dòng)畫(huà)還是不怎么神似,但人類聰明地大腦還是能看得出啥意思的吧!今天就讓我們一起學(xué)習(xí)如何生出一個(gè)小黃人來(lái)。
首先,還是直接把HTML結(jié)構(gòu)放出來(lái)給大家打量打量:
好的,每一處我都標(biāo)明了它的用途,大家可以稍微理解一下,在頭腦里有一個(gè)大概的模型或者層次結(jié)構(gòu)。
接下來(lái)就是猛料了。。。我將分步講解,一步一步實(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偽元素來(lái)實(shí)現(xiàn)吊帶上的小黑點(diǎn):
咦,開(kāi)始有模有樣了,接下來(lái)我們一鼓作氣把褲袋和一下修飾的邊邊給實(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)說(shuō)一下:
1.我把褲子放在身體里面,然后給.bodyH添加overflow:hidden,這樣我們就不用去多慮溢出怎么辦,而且很輕松就能實(shí)現(xiàn)褲子的效果;
2.可以看到褲子兩邊有兩條有弧度的曲線段,我是通過(guò)給矩形某一個(gè)角實(shí)現(xiàn)圓角效果,然后只設(shè)置與這個(gè)角相鄰的兩條邊的邊框樣式,然后旋轉(zhuǎn)一下角度就實(shí)現(xiàn)這個(gè)效果了,當(dāng)然只能實(shí)現(xiàn)簡(jiǎn)單一點(diǎn)的效果。
好的,我們繼續(xù),接下來(lái)先實(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)的,先畫(huà)眼鏡,然后黑眼珠,再畫(huà)白點(diǎn),***我才畫(huà)的眼鏡框,眼睛框我是用: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);
- }
首先也是通過(guò)矩形其中一個(gè)角實(shí)現(xiàn)圓角來(lái)模擬嘴巴形狀,再加以旋轉(zhuǎn):
結(jié)果是這樣的,那么想要達(dá)到我們預(yù)期的效果,就需要把上半部分給遮掉,所以我用:after偽元素來(lái)實(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;
- }
效果圖如下:
接下來(lái)實(shí)現(xiàn)雙手部分,這一部分不難,就是兩個(gè)圓角矩形,旋轉(zhuǎn)了角度,然后層級(jí)低于身體的層級(jí)就行,然后再通過(guò):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);
- }
效果圖如下:
再接下來(lái)就是雙腳的部分了,主要就是鞋面的設(shè)計(jì),我是通過(guò)一個(gè)矩形,然后設(shè)置不同的圓角值,加上一點(diǎn)點(diǎn)的旋轉(zhuǎn)來(lái)模擬的,這一塊的話,怎么做我都覺(jué)得不是很像,所以***差不多我就妥協(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);
- }
效果圖如下:
本來(lái)是不想畫(huà)頭發(fā)的,感覺(jué)怪難的,***嘗試了一下,還是能出個(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);
- }
- 陰影部分:
- .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ì)問(wèn):然后呢?不是還會(huì)動(dòng)的嗎?
是的,這里我就大概講一下實(shí)現(xiàn)的思路吧:
1.頭發(fā):頭發(fā)我想實(shí)現(xiàn)的是被小風(fēng)輕輕地吹起來(lái),然后很快就塌下去,所以吹起和下塌分配的時(shí)間很關(guān)鍵;
2.眼睛:眼睛我設(shè)想的場(chǎng)景是小黃人在悠閑地走路,然后不時(shí)左右看一下兩邊的風(fēng)景,所以眼睛轉(zhuǎn)動(dòng)很悠哉,所以分配的時(shí)間可以稍微長(zhǎng)一點(diǎn)點(diǎn);
3.嘴巴:讓嘴巴動(dòng)起來(lái)確實(shí)比較難,因?yàn)橐獎(jiǎng)拥脑?,遮罩也得?shí)時(shí)跟著改變,而且不能露餡,所以***實(shí)現(xiàn)的是當(dāng)它往左邊看了一下之后賣(mài)了一下萌;
4.雙手和雙腳:這部分確實(shí)很難逼真,本來(lái)腳就不是正常的走路狀態(tài),所以只能按卓別林老爺爺?shù)淖呗贩绞侥M一下,而且左右腳動(dòng)作是緊接實(shí)現(xiàn)而不是同步實(shí)現(xiàn)。雙手的話,我是簡(jiǎn)單模擬人在走路時(shí)有擺手的自然慣性,而且是左腳配右手,右腳配左手??紤]到它的雙手是放在背后的,所以我的擺動(dòng)幅度設(shè)置為非常小,有效果但不明顯。
OK,我就直接把動(dòng)畫(huà)代碼放上來(lái)吧:
- .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);
- &n
網(wǎng)頁(yè)題目:純CSS3畫(huà)出小黃人并實(shí)現(xiàn)動(dòng)畫(huà)效果
網(wǎng)頁(yè)路徑:http://m.fisionsoft.com.cn/article/djphjdg.html


咨詢
建站咨詢
