CSS3 多項屬性過渡
單項屬性過渡和多項屬性過渡的工作原理其實一樣，只是在寫法上略有不同。多項屬性過渡的寫法是：在寫完第一個屬性和過渡時間之后，無論添加多少個變化的屬性，都是在逗號之后直接再次寫入過渡的屬性名和過渡時間。還有個一勞永逸的方法：直接使用關(guān)鍵字alh表示所有屬性都會應(yīng)用過渡。但是這樣寫會有危險。例如，想對前三種屬性應(yīng)用過渡效果，而第四種屬性不應(yīng)用，如果之前使用的是關(guān)鍵字all,就無法取消了，所以在使用關(guān)鍵字all時需要慎重。
【例題】創(chuàng)建多項屬性過渡
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
margin:10px;
transition:width 2s,background 2s;
}
div:hover{
width: 500px;
background: blue;
}
.d1{
background: pink;
}
.d2{
background: lightblue;
}
.d3{
background: lightgreen;
}
span{
display:block;
width: 100px;
height: 100px;
background: red;
transition:all 2s;
margin:10px;
}
span:hover{
width: 600px;
background: blue;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<span></span>
<span></span>
<span></span>
</body>
</html>
湘公網(wǎng)安備:43011102000856號 
點擊加載更多評論>>