CSS 動畫效果可以與其他 CSS 效果結(jié)合使用,以創(chuàng)建更豐富、更復(fù)雜的動畫。以下是一些建議,可以幫助你將 CSS 動畫與其他效果結(jié)合:
.box {
width: 100px;
height: 100px;
background-color: red;
transition: all 0.5s ease;
}
.box:hover {
animation: rotate 1s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
在這個例子中,當(dāng)鼠標(biāo)懸停在 .box
上時,它會先執(zhí)行一個簡單的旋轉(zhuǎn)動畫,然后再執(zhí)行另一個旋轉(zhuǎn)動畫。
transform: rotateY()
或 transform: rotateX()
)可以與動畫結(jié)合使用,以創(chuàng)建更逼真的 3D 動畫效果。例如:.box {
width: 100px;
height: 100px;
background-color: blue;
animation: flip 2s infinite linear;
}
@keyframes flip {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(180deg); }
100% { transform: rotateY(360deg); }
}
在這個例子中,.box
會沿著 Y 軸進行翻轉(zhuǎn)動畫。
:hover
、:active
等)可以與動畫結(jié)合使用,以在特定狀態(tài)下應(yīng)用動畫。例如:.button {
padding: 10px 20px;
background-color: green;
color: white;
text-decoration: none;
transition: background-color 0.3s ease;
}
.button:hover {
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
在這個例子中,當(dāng)鼠標(biāo)懸停在 .button
上時,它會執(zhí)行一個脈動動畫,使按鈕稍微放大然后縮小。
記住,結(jié)合使用多種效果時,要確保它們能夠協(xié)同工作,并且不會相互干擾。通過仔細(xì)調(diào)整動畫的持續(xù)時間、延遲和順序,你可以創(chuàng)建出令人印象深刻的視覺效果。