溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“css3如何實現一個旋轉的動畫”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
實現方法：1、使用“@keyframes 動畫名稱 {50% {transform: rotate(旋轉角度);}”語句創建旋轉動畫；2、使用“元素{animation:動畫名稱 時間 infinite;}”語句將旋轉動畫應用于指定元素中。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css3實現一個旋轉的動畫
1、想要利用css3實現動畫就需要使用animation屬性和“@keyframes”規則。
@keyframes是CSS3的一種規則，可以用來定義CSS動畫的一個周期的行為，可以創建簡單的動畫。
動畫與轉換類似，因為它們都是隨時間改變CSS屬性的表示值。主要區別在于，當屬性值更改時（例如，當懸停時屬性值發生改變時），轉換會隱式的觸發，但在應用動畫屬性時會顯式執行動畫。因此，動畫需要顯示動畫屬性的顯式值。這些值是在@keyframes規則中指定的動畫關鍵幀定義的。因此，@keyframes規則里是由一組封裝的CSS樣式規則組成的，這些規則描述了屬性值如何隨時間變化。
然后，使用不同的CSS animation（動畫）屬性，可以控制動畫的許多不同方面，包括動畫迭代的次數，是否在開始和結束值之間交替，以及動畫是否應該運行或暫停。動畫也可以延遲其開始時間。
語法：
/* 定義動畫*/
@keyframes 動畫名稱{
/* 樣式規則*/
}
/* 將它應用于元素 */
.element {
animation-name: 動畫名稱（在@keyframes中已經聲明好的）;
/* 或使用動畫簡寫屬性*/
animation: 動畫名稱 1s ...
}2、在“@keyframes”規則中使用transform: rotate(旋轉角度)控制旋轉動作。
實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: pink;
margin: 100px;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove {
50% {
transform: rotate(360deg);
}
}
@-webkit-keyframes mymove{ /* Safari and Chrome */
50% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
“css3如何實現一個旋轉的動畫”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
