純HTML5+CSS3製作圖片旋轉-css教學-PHP中文網

首頁

web前端

css教學

純HTML5+CSS3製作圖片旋轉

不言

Jun 05, 2018 pm 03:00 PM

css3 html5 圖片旋轉

這篇文章主要介紹了純HTML5 CSS3製作圖片旋轉，HTML5結合CSS3 實現的一些動畫特效，實現起來比較容易，感興趣的小伙伴們可以參考一下

此實例可以應用到許多專案中，很實用，希望大家可以掌握。

效果圖如下：

這個效果實現起來其實並不困難，程式碼清單如下:

##XML/HTML Code複製內容到剪貼簿

<!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>
    <p id="liu"></p>
</body>
</html>

登入後複製

1. id為liu的p就是用來展示圖片的區域，只不過這裡的圖片是使用的背景圖片，並且透過設定圓角來達到圓形的效果。

2. 程式碼中關鍵的部分是怎樣使得圖片無限轉動。我們可以使用 -webkit-animation 和 @-webkit-keyframes 組合使用來完成。

-webkit-animation 是複合屬性，定義如下：

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

name: 是

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

duration: 動畫一個週期執行的長度。

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

delay: 動畫延時執行的時長。

iteration_count: 動畫迴圈執行次數，如果是infinite，則無限執行。

direction: 動畫執行方向。