這四種方法利用css3實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果

　　CSS3中過(guò)渡(Transition)是實(shí)現(xiàn)動(dòng)畫(huà)效果的一種方式，它可以控制元素的屬性在一定的時(shí)間段內(nèi)平滑地過(guò)渡到指定的值，從而實(shí)現(xiàn)一些動(dòng)態(tài)的效果。下面是一些常用的CSS3過(guò)渡動(dòng)畫(huà)效果：

　　1.改變背景顏色

/* 定義元素的背景顏色 */
div {
background-color: #FF0000;
transition: background-color 1s ease;
}

/* 當(dāng)鼠標(biāo)懸停在元素上時(shí)，背景顏色過(guò)渡到藍(lán)色 */
div:hover {
background-color: #0000FF;
}

　　2.縮放元素

/* 定義元素的縮放屬性 */
div {
transform: scale(1);
transition: transform 1s ease;
}

/* 當(dāng)鼠標(biāo)懸停在元素上時(shí)，元素縮放為原來(lái)的兩倍 */
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屬性指定了要過(guò)渡的CSS屬性、過(guò)渡的時(shí)間和過(guò)渡的動(dòng)畫(huà)類型。當(dāng)觸發(fā)過(guò)渡時(shí)(例如，鼠標(biāo)懸停在元素上)，被選元素會(huì)平滑地從當(dāng)前狀態(tài)過(guò)渡到目標(biāo)狀態(tài)，創(chuàng)建動(dòng)態(tài)效果。您可以根據(jù)需要調(diào)整這些屬性，以創(chuàng)建不同的過(guò)渡效果。