| 屬性 | 意義 |
|---|---|
| transition-property | 哪些屬性要過(guò)渡 |
| transition-duration | 動(dòng)畫(huà)時(shí)間 |
| transition-timing-function | 動(dòng)畫(huà)變化曲線（緩動(dòng)效果） |
| transition-delay | 延遲時(shí)間 |
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta http-equiv="X-UA-Compatible" content="IE=edge">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>動(dòng)畫(huà)過(guò)渡/title>
style>
.box {
width: 200px;
height: 200px;
background-color: black;
transition: width 5s linear 0s;
}
.box:hover {
width: 500px;
}
/style>
/head>
body>
div class="box">
/div>
/body>
/html>
就是需要過(guò)渡的的加屬性值transition，第一個(gè)值為變化的屬性
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta http-equiv="X-UA-Compatible" content="IE=edge">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>動(dòng)畫(huà)過(guò)渡/title>
style>
.box {
width: 200px;
height: 200px;
background-color: black;
transition: width 5s linear 0s;
}
.box:hover {
width: 500px;
}
.box1{
width: 200px;
height: 200px;
background-color: blue;
transition: all 5s linear 0s;
}
.box1:hover {
width: 400px;
height: 200px;
background-color: greenyellow;
border-radius: 50%;
}
/style>
/head>
body>
div class="box">/div>
div class="box1">/div>
/body>
/html>
transition-timing-function：ease；
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta http-equiv="X-UA-Compatible" content="IE=edge">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>動(dòng)畫(huà)過(guò)渡/title>
style>
* {
margin: 0;
padding: 0;
}
.box1 {
border:1px solid black;
}
.box1 p{
width: 50px;
height: 50px;
background-color: blue;
position: relative;
left: 0;
margin-bottom: 10px;
transition: left 5s linear 0s;
}
.box1 p:nth-child(2) {
transition-timing-function: ease;
}
.box1 p:nth-child(3) {
transition-timing-function: ease-in;
}
.box1 p:nth-child(4) {
transition-timing-function: ease-out;
}
.box1 p:nth-child(5) {
transition-timing-function: ease-in-out;
}
.box1:hover p {
left: 100px;
}
/style>
/head>
body>
div class="box1">
p>/p>
p>/p>
p>/p>
p>/p>
p>/p>
/div>
/body>
/html>
到此這篇關(guān)于CSS3使用過(guò)度動(dòng)畫(huà)和緩動(dòng)效果案例講解的文章就介紹到這了,更多相關(guān)CSS3使用過(guò)度動(dòng)畫(huà)和緩動(dòng)效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
標(biāo)簽：滄州 混顯 萊蕪 鶴壁 廣安 邵陽(yáng) 賀州 貴州
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《CSS3使用過(guò)度動(dòng)畫(huà)和緩動(dòng)效果案例講解》，本文關(guān)鍵詞 CSS3,使用,過(guò)度,動(dòng)畫(huà),和緩,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。