每天記錄一點點知識，日積月累下來，你會發現，你已經會的比別人多！！！！！

下邊的兩塊css代碼，可以實現圖片360度旋轉

@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; }

一、復合屬性：animation: rotateImage 10s linear infinite;

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

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

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

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

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

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

? ? -- ease-out：動畫以低速結束

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

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

- animation-iteration-count：規定動畫應該播放的次數。

? ? -- n：定義動畫播放次數的數值

? ? -- infinite：規定動畫應該無限次播放，例子中設置

- animation-direction：規定是否應該輪流反向播放動畫

二、@keyframes關鍵楨的定義與用法

創建：通過@keyframes規則，能夠創建動畫。

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

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

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

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

? ? --? 0-100%

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。