javascript 画扇形纯css实现扇形菜单

转载

风华正茂的AI 2023-09-05 16:57:36

文章标签 javascript 画扇形 css css3 html CSS 文章分类 JavaScript 前端开发

CSS 是前端开发中不可或缺的重要工具，它可以让网页变得美丽而生动。今天我们将介绍如何使用纯 CSS 实现一个有趣的扇形动画。本文将从以下几个方面来讲解这个示例代码的实现过程：设计思路、HTML 结构、CSS 样式。

设计思路

我们需要实现的是一个可爱精致的扇形动画，最终效果如下图所示：

我们可以看到，这个扇形动画由多个扇形组成，每个扇形的颜色和大小都不同，它们在不断旋转，形成一个有趣的动画效果。我们的设计思路如下：

HTML 结构：使用 div 元素来创建一个扇形图形，每个扇形使用一个单独的 div 元素来实现，最终组合成一个完整的扇形动画。
CSS 样式：为每个扇形元素设置不同的颜色、大小、旋转角度等样式属性，使用 @keyframes 实现旋转动画效果。

HTML 结构

我们先来看一下 HTML 结构，如下所示：

<div class="fan-container">
  <div class="fan fan-1"></div>
  <div class="fan fan-2"></div>
  <div class="fan fan-3"></div>
  <div class="fan fan-4"></div>
  <div class="fan fan-5"></div>
  <div class="fan fan-6"></div>
  <div class="fan fan-7"></div>
  <div class="fan fan-8"></div>
</div>

首先，我们创建了一个类名为“fan-container”的 div 元素，作为整个扇形动画的容器。然后，我们创建了 8 个类名为“fan”的 div 元素，每个扇形使用一个单独的 div 元素来实现。为了方便设置样式，我们为每个扇形元素设置了不同的类名（如“fan-1”、“fan-2” 等）。

CSS 样式

接下来，我们需要为每个扇形元素设置样式。我们先来看一下每个扇形元素的基础样式：

.fan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100% 0 0 0;
  transform-origin: bottom right;
}

我们将每个扇形元素设置为绝对定位，并将它们放置在父元素的正中央。我们还通过 transform 属性来将扇形元素旋转到正确的角度。最后，我们为扇形元素设置了一些基本样式属性，包括边框半径、变形原点等。

接下来，我们需要为每个扇形元素设置不同的颜色和大小。我们可以通过为每个扇形元素添加类名，然后在 CSS 中设置不同的样式属性来实现。例如，下面是“fan-1”元素的样式：

.fan-1 {
  width: 120px;
  height: 120px;
  background-color: #FFC740;
}

我们可以看到，“fan-1”元素的宽度为 120px，高度也为 120px，背景颜色为 #FFC740。我们还可以设置其他扇形元素的样式属性，如下所示：

.fan-2 {
  width: 135px;
  height: 135px;
  background-color: #FF6381;
}

.fan-3 {
  width: 150px;
  height: 150px;
  background-color: #87CEEB;
}

.fan-4 {
  width: 165px;
  height: 165px;
  background-color: #3CB371;
}

.fan-5 {
  width: 180px;
  height: 180px;
  background-color: #BA55D3;
}

.fan-6 {
  width: 195px;
  height: 195px;
  background-color: #FF7F50;
}

.fan-7 {
  width: 210px;
  height: 210px;
  background-color: #00CED1;
}

.fan-8 {
  width: 225px;
  height: 225px;
  background-color: #6A5ACD;
}

最后，我们需要为每个扇形元素添加旋转动画效果。我们可以通过使用 @keyframes 关键字来实现。例如，下面是“fan-1”元素的样式：

.fan-1 {
  animation: spin 8s linear infinite;
}

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

我们可以看到，“fan-1”元素在 8 秒钟内将完整地旋转了一圈，持续执行无数次。我们还可以设置其他扇形元素的旋转动画，如下所示：

.fan-2 {
  animation: spin 7s linear infinite reverse;
}

.fan-3 {
  animation: spin 6s ease-in-out infinite;
}

.fan-4 {
  animation: spin 5s linear infinite;
}

.fan-5 {
  animation: spin 4s ease-in-out infinite reverse;
}

.fan-6 {
  animation: spin 3s linear infinite;
}

.fan-7 {
  animation: spin 2s ease-in-out infinite;
}

.fan-8 {
  animation: spin 1s linear infinite reverse;
}

我们可以看到，每个扇形元素都有自己的旋转动画效果，其中一些旋转方向相反，一些使用不同的缓动函数等。

完整代码

最后，我们将完整的代码放在一起，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Fan Animation</title>
    <style>
      .fan-container {
        width: 300px;
        height: 300px;
        position: relative;
      }
      
      .fan {
        position: absolute;
        top: 50%;
        left: 50%;
         transform: translate(-50%, -50%);
        border-radius: 100% 0 0 0;
        transform-origin: bottom right;
      }
      
      .fan-1 {
        width: 120px;
        height: 120px;
        background-color: #FFC740;
        animation: spin 8s linear infinite;
      }
      
      .fan-2 {
        width: 135px;
        height: 135px;
        background-color: #FF6381;
        animation: spin 7s linear infinite reverse;
      }
      
      .fan-3 {
        width: 150px;
        height: 150px;
        background-color: #87CEEB;
        animation: spin 6s ease-in-out infinite;
      }
      
      .fan-4 {
        width: 165px;
        height: 165px;
        background-color: #3CB371;
        animation: spin 5s linear infinite;
      }
      
      .fan-5 {
        width: 180px;
        height: 180px;
        background-color: #BA55D3;
        animation: spin 4s ease-in-out infinite reverse;
      }
      
      .fan-6 {
        width: 195px;
        height: 195px;
        background-color: #FF7F50;
        animation: spin 3s linear infinite;
      }
      
      .fan-7 {
        width: 210px;
        height: 210px;
        background-color: #00CED1;
        animation: spin 2s ease-in-out infinite;
      }
      
      .fan-8 {
        width: 225px;
        height: 225px;
        background-color: #6A5ACD;
        animation: spin 1s linear infinite reverse;
      }
      
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="fan-container">
      <div class="fan fan-1"></div>
      <div class="fan fan-2"></div>
      <div class="fan fan-3"></div>
      <div class="fan fan-4"></div>
      <div class="fan fan-5"></div>
      <div class="fan fan-6"></div>
      <div class="fan fan-7"></div>
      <div class="fan fan-8"></div>
    </div>
  </body>
</html>