CSS3中過渡(Transition)是實(shí)現(xiàn)動(dòng)畫效果的一種方式,它可以控制元素的屬性在一定的時(shí)間段內(nèi)平滑地過渡到指定的值,從而實(shí)現(xiàn)一些動(dòng)態(tài)的效果。下面是一些常用的CSS3過渡動(dòng)畫效果:
1.改變背景顏色
/* 定義元素的背景顏色 */
div {
background-color: #FF0000;
transition: background-color 1s ease;
}
/* 當(dāng)鼠標(biāo)懸停在元素上時(shí),背景顏色過渡到藍(lán)色 */
div:hover {
background-color: #0000FF;
}
2.縮放元素
/* 定義元素的縮放屬性 */
div {
transform: scale(1);
transition: transform 1s ease;
}
/* 當(dāng)鼠標(biāo)懸停在元素上時(shí),元素縮放為原來的兩倍 */
div:hover {
transform: scale(2);
}
3.淡入淡出元素
/* 定義元素的不透明度 */
div {
opacity: 1;
transition: opacity 1s ease;
}
/* 當(dāng)鼠標(biāo)懸停在元素上時(shí),元素淡出 */
div:hover {
opacity: 0;
}
4.移動(dòng)元素
/* 定義元素的位置 */
div {
position: relative;
left: 0px;
transition: left 1s ease;
}
/* 當(dāng)鼠標(biāo)懸停在元素上時(shí),元素向右移動(dòng)100像素 */
div:hover {
left: 100px;
}
在這些例子中,transition屬性指定了要過渡的CSS屬性、過渡的時(shí)間和過渡的動(dòng)畫類型。當(dāng)觸發(fā)過渡時(shí)(例如,鼠標(biāo)懸停在元素上),被選元素會(huì)平滑地從當(dāng)前狀態(tài)過渡到目標(biāo)狀態(tài),創(chuàng)建動(dòng)態(tài)效果。您可以根據(jù)需要調(diào)整這些屬性,以創(chuàng)建不同的過渡效果。