国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

CSS3 動畫

CSS3 動畫

CSS3，我們可以創(chuàng)建動畫，它可以取代許多網(wǎng)頁動畫圖像，F(xiàn)lash動畫，和JAVAScripts。

CSS3 @keyframes 規(guī)則

要創(chuàng)建CSS3動畫，你將不得不了解@keyframes規(guī)則。

@keyframes規(guī)則是創(chuàng)建動畫。 @keyframes規(guī)則內(nèi)指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。

CSS3 動畫

當在?@keyframes?創(chuàng)建動畫，把它綁定到一個選擇器，否則動畫不會有任何效果。

指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：

規(guī)定動畫的名稱規(guī)定動畫的時長


實例

把 "myfirst" 動畫捆綁到 div 元素，時長：5 秒：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

注意:?您必須定義動畫的名稱和動畫的持續(xù)時間。如果省略的持續(xù)時間，動畫將無法運行，因為默認值是0。

運行程序嘗試一下

CSS3動畫是什么？

動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。

您可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。

請用百分比來規(guī)定變化發(fā)生的時間，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%。

0% 是動畫的開始，100% 是動畫的完成。

為了得到最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。


實例

當動畫為 25% 及 50% 時改變背景色，然后當動畫 100% 完成時再次改變：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
@-o-keyframes myfirst /* Opera */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>
<div></div>
<p><b>注釋：</b>當動畫完成時，會變回初始的樣式。</p>
<p><b>注意:</b> 該實例在 Internet Explorer 9 及更早 IE 版本是無效的。</p>
</body>
</html>

運行程序嘗試一下

實例

改變背景色和位置：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background:red;
            position:relative;
            animation:myfirst 5s;
            -webkit-animation:myfirst 5s; /* Safari and Chrome */
        }
        @keyframes myfirst
        {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
        }
        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
        }
    </style>
</head>
<body>
<div>css動畫</div>
</body>
</html>

運行程序嘗試一下

CSS3的動畫屬性

下面的表格列出了 @keyframes 規(guī)則和所有動畫屬性：

屬性描述CSS
@keyframes規(guī)定動畫。3
animation所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。3
animation-name規(guī)定 @keyframes 動畫的名稱。3
animation-duration規(guī)定動畫完成一個周期所花費的秒或毫秒。默認是 0。3
animation-timing-function規(guī)定動畫的速度曲線。默認是 "ease"。3
animation-delay規(guī)定動畫何時開始。默認是 0。3
animation-iteration-count規(guī)定動畫被播放的次數(shù)。默認是 1。3
animation-direction規(guī)定動畫是否在下一周期逆向地播放。默認是 "normal"。3
animation-play-state規(guī)定動畫是否正在運行或暫停。默認是 "running"。3

實例

運行myfirst動畫，設(shè)置所有的屬性：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background:red;
            position:relative;
            animation-name:myfirst;
            animation-duration:5s;
            animation-timing-function:linear;
            animation-delay:2s;
            animation-iteration-count:infinite;
            animation-direction:alternate;
            animation-play-state:running;
            /* Safari and Chrome: */
            -webkit-animation-name:myfirst;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-delay:2s;
            -webkit-animation-iteration-count:infinite;
            -webkit-animation-direction:alternate;
            -webkit-animation-play-state:running;
        }
        @keyframes myfirst
        {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
        }
        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
        }
    </style>
</head>
<body>
<div>css動畫</div>
</body>
</html>

與上面的動畫相同，但是使用了簡寫的動畫 animation 屬性：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background:red;
            position:relative;
            animation:myfirst 5s linear 2s infinite alternate;
            /* Firefox: */
            -moz-animation:myfirst 5s linear 2s infinite alternate;
            /* Safari and Chrome: */
            -webkit-animation:myfirst 5s linear 2s infinite alternate;
            /* Opera: */
            -o-animation:myfirst 5s linear 2s infinite alternate;
        }
        @keyframes myfirst
        {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
        }
        @-moz-keyframes myfirst /* Firefox */
        {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
        }
        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
        }
        @-o-keyframes myfirst /* Opera */
        {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
        }
    </style>
</head>
<body>
<p>css 動畫</p>
<div></div>
</body>
</html>

程序運行結(jié)果：



繼續(xù)學(xué)習(xí)
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s; -webkit-animation:myfirst 5s; /* Safari and Chrome */ } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } </style> </head> <body> <div>css動畫</div> </body> </html>
提交重置代碼