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

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

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

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

效果圖如下：


這個(gè)效果實(shí)現(xiàn)起來(lái)其實(shí)并不困難，代碼清單如下:

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

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

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

name: 是 @-webkit-keyframes 中需要指定的方法，用來(lái)執(zhí)行動(dòng)畫(huà)。

duration: 動(dòng)畫(huà)一個(gè)周期執(zhí)行的時(shí)長(zhǎng)。

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

delay: 動(dòng)畫(huà)延時(shí)執(zhí)行的時(shí)長(zhǎng)。

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

direction: 動(dòng)畫(huà)執(zhí)行方向。

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

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

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

相關(guān)文章

最新評(píng)論