您好,登錄后才能下訂單哦!
這篇文章主要介紹怎么用純CSS實現(xiàn)一只移動的小白兔動畫效果,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
代碼解讀
定義dom,頁面中包含2個元素,分別代表兔子和云朵:
<divclass="rabbit"></div>
<divclass="clouds"></div>
居中顯示:
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(midnightblue,black);
font-size:30px;
}
畫出兔子的身體:
.rabbit{
width:5em;
height:3em;
color:whitesmoke;
background:currentColor;
border-radius:70%90%60%50%;
}
用徑向漸變畫出兔子的眼睛:
.rabbit{
background:
radial-gradient(
circleat4.2em1.4em,
#3330.15em,
transparent0.15em
),/*eye*/
currentColor;
}
用偽元素畫出兔子的右耳:
.rabbit::before{
content:'';
position:absolute;
width:0.75em;
height:2em;
background-color:currentColor;
border-radius:50%100%00;
transform:rotate(-30deg);
top:-1em;
right:1em;
}
用陰影畫出兔子的左耳:
.rabbit::before{
border:0.1emsolid;
border-color:gainsborotransparenttransparentgainsboro;
box-shadow:-0.5em00-0.1em;
}
用偽元素畫出兔子的尾巴:
.rabbit::after{
content:'';
position:absolute;
width:1em;
height:1em;
background-color:currentColor;
border-radius:50%;
left:-0.3em;
top:0.5em;
}
用陰影畫出兔子的腿:
.rabbit::after{
box-shadow:
0.5em1em0,
4em1em0-0.2em,
4em1em0-0.2em;
}
畫出兔子的影子:
.rabbit{
box-shadow:-0.2em1em0-0.75em#333;
}
畫出一個云朵:
.clouds{
width:2em;
height:2em;
color:whitesmoke;
background:currentColor;
border-radius:100%100%00;
transform:translate(0,-5em);
}
.clouds::before,
.clouds::after{
content:'';
position:absolute;
background-color:currentColor;
bottom:0;
}
.clouds::before{
width:1.25em;
height:1.25em;
border-radius:100%100%0100%;
left:-30%;
}
.clouds::after{
width:1.5em;
height:1.5em;
border-radius:100%100%100%0;
right:-30%;
}
用陰影再畫2個云朵:
.rabbit{
z-index:1;
}
.clouds,
.clouds::before,
.clouds::after{
box-shadow:
5em2em0-0.3em,
-2em2em00;
}
接下來制作動畫效果。
增加兔子跳動的動畫:
.rabbit{
animation:hop3slinearinfinite;
}
@keyframeshop{
20%{
transform:rotate(-10deg)translate(1em,-2em);
box-shadow:-0.2em1em0-1em#333;
}
40%{
transform:rotate(10deg)translate(3em,-4em);
box-shadow:-0.2em3.25em0-1.1em#333;
}
60%,75%{
transform:rotate(0deg)translate(4em,0);
box-shadow:-0.2em1em0-0.75em#333;
}
}
增加兔子的腿的伸縮動畫:
.rabbit::after{
animation:kick3sinfinitelinear;
}
@keyframeskick{
40%{
box-shadow:
0.5em2em0,
4.2em1.75em0-0.2em,
4.4em1.9em0-0.2em;
}
}
增加云朵飄動的動畫:
.clouds{
animation:cloudy3sinfinitelinearforwards;
filter:opacity(0);
}
@keyframescloudy{
40%{
transform:translate(-3em,-5em);
filter:opacity(0.75);
}
55%{
transform:translate(-4em,-5em);
filter:opacity(0);
}
}
以上是“怎么用純CSS實現(xiàn)一只移動的小白兔動畫效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。