2. 程式人生 > >CSS動畫例項：旋轉的圓角正方形

CSS動畫例項：旋轉的圓角正方形

阿新 • • 發佈：2020-08-13

      在頁面中放置一個類名為container的層作為效果呈現容器，在該層中再定義十個名為shape的層層巢狀的子層，HTML程式碼描述如下：

<div class="container">

  <div class="shape"><div class="shape"><div class="shape"><div class="shape">

  <div class="shape"><div class="shape"><div class="shape"><div class="shape">

     <div class="shape">

        <div class="shape">

        </div>

     </div>

  </div></div></div></div>

  </div></div></div></div>

</div>

分別為container和shape定義CSS樣式規則如下：

  .container

  {

     margin: 0 auto;

     width: 650px;

     height: 650px;

     position: relative;

     overflow: hidden;

     border: 4px solid rgba(255, 0, 0, 0.9);

     display: flex;

     padding: 0;

     flex: 1;

     align-items: center;

     justify-content: center;

   }

   .shape

   {

      background: radial-gradient(circle, #000, transparent) #f00;

      border: 1px solid;

      box-sizing: border-box;

      border-radius: 5%;

      padding: 20px;

   }

      在CSS樣式的作用下，這11個層在瀏覽器中顯示如圖1所示。10個層層巢狀的子層顯示為10個圓角正方形。

圖1  10個圓角正方形

現在讓這10個圓角正方形旋轉起來，編寫關鍵幀定義為：

   @keyframes turn

   {

      0%   {  transform: rotate(0deg); }

      100% {  transform: rotate(360deg); }

   }

      然後在.shape樣式定義中加上一句“animation: turn 30s infinite linear;”，此時，10個圓角正方形會旋轉起來，如圖2所示。

 

圖2  旋轉的紅色圓角正方形

      圖2中旋轉的10個正方形的背景色全部為紅色，我們想讓顏色進行些變化，在編寫一個名為rainbow（彩虹）的顏色變化的關鍵字定義如下：

   @keyframes rainbow

   {

      0%,100% { color: #f00; }

      16.667% { color: #ff0; }

      33.333% { color: #0f0; }

      50.000% { color: #0ff; }

      66.667% { color: #00f; }

      83.333% { color: #f0f; }

   }

再修改shape的樣式規則定義為：

   .shape

   {

      background: radial-gradient(circle, #000, transparent)  currentcolor;

      border: 1px solid;

      box-sizing: border-box;

      border-radius: 5%;

      padding: 20px;

      animation: turn 10s infinite linear,rainbow 10s infinite linear;

   }

      其中修改了兩處：一處是將背景顏色由紅色（#f00）改成當前色（currentcolor），另一處是在動畫屬性animation中加入了顏色變化的動畫定義。

       此時，在瀏覽器中呈現出如圖3所示的效果。

 

圖3  旋轉的變色圓角正方形

      圖3中旋轉過程中正方形雖然會改變顏色，但10個正方形的顏色仍然一樣。為了讓各個正方形顏色不同，可以為每個層定義一個變數—n，然後為顏色變化的動畫加上屬性animation-delay，它的屬性值根據變數—n進行計算。

      完整的HTML檔案內容如下。

<!DOCTYPE html>
<html>
<head>
<title>旋轉的正方形</title>
<style>
  .container
  {
     margin: 0 auto;
     width: 600px;
     height: 600px;
     position: relative;
     overflow: hidden;
     border: 4px solid rgba(255, 0, 0, 0.9);
     display: flex;
     padding: 0;
     flex: 1;
     align-items: center;
     justify-content: center;
   } 
   .shape 
   {
      background: radial-gradient(circle, #000, transparent)  currentcolor;
      border: 1px solid;
      box-sizing: border-box;
      border-radius: 5%;
      padding: 20px;
      animation: turn 30s infinite linear,
                 rainbow 30s infinite linear
           calc(30 * (10 * (10 - var(--n)) * 0.01) * -1s);
   }
   @keyframes turn 
   {
      0%   {  transform: rotate(0deg); }
      100% {  transform: rotate(360deg); }
   }
   @keyframes rainbow 
   {
      0%,100% { color: #f00; }
      16.667% { color: #ff0; }
      33.333% { color: #0f0; }
      50.000% { color: #0ff; }
      66.667% { color: #00f; }
      83.333% { color: #f0f; }
   }
</style>
</head>
<body>
<div class="container">
  <div class="shape" style="--n: 10;"><div class="shape" style="--n: 9;">
  <div class="shape" style="--n: 8;"><div class="shape" style="--n: 7;">
  <div class="shape" style="--n: 6;"><div class="shape" style="--n: 5;">
  <div class="shape" style="--n: 4;"><div class="shape" style="--n: 3;">
     <div class="shape" style="--n: 2;">
        <div class="shape" style="--n: 1;">
        </div>
     </div>
  </div></div></div></div>
  </div></div></div></div>
</div>
</body>
</html>
View Code

      在瀏覽器中開啟包含這段HTML程式碼的html檔案，可以呈現如圖4所示的旋轉效果。

 

圖4  旋轉的彩色正方形

      我們也可以採用如下的方法實現旋轉的圓角正方形。

      在頁面中放置一個類名為container的層作為效果呈現容器，在該層中再定義18個名為shape的子層，為每個子層設定三個變數：表示該子層縮放比例的變數—scale，表示該子層初始旋轉角度的變數—rotation和表示該子層背景色的變數—color。HTML程式碼描述如下：

<div class="container">

    <div class="shape" style="--scale: 0.840;--rotation: 180deg;--color:#f00"></div>

    <div class="shape" style="--scale: 0.720;--rotation: 360deg;--color:#f36"></div>

    <div class="shape" style="--scale: 0.605;--rotation: 540deg;--color:#f69"></div>

    <div class="shape" style="--scale: 0.518;--rotation: 720deg;--color:#f9c"></div>

    <div class="shape" style="--scale: 0.435;--rotation: 900deg;--color:#900"></div>

    <div class="shape" style="--scale: 0.373;--rotation: 1080deg;--color:#936"></div>

    <div class="shape" style="--scale: 0.314;--rotation: 1260deg;--color:#969"></div>

    <div class="shape" style="--scale: 0.269;--rotation: 1440deg;--color:#993"></div>

    <div class="shape" style="--scale: 0.226;--rotation: 1620deg;--color:#9c0"></div>

    <div class="shape" style="--scale: 0.193;--rotation: 1800deg;--color:#909"></div>

    <div class="shape" style="--scale: 0.163;--rotation: 1980deg;--color:#f06"></div>

    <div class="shape" style="--scale: 0.139;--rotation: 2160deg;--color:#a9a9a9"></div>

    <div class="shape" style="--scale: 0.117;--rotation: 2340deg;--color:#bdb76b"></div>

    <div class="shape" style="--scale: 0.100;--rotation: 2520deg;--color:#556b2f"></div>

    <div class="shape" style="--scale: 0.084;--rotation: 2700deg;--color:#ff8c00"></div>

    <div class="shape" style="--scale: 0.072;--rotation: 2880deg;--color:#e9967a"></div>

    <div class="shape" style="--scale: 0.061;--rotation: 3060deg;--color:#8fbc8f></div>

    <div class="shape" style="--scale: 0.052;--rotation: 3240deg;--color:#2f4f4f"></div>

</div>

      分別為container和shape定義CSS樣式規則，並定義動畫關鍵幀。

      完整的HTML程式碼如下。

<!DOCTYPE html>
<html>
<head>
<title>旋轉的圓角正方形</title>
<style>
  .container
  {
     margin: 0 auto;
     width: 500px;
     height: 500px;
     position: relative;
     overflow: hidden;
     border: 4px solid rgba(255, 0, 0, 0.9);
     display: flex;
     padding: 0;
     flex: 1;
     align-items: center;
     justify-content: center;
     background:#d8d8d8;
     border-radius: 10%;
   } 
   .shape
   {
     position: absolute;
     width: 80%;
     height: 80%;
     top: 50%;
     left: 50%;
     opacity: 0.6;
     border-radius:10%;
     animation: rotate 5s alternate infinite ease-in-out;
   }
   .shape:nth-child(1n+0) 
   {
      background: var(--color);
   }
   @keyframes rotate 
   {
       from { transform: translate(-50%, -50%) rotate(var(--rotation)) scale(var(--scale)); }
       to   { transform: translate(-50%, -50%) rotate(90deg) scale(var(--scale));  }
   }
</style>
</head>
<body>
<div class="container"> 
    <div class="shape" style="--scale: 0.840;--rotation: 180deg;--color:#f00"></div>
    <div class="shape" style="--scale: 0.720;--rotation: 360deg;--color:#f36"></div>
    <div class="shape" style="--scale: 0.605;--rotation: 540deg;--color:#f69"></div>
    <div class="shape" style="--scale: 0.518;--rotation: 720deg;--color:#f9c"></div>
    <div class="shape" style="--scale: 0.435;--rotation: 900deg;--color:#900"></div>
    <div class="shape" style="--scale: 0.373;--rotation: 1080deg;--color:#936"></div>
    <div class="shape" style="--scale: 0.314;--rotation: 1260deg;--color:#969"></div>
    <div class="shape" style="--scale: 0.269;--rotation: 1440deg;--color:#993"></div>
    <div class="shape" style="--scale: 0.226;--rotation: 1620deg;--color:#9c0"></div>
    <div class="shape" style="--scale: 0.193;--rotation: 1800deg;--color:#909"></div>
    <div class="shape" style="--scale: 0.163;--rotation: 1980deg;--color:#f06"></div>
    <div class="shape" style="--scale: 0.139;--rotation: 2160deg;--color:#a9a9a9"></div>
    <div class="shape" style="--scale: 0.117;--rotation: 2340deg;--color:#bdb76b"></div>
    <div class="shape" style="--scale: 0.100;--rotation: 2520deg;--color:#556b2f"></div>
    <div class="shape" style="--scale: 0.084;--rotation: 2700deg;--color:#ff8c00"></div>
    <div class="shape" style="--scale: 0.072;--rotation: 2880deg;--color:#e9967a"></div>
    <div class="shape" style="--scale: 0.061;--rotation: 3060deg;--color:#8fbc8f></div>
    <div class="shape" style="--scale: 0.052;--rotation: 3240deg;--color:#2f4f4f"></div>
</div>
</body>
</html>
View Code

      在瀏覽器中開啟包含這段HTML程式碼的html檔案，可以呈現如圖5所示的旋轉效果。

 

圖5  旋轉的圓角正

相關推薦

CSS動畫例項：旋轉的圓角正方形

      在頁面中放置一個類名為container的層作為效果呈現容器，在該層中再定義十個名為shape的層層巢狀的子層，HTML程式碼描述如下： <div class="container">   <div class="shape"><

14（高階）CSS動畫之：旋轉星球

方法： #earth{     width: 800px;     height: 800px;     clear: both;     background:url("earth.png") c

CSS動畫例項：Loading載入動畫效果（一）

      一些網站或者APP在載入新東西的時候，往往會給出一個好看有趣的Loading圖，大部分的Loading樣式都可以使用CSS3製作出來，它不僅比直接使用gif圖簡單方便，還能節省載入時間和空間。下面介紹常見的一些Loading動畫效果圖的製作方法。 1．圓環型Loadi

css動畫效果：實現鼠標移入菜單欄文字下出現下劃線

boa 代碼 active lock osi int 事件 type 添加 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

CSS動畫實戰：建立一個太極Loading圖

這裡主要是使用CSS的animation和偽類來構建，分析設定關鍵幀的執行順序和時間段。 效果 動畫分析 首先通過效果對動畫執行進行一下分析： 邊框的四條邊進行按順序動畫載入 。 矩形邊框變為圓行邊框。 太極圖內部圖案漸漸出現。

css動畫效果：實現滑鼠移入選單欄文字下出現下劃線

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w

JavaScript動畫例項：粒子文字

1．粒子文字的實現原理       粒子文字的實現原理是：使用兩張 canvas，一張是使用者看不到的canvas1，用來繪製文字；另一張是使用者看到的canvas2，用來根據canvas1中繪製的文字資料來生成粒子。      先在canvas1中

JavaScript動畫例項：圓點的衍生

      考慮如下的曲線方程：           R=S*sqrt(n)           α

JavaScript動畫例項：炸開的小球

1．炸開的小球       定義一個小球物件類Ball，它有6個屬性：圓心座標（x,y）、小球半徑radius、填充顏色color、圓心座標水平方向的變化量speedX、圓心座標垂直方向的變化量speedY。       Ball類定義2個方法：繪製

前端實戰專案操作：如何用純 CSS 創作一個變色旋轉動畫

程式碼解讀 定義 dom，容器中包含 9 個元素： <div class="container"> <span></span> <span></span> <spa

HTML5 CSS3 誘人的例項： 3D立方體旋轉動畫

創意來自：http://www.html5tricks.com/demo/html5-3d-cube/index.html ， 同學給我發的例子，感覺很不錯，不過實在想不出來實際的用處，但是效果很炫~效果圖：知識點：1、perspective ，transform 的複習2、

Silverlight & Blend動畫設計系列二：旋轉動畫（RotateTransform）

target width duration pac 操作 縮放 () rop pri Silverlight的基礎動畫包括偏移、旋轉、縮放、傾斜和翻轉動畫，這些基礎動畫毫無疑問是在Silverlight中使用得最多的動畫效果，其使用也是非常簡單的。相信看過上一篇《偏移動畫（

Silverlight & Blend動畫設計系列十二：三角函數（Trigonometry）動畫之自由旋轉（Free-form rotation）

name angle 最終 clas oot pos ftp 旋轉動畫 one 說到對象的旋轉，或許就會聯想到對象角度的概念。對象的旋轉實現實際上就是利用對象的角度改變來實現的位置變換，在《Silverlight & Blend動畫設計系列二：旋轉動畫（Rotate

css基礎及其例項：常用選擇器、顏色五中寫法、字型樣式、自定義字型、盒模型及其樣式設定

<html lang="en"><head>    <meta charset="UTF-8">    <title>css樣式</title>    <style> 

如何用純 CSS 創作一個變色旋轉動畫

效果預覽 線上演示 按下右側的“點選預覽”按鈕可以在當前頁面預覽，點選連結可以全屏預覽。 https://codepen.io/comehope/pen/ejZWKL 可互動視訊 此視訊是可以互動的，你可以隨時暫停視訊，編輯視訊中的程式碼。 請用 chrome, safari, edge 開啟

動畫效果：位置移動、畫面旋轉、漸變透明度、漸變尺寸縮放

<!--alpha漸變透明度動畫效果--> <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="5000" android:fillAfter="fa

前端每日實戰：2.純 CSS 創作一個矩形旋轉 loader 特效

原文地址：2.純 CSS 創作一個矩形旋轉 loader 特效 擴充套件後地址：https://scrimba.com/c/cNJVWUR  擴充套件地址：https://codepen.io/pen/   HTML程式碼： <div class="loader"&g

如何用純 CSS 創作一個方塊旋轉動畫

效果預覽 線上演示 按下右側的“點選預覽”按鈕可以在當前頁面預覽，點選連結可以全屏預覽。 https://codepen.io/comehope/pen/gjgyWm 可互動視訊 此視訊是可以互動的，你可以隨時暫停視訊，編輯視訊中的程式碼。 請用 chrome,

CSS3變形和動畫：旋轉、扭曲、縮放、位移、矩陣 、原點 transform-origin、過渡屬性 transition-property、過渡所需時間 transition-duration...

旋轉、扭曲、縮放、位移、矩陣 、原點 transform-origin、過渡屬性 transition-property、過渡所需時間 transition-duration、過渡函式 transition-timing-function、過渡延遲時間 transition-

CSS祕密花園： 沿著路徑的動畫

《CSS Secrets》是@Lea Verou最新著作，這本書講解了有關於CSS中一些小祕密。是一本CSSer值得一讀的一本書，經過一段時間的閱讀，我、@南北和@彥子一起將在W3cplus釋出一系列相關的讀後感，與大家一起分享。問題幾年前，當CSS動畫剛出來的時候是多麼的令