首頁  >  文章  >  web前端  >  css3怎麼達到圓形轉動的效果

css3怎麼達到圓形轉動的效果

WBOY
WBOY原創
2022-03-22 12:17:193010瀏覽

方法:1、用「border-radius:100%」設定元素為圓形;2、用「@keyframes 名稱{100%{transform:rotate(360deg);}}」設定動畫;3 、用「animation:名稱時間」給元素綁定動畫效果。

css3怎麼達到圓形轉動的效果

本教學操作環境:windows10系統、CSS3&&HTML5版、Dell G3電腦。

css3怎麼實現圓形轉動的效果

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怎麼達到圓形轉動的效果

(學習影片分享:css視頻教程

以上是css3怎麼達到圓形轉動的效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn