亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

純HTML5+CSS3制作圖片旋轉(zhuǎn)

  發(fā)布時間：2016-01-12 15:47:39   作者：佚名   我要評論
這篇文章主要介紹了純HTML5+CSS3制作圖片旋轉(zhuǎn)，HTML5結(jié)合CSS3 實現(xiàn)的一些動畫特效，實現(xiàn)起來比較容易，感興趣的小伙伴們可以參考一下

此實例可以應(yīng)用到許多項目中，很實用，希望大家可以掌握。

效果圖如下：


這個效果實現(xiàn)起來其實并不困難，代碼清單如下:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>     
  2. <html lang="en">     
  3. <head>     
  4.     <meta charset="UTF-8">     
  5.     <title>Document</title>     
  6.     <style type="text/css">     
  7.         #liu{     
  8.             width:280px;     
  9.             height: 279px;     
  10.             background: url(shishi.png) no-repeat;     
  11.             border-radius:140px;     
  12.             -webkit-animation:run 6s linear 0s infinite;     
  13.         }     
  14.      
  15.         #liu:hover{     
  16.             -webkit-animation-play-state:paused;     
  17.         }     
  18.      
  19.      
  20.         @-webkit-keyframes run{     
  21.             from{     
  22.                 -webkit-transform:rotate(0deg);     
  23.             }     
  24.             to{     
  25.                 -webkit-transform:rotate(360deg);     
  26.             }     
  27.         }     
  28.      
  29.     </style>     
  30. </head>     
  31. <body>     
  32.     <div id="liu"></div>     
  33. </body>     
  34. </html>     
  35.   

1. id為liu的div就是用來展示圖片的區(qū)域，只不過這里的圖片是使用的背景圖片，并且通過設(shè)置圓角來達(dá)到圓形的效果。
2. 代碼中關(guān)鍵的部分是怎樣使得圖片無限轉(zhuǎn)動。 我們可以使用 -webkit-animation 和 @-webkit-keyframes 組合使用來完成。

-webkit-animation 是一個復(fù)合屬性，定義如下：

-webkit-animation: name duration timing-function delay iteration_count direction;

name: 是 @-webkit-keyframes 中需要指定的方法，用來執(zhí)行動畫。

duration: 動畫一個周期執(zhí)行的時長。

timing-function: 動畫執(zhí)行的效果，可以是線性的，也可以是"快速進(jìn)入慢速出來"等。

delay: 動畫延時執(zhí)行的時長。

iteration_count: 動畫循環(huán)執(zhí)行次數(shù)，如果是infinite，則無限執(zhí)行。

direction: 動畫執(zhí)行方向。

3. @-webkit-keyframes 中的from和to 兩個屬性，就是指定動畫執(zhí)行的初始值和結(jié)束值。

4. -webkit-animation-play-state:paused; 暫停動畫的執(zhí)行。

以上就是本文的全部內(nèi)容，希望對大家實現(xiàn)圖片旋轉(zhuǎn)特效有所幫助。

相關(guān)文章

最新評論