CSS动画实例：旋转的叶片

在页面中放置一个类名为container的层作为容器，在该层中再定义一个名为shape的子层，HTML代码描述如下：

</div>

分别为container和shape定义CSS样式规则如下：

.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;

background: #fffe33;

}

在CSS样式的作用下，这2个层在浏览器中显示如图1所示，其中子层显示为1个淡黄色的叶片。

CSS动画实例：旋转的叶片

图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