CSS好看的動(dòng)畫(huà)代碼

/* 首先設(shè)置動(dòng)畫(huà)的樣式 */
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/* 將動(dòng)畫(huà)應(yīng)用到元素上 */
.box {
animation: pulse 1s ease-in-out infinite;
}
/* 如果你想讓動(dòng)畫(huà)停止，可以使用animation-play-state屬性 */
.box:hover {
animation-play-state: paused;
}

上面的動(dòng)畫(huà)代碼使用了CSS的@keyframes規(guī)則，來(lái)定義動(dòng)畫(huà)的樣式。首先需要定義動(dòng)畫(huà)名稱和動(dòng)畫(huà)過(guò)程，然后將動(dòng)畫(huà)應(yīng)用到需要?jiǎng)赢?huà)效果的元素上。在本例中，我們定義了一個(gè)名為pulse的動(dòng)畫(huà)，讓元素縮小和放大。接著將這個(gè)動(dòng)畫(huà)應(yīng)用到class為box的元素上。最后，我們使用:hover偽類和animation-play-state屬性，使得鼠標(biāo)懸浮在元素上時(shí)動(dòng)畫(huà)停止。

這個(gè)動(dòng)畫(huà)效果可以用在各種設(shè)計(jì)中，比如按鈕的縮放效果，圖片的放大效果等等。只需要將動(dòng)畫(huà)應(yīng)用到需要?jiǎng)赢?huà)效果的元素上，并根據(jù)實(shí)際需求來(lái)調(diào)整動(dòng)畫(huà)的樣式，就可以創(chuàng)造出各種視覺(jué)效果。