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