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