光点汇合循环动画

十月 31, 2023 / Mr.x / 1阅读 / 0评论/ 分类: 创意
光点汇合循环动画 — 荣小站
前端 CSS 动画

光点汇合循环动画

8个光点从九宫格边缘向中心汇聚的循环动画，配合角落光晕效果，赛博朋克风格。

效果演示
8个光点从九宫格边缘向中心汇聚的循环动画，配合角落光晕效果，赛博朋克风格。

这是一个极具视觉冲击力的 CSS 动画特效——8个光点从九宫格的各个边缘向中心汇聚，在中央形成汇合点，然后消散并重新开始。配合角落的光晕装饰，营造出强烈的赛博朋克氛围。

核心特性

  • 九宫格布局：3×3 网格布局，每个格子可独立控制
  • 8方向光点：从四周8个位置向中心汇聚
  • 角落光晕：使用 CSS 伪元素制作渐变光晕
  • 汇合点效果：中央圆环接收光点，产生辉光
  • 循环动画：3秒周期，无缝循环

完整代码

以下是完整的单文件代码，你可以直接保存为 .html 文件运行：

HTML

<div class="canvas">
  <div class="ninth">
    <div class="cornersWrapper">
      <div class="corner is-large"></div>
      <div class="corner is-medium"></div>
      <div class="corner is-small"></div>
    </div>
  </div>
  <!-- ... 共9个ninth ... -->
  <div class="circle is-first"></div>
  <div class="circle is-second"></div>
  <!-- ... 共8个circle ... -->
  <div class="meetingPoint"></div>
</div>

CSS

:root {
  --background-color: #1b1b2c;
  --main-color: #0ff;
  --meeting-point-color: #7fffff;
  --canvas-size: 68vmin;
  --circle-size: 8vmin;
  --animation-duration: 3000ms;
}

.canvas {
  width: var(--canvas-size);
  height: var(--canvas-size);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  position: relative;
}

.circle {
  position: absolute;
  width: var(--circle-size);
  height: var(--circle-size);
  background-color: var(--main-color);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--main-color);
}

@keyframes move-circle-first {
  0%, 100% { top: 0; left: 0; transform: scale(0); }
  20% { opacity: 1; }
  85% { top: 50%; left: 50%; opacity: 0.75; }
  95% { opacity: 0; }
}

.meetingPoint {
  width: 12vmin;
  height: 12vmin;
  border-radius: 50%;
  border: solid 1.5vmin var(--meeting-point-color);
  filter: drop-shadow(0 0 30px var(--main-color));
  mix-blend-mode: plus-lighter;
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
}

技术要点

技术点说明
CSS 变量使用 CSS 自定义属性控制颜色、尺寸、动画时长
Grid 布局3×3 网格布局定位角落装饰
关键帧动画@keyframes 控制光点从边缘到中心的运动轨迹
mix-blend-modeplus-lighter 实现光叠加效果
box-shadow创建发光效果
伪元素::before/::after 制作角落渐变光晕

使用说明

  1. 将完整代码保存为 .html 文件
  2. 用浏览器打开即可查看效果
  3. 可调整 CSS 变量自定义颜色和尺寸

#光点汇合循环动画(1)

评论