CSS3 多項(xiàng)屬性過(guò)渡
單項(xiàng)屬性過(guò)渡和多項(xiàng)屬性過(guò)渡的工作原理其實(shí)一樣，只是在寫(xiě)法上略有不同。多項(xiàng)屬性過(guò)渡的寫(xiě)法是：在寫(xiě)完第一個(gè)屬性和過(guò)渡時(shí)間之后，無(wú)論添加多少個(gè)變化的屬性，都是在逗號(hào)之后直接再次寫(xiě)入過(guò)渡的屬性名和過(guò)渡時(shí)間。還有個(gè)一勞永逸的方法：直接使用關(guān)鍵字alh表示所有屬性都會(huì)應(yīng)用過(guò)渡。但是這樣寫(xiě)會(huì)有危險(xiǎn)。例如，想對(duì)前三種屬性應(yīng)用過(guò)渡效果，而第四種屬性不應(yīng)用，如果之前使用的是關(guān)鍵字all,就無(wú)法取消了，所以在使用關(guān)鍵字all時(shí)需要慎重。
【例題】創(chuàng)建多項(xiàng)屬性過(guò)渡
代碼如下：
<!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號(hào) 
點(diǎn)擊加載更多評(píng)論>>