欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3 中的@keyframes介紹

  發(fā)布時間：2014-09-02 10:29:57   作者：佚名   我要評論
CSS3新增動畫屬性“@keyframes”，從字面就可以看出其含義——關(guān)鍵幀，這與Flash中的含義一致。利用CSS3制作動畫效果其原理與Flash一樣，我們需要定義關(guān)鍵幀處的狀態(tài)效果，由CSS3來驅(qū)動產(chǎn)生動畫效果。

語法

@keyframes animationname {keyframes-selector {css-styles;}}
animationname 必需。定義動畫的名稱。
keyframes-selector
必需。動畫時長的百分比。
合法的值：
0-100%
from（與 0% 相同）
to（與 100% 相同）
css-styles 必需。一個或多個合法的 CSS 樣式屬性。

定義和用法
通過 @keyframes 規(guī)則，您能夠創(chuàng)建動畫。
創(chuàng)建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。
在動畫過程中，您能夠多次改變這套 CSS 樣式。
以百分比來規(guī)定改變發(fā)生的時間，或者通過關(guān)鍵詞 "from" 和 "to"，等價于 0% 和 100%。
0% 是動畫的開始時間，100% 動畫的結(jié)束時間。
為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。
注釋：請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定。

目前瀏覽器都不支持 @keyframes 規(guī)則。
Firefox 支持替代的 @-moz-keyframes 規(guī)則。
Opera 支持替代的 @-o-keyframes 規(guī)則。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 規(guī)則。

例：


復(fù)制代碼
代碼如下:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}</p> <p>@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}</p> <p>@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}</p> <p>@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}</p> <p>@-o-keyframes mymove /* Opera */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body></p> <p><p><b>注釋：</b>本例在 Internet Explorer 中無效。</p></p> <p><div></div></p> <p></body>
</html>

相關(guān)文章

最新評論