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

CSS3 實(shí)現(xiàn)動(dòng)畫(huà)

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

    通過(guò)@keyf「ames規(guī)則可以創(chuàng)建動(dòng)畫(huà)，原理是將一套CSS樣式逐步從當(dāng)前的樣式更改為新的樣式。 

    使用@keyframes創(chuàng)建動(dòng)畫(huà)時(shí)，需要把它綁定到一個(gè)選擇器，否則動(dòng)畫(huà)不會(huì)有任何效果。需要指定至少兩個(gè)CSS3的動(dòng)畫(huà)屬性：規(guī)定動(dòng)畫(huà)的名稱(chēng)，規(guī)定動(dòng)畫(huà)的時(shí)長(zhǎng)。

    下面通過(guò)一個(gè)實(shí)例來(lái)理解CSS3動(dòng)畫(huà)。

    【例題】創(chuàng)建CSS3動(dòng)畫(huà)

    代碼如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.d1{

width: 200px;

height: 200px;

background: blue;

animation:myFirstAni 5s;

transform: rotate(0deg);

margin:20px;

}

@keyframes myFirstAni{

0%{margin-left: 0px;background: blue;transform: rotate(0deg);}

50%{margin-left: 500px;background: red;transform: rotate(720deg);}

100%{margin-left: 0px;background: blue;transform: rotate(0deg);}

}

.d2{

width: 200px;

height: 200px;

background: red;

animation:mySecondtAni 5s;

transform: rotate(0deg);

margin:20px;

}

@keyframes mySecondtAni{

0%{margin-left: 0px;background: red;transform: rotateY(0deg);}

50%{margin-left: 500px;background: blue;transform: rotateY(720deg);}

100%{margin-left: 0px;background: red;transform: rotateY(0deg);}

}

</style>

</head>

<body>

<div></div>

<div></div>

</body>

</html>

image.png

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

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