如何使用純CSS實現一隻移動的小白兔動畫效果

本篇文章給大家帶來的內容是關於如何使用純CSS實現一隻移動的小白兔動畫效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

效果預覽

代碼解讀

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

<div class="rabbit"></div><div class="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(            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);    }}

大功告成！