1. 程式人生 > >CSS3圖片動畫展示----心跳

CSS3圖片動畫展示----心跳

doc css屬性 dir flash 除了 add iteration 時長 fad

我們可以創建動畫,它可以取代許多網頁動畫圖像,Flash動畫,和JAVAScripts。

什麽是動畫?

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

您可以改變任意多的樣式任意多的次數。

用百分比來規定變化發生的時間,或用關鍵詞 "from" 和 "to",等同於 0% 和 100%。

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

為了得到最佳的瀏覽器支持,您應該始終定義 0% 和 100% 選擇器。

這裏CSS3 @keyframes 規則動畫Css3 Transform變形旋轉屬性是兩種不同的動畫形式。

這裏不要記混(我總是迷糊了)。兩者結合使用簡直好的不要不要的。後面會有演示。

CSS3 @keyframes 規則動畫:

位置,顏色,大小等等各種CSS屬性都可以變換

Css3 Transform變形旋轉:在原地的放大,旋轉,縮放等等

好了廢話不多說,來試驗下:

當在 @keyframes 創建動畫,需要將它綁定到一個選擇器,否則動畫不會有任何效果。

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

1. 規定動畫的名稱

2. 規定動畫的時長

舉個栗子你就懂了:

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>CSS動畫</title>
 5     <style>
 6     .div
{ 7 width: 100px; 8 height: 100px; 9 background: rgba(90,25,140,.3); 10 } 11 #godownout{ 12 animation: fadeOutDown 5s; 13 } 14 @keyframes 15 { 16 0%{background:rgba(90,50,140,.3);} 17 45%{background:rgba(0,0,0,.3);} 18 75%{background
:rgba(255,255,50,.3);} 19 100%{background:rgba(90,145,140,.3);} 20 } 21 </style> 22 </head> 23 <body> 24 <div id="godownout" class="div"></div> 25 </body> 26 </html>

效果是這個樣子的,是沒有加動畫的,因為沒有指定動畫的名字:

技術分享圖片

那我們把動畫名字加進去:

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>CSS動畫</title>
 5     <style>
 6     .div{
 7         width: 100px;
 8         height: 100px;
 9         background: rgba(90,25,140,.3);
10     }
11     #godownout{
12         animation: fadeOutDown 5s;
13     }
14     @keyframes fadeOutDown
15     {
16         0%{background:rgba(90,50,140,.3);}
17         45%{background:rgba(0,0,0,.3);}
18         75%{background:rgba(255,255,50,.3);}
19         100%{background:rgba(90,145,140,.3);}
20     }
21     </style>
22 </head>
23 <body>
24     <div id="godownout" class="div"></div>
25 </body>
26 </html>

控制動畫的部分:

 1 #godownout{
 2         animation: fadeOutDown 5s;
 3     }
 4     @keyframes fadeOutDown    
 5     {
 6         0%{background:rgba(90,50,140,.3);}
 7         45%{background:rgba(0,0,0,.3);}
 8         75%{background:rgba(255,255,50,.3);}
 9         100%{background:rgba(90,145,140,.3);}
10     }

擔心會弄混,所以id給的是godownout。動畫名字是fadeOutDown。animation至少帶兩個參數,一個是動畫的名字,還有一個就是動畫所用的時間。下圖為運行結果:

技術分享圖片

好了動起來了。為了增加它的效果可以讓它再多一點變化,比如變大變小?(這裏圖片如果是png的,就可以看到背景也在變化了,比較懶,就沒有去找png圖片了。後面還有故事,所以就不刪背景顏色了。):

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>CSS動畫</title>
 5     <style>
 6     .div{
 7         width: 100px;
 8         height: 100px;
 9         background: rgba(90,25,140,.3);
10     }
11     #godownout{
12         animation: fadeOutDown 3s;
13     }
14     @keyframes fadeOutDown  
15     {
16         0%{background:rgba(90,50,140,.3);}
17         15%{background:rgba(0,0,0,.3);width:200px;height:200px;}
18         50%{background:rgba(0,0,0,.3);width:100px;height:100px;}
19         75%{background:rgba(255,255,50,.3);width:200px;height:200px;}
20         100%{background:rgba(90,145,140,.3);width:100px;height:100px;}
21     }
22     </style>
23 </head>
24 <body>
25     <div  class="div"><img id="godownout" src="http://pic2.ooopic.com/12/42/88/24b3OOOPIC19_1024.jpg" width="100px" height="100px"></div>
26 </body>
27 </html>

心動一下咯:

技術分享圖片

是不是沒有flash也可以做動畫了呢? 有點小激動,那接下來就對知識點進行一個歸納,都可以去嘗試下子。

下面的表格列出了 @keyframes 規則和所有動畫屬性:

屬性 描述 CSS
@keyframes 規定動畫。 3
animation 所有動畫屬性的簡寫屬性,除了 animation-play-state 屬性。 3
animation-name 規定 @keyframes 動畫的名稱。 3
animation-duration 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。 3
animation-timing-function 規定動畫的速度曲線。默認是 "ease"。 3
animation-delay 規定動畫何時開始。默認是 0 3
animation-iteration-count 規定動畫被播放的次數。默認是 1。 3
animation-direction 規定動畫是否在下一周期逆向地播放。默認是 "normal"。 3
animation-play-state 規定動畫是否正在運行或暫停。默認是 "running" 3
設置所有的屬性:
 1 #godownout{
 2         animation-name: fadeOutDown;
 3                 animation-duration: 5s;
 4                 animation-timing-function: linear;
 5                 animation-delay: 2s;
 6                 animation-iteration-count: infinite;
 7                 animation-direction: alternate;
 8                 animation-play-state: running;
 9               /* Safari 與 Chrome: */
10                -webkit-animation-name: myfirst;
11                -webkit-animation-duration: 5s;
12                -webkit-animation-timing-function: linear;
13                -webkit-animation-delay: 2s;
14                -webkit-animation-iteration-count: infinite;
15                -webkit-animation-direction: alternate;
16                -webkit-animation-play-state: running;
17     }

簡寫方式:

1 #godownout{
2     animation: fadeOutDown 5s linear infinite alternate running;
3     /* Safari 與 Chrome: */
4     -webkit-animation: fadeOutDown 5s linear infinite alternate running;
5     }

CSS3圖片動畫展示----心跳