css打造动态彩虹

紫微前端

于 2022-07-04 11:09:49 发布

阅读量317

点赞数

CC 4.0 BY-SA版权

分类专栏：原生javascript制作各种酷炫组件文章标签： css servlet java

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125596177

原生javascript制作各种酷炫组件专栏收录该内容

157 篇文章 ¥89.90 ¥99.00

订阅专栏

本文将介绍如何利用CSS的动画和渐变特性，详细步骤地打造出一款动态变化的彩虹效果，让你的网页增添色彩和活力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="rainbow">
  <div class="rainbow__band" style="--index: 0;"></div>
  <div class="rainbow__band" style="--index: 1;"></div>
  <div class="rainbow__band" style="--index: 2;"></div>
  <div class="rainbow__band" style="--index: 3;"></div>
  <div class="rainbow__band" style="--index: 4;"></div>
  <div class="rainbow__band" style="--index: 5;"></div>
  <div class="rainbow__band" style="--index: 6;"></div>
</div>

<style>

@property --hue {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}
*

了解本专栏