純HTML5+CSS3制作圖片旋轉(zhuǎn)
我要評(píng)論此實(shí)例可以應(yīng)用到許多項(xiàng)目中，很實(shí)用，希望大家可以掌握。
效果圖如下：
這個(gè)效果實(shí)現(xiàn)起來(lái)其實(shí)并不困難，代碼清單如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/css">
- #liu{
- width:280px;
- height: 279px;
- background: url(shishi.png) no-repeat;
- border-radius:140px;
- -webkit-animation:run 6s linear 0s infinite;
- }
- #liu:hover{
- -webkit-animation-play-state:paused;
- }
- @-webkit-keyframes run{
- from{
- -webkit-transform:rotate(0deg);
- }
- to{
- -webkit-transform:rotate(360deg);
- }
- }
- </style>
- </head>
- <body>
- <div id="liu"></div>
- </body>
- </html>
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)文章
HTML5基于canvas實(shí)現(xiàn)的商品圖片360度旋轉(zhuǎn)瀏覽效果源碼
這是一款HTML5基于canvas實(shí)現(xiàn)的商品圖片360度旋轉(zhuǎn)瀏覽效果源碼，具有全視角查看效果?？赏ㄟ^(guò)鼠標(biāo)拖動(dòng)變換查看角度，也可通過(guò)點(diǎn)擊下方自動(dòng)播放按鈕實(shí)現(xiàn)全視角的360度播放2015-12-15
HTML5基于webkit實(shí)現(xiàn)3D立方體圖片旋轉(zhuǎn)滑塊應(yīng)用源碼
今天來(lái)分享一款HTML5 3D立方體動(dòng)畫(huà)，這個(gè)只是一個(gè)3D效果模型，你可以用圖片替換演示中的立方體4個(gè)面，這樣就可以將這款HTML5立方體旋轉(zhuǎn)動(dòng)畫(huà)改造成HTML5 3D焦點(diǎn)圖了，由于是2014-12-24
基于HTML5與TweenMax.js實(shí)現(xiàn)的可多角度旋轉(zhuǎn)3D圖片動(dòng)畫(huà)源碼
TweenMax是一個(gè)很常用的動(dòng)畫(huà)制作框架，TweenMax.js是TweenMax的JS版本，今天我們就結(jié)合TweenMax.js和HTML5來(lái)實(shí)現(xiàn)一款超炫的3D圖片墻動(dòng)畫(huà)，幾張圖片圍成一個(gè)圍墻，然后圖片2014-11-26
HTML5/CSS3實(shí)現(xiàn)的3D環(huán)形旋轉(zhuǎn)圖片墻動(dòng)畫(huà)特效源碼
今天我們要分享一款基于HTML5/CSS3的3D環(huán)形圖片墻，該HTML5圖片特效是一面3D立體的墻，墻上貼著一些圖片，墻體在不停的旋轉(zhuǎn)移動(dòng)。并且在屏幕上四處走動(dòng)，當(dāng)鼠標(biāo)滑過(guò)圖片時(shí)2014-11-04
HTML5實(shí)現(xiàn)的可鼠標(biāo)懸停3D旋轉(zhuǎn)圖片相冊(cè)效果源碼
今天要分享的這款HTML5 3D旋轉(zhuǎn)圖片相冊(cè)又非常絢麗，和之前分享的這款HTML5/CSS3 3D環(huán)形圖片墻類似，也是一面立體的圖片墻，圖片不停的切換，鼠標(biāo)滑過(guò)圖片時(shí)即可激活圖片查2014-11-03
HTML5/CSS3實(shí)現(xiàn)旋轉(zhuǎn)圖片播放焦點(diǎn)圖特效源碼
今天我們來(lái)分享一款HTML5+CSS3實(shí)現(xiàn)的旋轉(zhuǎn)圖片播放焦點(diǎn)圖特效源碼，該焦點(diǎn)圖利用CSS3的屬性實(shí)現(xiàn)了圖片旋轉(zhuǎn)的動(dòng)畫(huà)效果，既可以順時(shí)針旋轉(zhuǎn)，也可以逆時(shí)針旋轉(zhuǎn)，并且圖片旋轉(zhuǎn)也2014-10-29
采用base64圖片壓縮算法，將圖片按比例壓縮，壓縮比率可以自己調(diào)整，可擴(kuò)展為壓縮圖片后上傳，不包含上傳2017-07-04HTML5移動(dòng)開(kāi)發(fā)圖片壓縮上傳功能
移動(dòng)端上傳圖片，用戶一般都是上傳手機(jī)相冊(cè)中的圖片，而現(xiàn)在手機(jī)的拍攝質(zhì)量越來(lái)越高，一般單張照片的尺寸都在3M左右，因此需要在上傳之前，先進(jìn)行本地壓縮。下面腳本之家小2016-11-09深入研究HTML5實(shí)現(xiàn)圖片壓縮上傳功能
下面小編就為大家?guī)?lái)一篇深入研究HTML5實(shí)現(xiàn)圖片壓縮上傳功能。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家。也給大家一個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-03-25html5 canvas移動(dòng)瀏覽器上實(shí)現(xiàn)圖片壓縮上傳
這篇文章主要為大家詳細(xì)介紹了html5 canvas移動(dòng)瀏覽器上實(shí)現(xiàn)圖片壓縮上傳的相關(guān)方法，提出了解決方法，分享了解決問(wèn)題的思路，感興趣的小伙伴們可以參考一下2016-03-11
