每天記錄一點點知識，日積月累下來，你會發(fā)現(xiàn)，你已經(jīng)會的比別人多！！！！！

下邊的兩塊css代碼，可以實現(xiàn)圖片360度旋轉(zhuǎn)

@keyframes rotateImage {from {transform: rotate(0deg)}to {transform: rotate(360deg)} } .content-play-cover img {animation: rotateImage 10s linear infinite;width: 300rpx;height: 300rpx;border-radius: 50%;border: 1px solid #333; }

一、復(fù)合屬性：animation: rotateImage 10s linear infinite;

- animation-name：規(guī)定需要綁定到選擇器的keyframe名稱，例子中：rotateImage

- animation-duration：規(guī)定完成動畫所花費的時間，以秒或毫秒計，例子中：10s

- animation-timing-function：規(guī)定動畫的速度曲線。有以下值：

? ? -- linear：動畫從頭到尾的速度是相同的

? ? -- ease：默認。動畫以低速開始，然后加快，在結(jié)束前變慢

? ? -- ease-in：動畫以低速開始

? ? -- ease-out：動畫以低速結(jié)束

? ? -- ease-in-out：動畫以低速開始和結(jié)束

- animation-delay：規(guī)定動畫開始之前的延遲，可選，

- animation-iteration-count：規(guī)定動畫應(yīng)該播放的次數(shù)。

? ? -- n：定義動畫播放次數(shù)的數(shù)值

? ? -- infinite：規(guī)定動畫應(yīng)該無限次播放，例子中設(shè)置

- animation-direction：規(guī)定是否應(yīng)該輪流反向播放動畫

二、@keyframes關(guān)鍵楨的定義與用法

創(chuàng)建：通過@keyframes規(guī)則，能夠創(chuàng)建動畫。

原理：將一套css樣式逐漸變化為另一套樣式。

語法：@keyframes animationname {keyframes-selector{css-styles;}}

-?animationname： 必需。定義動畫的名稱。

-?keyframes-selector ：必需。動畫時長的百分比。以下為合法的值：

? ? --? 0-100%

? ? --? from：與0%相同

? ? --? to：與100%相同

-?css-styles：必需。一個或多個合法的CSS樣式屬性

總結(jié)

以上是生活随笔為你收集整理的css3实现图片360度旋转及animation、@keyframes的详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。