溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css3如何實現圓形轉動的效果”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“css3如何實現圓形轉動的效果”文章能幫助大家解決問題。
方法：1、用“border-radius:100%”設置元素為圓形；2、用“@keyframes 名稱{100%{transform:rotate(360deg);}}”設置動畫；3、用“animation:名稱 時間”給元素綁定動畫效果。
本教程操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。
border-radius 允許你設置元素的外邊框圓角。當使用一個半徑時確定一個圓形，當使用兩個半徑時確定一個橢圓。這個(橢)圓與邊框的交集形成圓角效果。
使用@keyframes規則，你可以創建動畫。
創建動畫是通過逐步改變從一個CSS樣式設定到另一個。
在動畫過程中，您可以更改CSS樣式的設定多次。
指定的變化時發生時使用％，或關鍵字"from"和"to"，這是和0％到100％相同。
0％是開頭動畫，100％是當動畫完成。
為了獲得最佳的瀏覽器支持，您應該始終定義為0％和100％的選擇器。
語法為：
@keyframes animationname {keyframes-selector {css-styles;}}animation屬性語法為：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-name 指定要綁定到選擇器的關鍵幀的名稱
animation-duration 動畫指定需要多少秒或毫秒完成
animation-timing-function 設置動畫將如何完成一個周期
animation-delay 設置動畫在啟動前的延遲間隔。
animation-iteration-count 定義動畫的播放次數。
animation-direction 指定是否應該輪流反向播放動畫。
animation-fill-mode 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。
animation-play-state 指定動畫是否正在運行或已暫停。
示例如下：
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
#example1
{
background:#dddddd;
width:100px;
height:100px;
border-radius:100%;
text-align:center;
animation:fadenum 5s;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div id="example1">
這是一個圓
</div>
<br><br>
</body>
</html>輸出結果：
關于“css3如何實現圓形轉動的效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
