溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Animation功能中實現動畫的方法
方法 | 屬性值的變化速度 |
linear | 在動畫開始與結束時以同樣速度驚醒改變 |
ease-in | 動畫開始時速度很慢，然后速度沿曲線值進行加快 |
ease-out | 動畫開始時速度很快，然后速度沿曲線值進行放慢 |
ease | 動畫開始時速度很慢，然后速度沿曲線值進行加快，然后再沿曲線值進行放慢 |
ease-in-out | 動畫開始時速度很慢，然后速度沿曲線值進行加快，然后再沿曲線值進行放慢 |
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<htmlxmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type”content=“text/html; charset=gb2312”/>
<title>實現動畫的各種方法的比較示例</title>
</head>
<styletype=“text/css”>
@keyframesmycolor{
0%{
width:100px;
height:100px;
}
100%{
width:500px;
height:500px;
}
}
div{
background-color:red;
width:500px;
height:500px;
animation-name:mycolor;
animation-duration:5s;
animation-timing-function:ease-out;
}
</style>
<body>
<div>
</div>
</body>
</html>
通過以上代碼我們可以看出Animations功能中各種實現的方法的區別，該示例中有一個div元素，頁面打開時，該div元素在5秒內從長100px、寬100px擴大到長500px、寬500px，通過改變Animation-timing-function屬性的屬性值，然后觀察div元素額長度和寬度再整個動畫中的變化速度，可以看出實現動畫的各種方法之間的區別。
最后介紹下如何使用animation功能來實現網頁設計中的一種經常使用的動畫效果——網頁的淡入效果。通過再開始幀與結束幀中改變頁面的opacity屬性的屬性值來實現頁面淡入的效果。代碼如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<htmlxmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type”content=“text/html; charset=gb2312”/>
<title>實現網頁淡入的效果示例</title>
</head>
<styletype=“text/css”>
@keyframesfadein{
0%{
opacity:0;
background-color:white;
}
100%{
opacity:1;
background-color:white;
}
}
</style>
<body>
示例文字
</body>
</html>
歡迎加入技術QQ群：364595326
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
