掌握CSS基礎，用簡單的代碼製作令人驚艷的旋轉動畫！

以下是一個簡單的示例，可以使用CSS實現360度圓周率的旋轉動畫：HTML部分：

<div class="circle"></div>

CSS部分：

.circle {
  width: 100px;
  height: 100px;
  background-color: #f00;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

解釋：首先，我們創建一個具有50％圓形邊框半徑的div，並將其顏色設置為紅色。

然後，我們定義了一個旋轉動畫，該動畫將div從0度旋轉到360度。 我們使用CSS的@keyframes屬性定義了該動畫，

將其命名為“spin”，並指定動畫持續時間1秒，線性動畫，無限循環。 最後，我們將動畫應用於div上，

使用animation屬性設置動畫名稱“spin”。

arrow
arrow
    文章標籤
    css html 網頁設計 前端設計 javascript 360度 旋轉動畫 CSS動畫技巧 網頁元素動畫效果 網頁設計基礎 前端開發教學 動畫效果設計 CSS3設計技巧 前端編程教學 網頁動畫特效 互動式設計網頁 動態網頁特效 網頁美學設計 網頁美學養成 創意設計與開發
    全站熱搜

    jk-mimo 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄