CSS3 實(shí)現(xiàn)動(dòng)畫
通過(guò)@keyf「ames規(guī)則可以創(chuàng)建動(dòng)畫，原理是將一套CSS樣式逐步從當(dāng)前的樣式更改為新的樣式。
使用@keyframes創(chuàng)建動(dòng)畫時(shí)，需要把它綁定到一個(gè)選擇器，否則動(dòng)畫不會(huì)有任何效果。需要指定至少兩個(gè)CSS3的動(dòng)畫屬性：規(guī)定動(dòng)畫的名稱，規(guī)定動(dòng)畫的時(shí)長(zhǎng)。
下面通過(guò)一個(gè)實(shí)例來(lái)理解CSS3動(dòng)畫。
【例題】創(chuàng)建CSS3動(dòng)畫
代碼如下：
<!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>
湘公網(wǎng)安備:43011102000856號(hào) 
點(diǎn)擊加載更多評(píng)論>>