本篇文章給大家?guī)淼膬?nèi)容是關(guān)于如何使用純CSS實現(xiàn)一只移動的小白兔動畫效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

效果預(yù)覽

代碼解讀

定義 dom，頁面中包含 2 個元素，分別代表兔子和云朵：

<div></div>
<div></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(
????????????circle?at?4.2em?1.4em,
????????????#333?0.15em,
????????????transparent?0.15em
????????),?/*?eye?*/
????????currentColor;
}

用偽元素畫出兔子的右耳：

.rabbit::before?{
????content:?'';
????position:?absolute;
????width:?0.75em;
????height:?2em;
????background-color:?currentColor;
????border-radius:?50%?100%?0?0;
????transform:?rotate(-30deg);
????top:?-1em;
????right:?1em;
}

用陰影畫出兔子的左耳：

.rabbit::before?{
????border:?0.1em?solid;
????border-color:?gainsboro?transparent?transparent?gainsboro;
????box-shadow:?-0.5em?0?0?-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.5em?1em?0,
????????4em?1em?0?-0.2em,
????????4em?1em?0?-0.2em;
}

畫出兔子的影子：

.rabbit?{
????box-shadow:?-0.2em?1em?0?-0.75em?#333;
}

畫出一個云朵：

.clouds?{
????width:?2em;
????height:?2em;
????color:?whitesmoke;
????background:?currentColor;
????border-radius:?100%?100%?0?0;
????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%?0?100%;
????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:?
????5em?2em?0?-0.3em,
????-2em?2em?0?0;
}

接下來制作動畫效果。
增加兔子跳動的動畫：

.rabbit?{
????animation:?hop?3s?linear?infinite;
}

@keyframes?hop?{
????20%?{
????????transform:?rotate(-10deg)?translate(1em,?-2em);
????????box-shadow:?-0.2em?1em?0?-1em?#333;
????}

????40%?{
????????transform:?rotate(10deg)?translate(3em,?-4em);
????????box-shadow:?-0.2em?3.25em?0?-1.1em?#333;
????}

????60%,?75%?{
????????transform:?rotate(0deg)?translate(4em,?0);
????????box-shadow:?-0.2em?1em?0?-0.75em?#333;
????}
}

增加兔子的腿的伸縮動畫：

.rabbit::after?{
????animation:?kick?3s?infinite?linear;
}

@keyframes?kick?{
????40%?{
????????box-shadow:?
????????????0.5em?2em?0,
????????????4.2em?1.75em?0?-0.2em,
????????????4.4em?1.9em?0?-0.2em;
????}
}

增加云朵飄動的動畫：

.clouds?{
????animation:?cloudy?3s?infinite?linear?forwards;
????filter:?opacity(0);
}

@keyframes?cloudy?{
????40%?{
????????transform:?translate(-3em,?-5em);
????????filter:?opacity(0.75);
????}

????55%?{
????????transform:?translate(-4em,?-5em);
????????filter:?opacity(0);
????}
}

大功告成！

相關(guān)推薦：

如何使用CSS實現(xiàn)貨車loader的效果

怎么用css樣式制作好看的表單樣式？（代碼示例）

網(wǎng)頁加載時樣式效果css如何實現(xiàn)？（多種樣式示例）

以上是如何使用純CSS實現(xiàn)一只移動的小白兔動畫效果的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！