CSS動畫實例：旋轉的葉片

時間 2020-08-21

標籤 css 動畫實例旋轉葉片欄目 CSS 简体版

原文原文鏈接

在頁面中放置一個類名爲container的層做爲容器，在該層中再定義一個名爲shape的子層，HTML代碼描述以下：html

<div class="container">瀏覽器

<div class="shape"></div>ide

</div>動畫

分別爲container和shape定義CSS樣式規則以下：spa

.container3d

{code

margin: 0 auto;orm

width: 500px;htm

height: 500px;blog

position: relative;

overflow: hidden;

display: block;

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

background:#d8d8d8;

border-radius: 10%;

}

.shape

{

position: absolute;

width: 80%;

height: 45%;

left: 10%;

bottom:30%;

border-radius: 100% 4px;

opacity: 0.6;

background: #fffe33;

}

在CSS樣式的做用下，這2個層在瀏覽器中顯示如圖1所示，其中子層顯示爲1個淡黃色的葉片。

圖1 葉片

若將圖1所示的葉片每隔10°複製一次，複製17次後，18個葉片將圍成一個圓周。爲了獲得這個圓周圖案，在container層中定義18個名爲shape的子層，而且爲每一個子層設置兩個變量：表示該子層旋轉角度的變量—rotation和表示該子層背景色的變量—color。

編寫的HTML文件內容以下。

<!DOCTYPE html>
<html>
<head>
<title>旋轉的葉片</title>
<style>
  .container
  {
     margin: 0 auto;
     width: 500px;
     height: 500px;
     position: relative;
     overflow: hidden;
     display: block;
     border: 4px solid rgba(255, 0, 0, 0.9);
     background:#d8d8d8;
     border-radius: 10%;
   } 
   .shape
   {
     position: absolute;
     width: 80%;
     height: 45%;
     left: 10%;
     bottom:30%;
     border-radius: 100% 4px;
     opacity: 0.6;
   }
   .shape:nth-child(1n+0) 
   {
      background: var(--color);
      transform: rotate(var(--rotation));
   }
</style>
</head>
<body>
<div class="container">
    <div class="shape" style="--rotation: 0deg;--color:#fffe33"></div>
    <div class="shape" style="--rotation: -10deg;--color:#feff00"></div>
    <div class="shape" style="--rotation: -20deg;--color:#ff9935"></div>
    <div class="shape" style="--rotation: -30deg;--color:#f87e07"></div>
    <div class="shape" style="--rotation: -40deg;--color:#ff339c"></div>
    <div class="shape" style="--rotation: -50deg;--color:#ff007e"></div>
    <div class="shape" style="--rotation: -60deg;--color:#ff34ff"></div>
    <div class="shape" style="--rotation: -70deg;--color:#ff00ff"></div>
    <div class="shape" style="--rotation: -80deg;--color:#9a34ff"></div>
    <div class="shape" style="--rotation: -90deg;--color:#7f00ff"></div>
    <div class="shape" style="--rotation: -100deg;--color:#3233ff"></div>
    <div class="shape" style="--rotation: -110deg;--color:#0000fe"></div>
    <div class="shape" style="--rotation: -120deg;--color:#3399fe"></div>
    <div class="shape" style="--rotation: -130deg;--color:#0978f5"></div>
    <div class="shape" style="--rotation: -140deg;--color:#33fffe"></div>
    <div class="shape" style="--rotation: -150deg;--color:#32ff98"></div>
    <div class="shape" style="--rotation: -160deg;--color:#99ff32"></div>
    <div class="shape" style="--rotation: -170deg;--color:#81fe00"></div>
</div>
</body>
</html>

View Code

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到如圖2所示的圖案。

圖2 18個葉片組成的圖案

如今讓這18個葉片旋轉起來，編寫關鍵幀定義爲：

@keyframes rotate

{

from { transform: rotate(var(--rotation)); }

to { transform: rotate(360deg); }

}

而後在.shape樣式定義中加上一句「animation: rotate 3s alternate infinite ease-in-out;」，此時，18個葉片會旋轉起來，收攏爲1個葉片，以後又旋轉展開爲18個葉片，如圖3所示。

圖3 旋轉後收攏並展開的葉片

因爲定義關鍵幀@keyframes rotate中結束幀狀態均是旋轉360deg，所以18個葉片會收攏成1個葉片。若想讓18個葉片各自旋轉360°不收攏起來，可修改關鍵幀定義以下：

@keyframes rotate

{

from { transform: rotate(var(--rotation)); }

to { transform: rotate(calc(360deg + var(--rotation))); }

}

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

圖4 旋轉的葉片

圖4中葉片較密，且不是繞一個方向勻速旋轉。爲此，去掉9個偶數項子層（即旋轉角度爲-10deg、-30deg、…、-170deg的子層），且修改動畫屬性定義語句爲：

animation: rotate 3s linear infinite;

則呈現出如圖5所示的動畫效果。

圖5 繞一個方向勻速旋轉的葉片

完整的HTML文件內容以下。

<!DOCTYPE html>
<html>
<head>
<title>旋轉的葉片</title>
<style>
  .container
  {
     margin: 0 auto;
     width: 500px;
     height: 500px;
     position: relative;
     overflow: hidden;
     display: block;
     border: 4px solid rgba(255, 0, 0, 0.9);
     background:#d8d8d8;
     border-radius: 10%;
   } 
   .shape
   {
     position: absolute;
     width: 80%;
     height: 45%;
     left: 10%;
     bottom:30%;
     border-radius: 100% 4px;
     opacity: 0.6;
     animation: rotate 3s linear infinite;
   }
   .shape:nth-child(1n+0) 
   {
      background: var(--color);
      transform: rotate(var(--rotation));
   }
   @keyframes rotate 
   {
       from { transform: rotate(var(--rotation)); }
       to   { transform: rotate(calc(360deg + var(--rotation)));  }
   }
</style>
</head>
<body>
<div class="container">
    <div class="shape" style="--rotation: 0deg;--color:#fffe33"></div>
    <div class="shape" style="--rotation: -20deg;--color:#ff9935"></div>
    <div class="shape" style="--rotation: -40deg;--color:#ff339c"></div>
    <div class="shape" style="--rotation: -60deg;--color:#ff34ff"></div>
    <div class="shape" style="--rotation: -80deg;--color:#9a34ff"></div>
    <div class="shape" style="--rotation: -100deg;--color:#3233ff"></div>
    <div class="shape" style="--rotation: -120deg;--color:#3399fe"></div>
    <div class="shape" style="--rotation: -140deg;--color:#33fffe"></div>
    <div class="shape" style="--rotation: -160deg;--color:#99ff32"></div>
</div>
</body>
</html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。