位置:首頁(yè) > 軟件操作教程 > 編程開(kāi)發(fā) > CSS > 問(wèn)題詳情

CSS3 多項(xiàng)屬性過(guò)渡

提問(wèn)人:劉團(tuán)圓發(fā)布時(shí)間:2020-11-19

    單項(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>

image.png

繼續(xù)查找其他問(wèn)題的答案?

相關(guān)視頻回答
回復(fù)(0)
返回頂部