CSS、JavaScript 实现：律动之光图形交互动画效果

2022-11-16 19:46:18

律动之光：交互式动画图形配上动态背景

概览

准备好让你的网站或应用程序焕发活力了吗？使用 CSS 和 JavaScript，你可以轻松创建动态图形与随机背景颜色交互的效果。这种引人注目的动画将吸引用户的注意力，让你的界面更加有趣且引人入胜。

第一步：构建 HTML 架构

如同搭建房屋的框架，你需要创建一个 HTML 结构来容纳你的图形和背景。以下代码将完成这项工作：

<div class="container">
  <div class="graphic"></div>
</div>

第二步：添加 CSS 样式

现在，是时候用 CSS 来美化你的图形和背景了。让它闪亮起来：

.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.graphic {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  border-radius: 50%;
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #000000;
  animation: color-change 5s infinite;
}

@keyframes color-change {
  0% {
    background-color: #ff0000;
  }

  25% {
    background-color: #00ff00;
  }

  50% {
    background-color: #0000ff;
  }

  75% {
    background-color: #ffff00;
  }

  100% {
    background-color: #ff00ff;
  }
}

第三步：注入 JavaScript 生命力

是时候让你的图形活起来了！使用 JavaScript，你可以控制图形的移动和弹跳：

const graphic = document.querySelector('.graphic');

graphic.addEventListener('animationiteration', () => {
  const direction = Math.random() < 0.5 ? -1 : 1;
  const angle = Math.random() * Math.PI * 2;

  graphic.style.transform = `translate(${direction * 100}px, ${direction * 100}px) rotate(${angle}rad)`;
});