用纯 CSS 打造灵动波点背景🏀

2023-10-24 00:45:18

使用纯 CSS 打造别致的波点背景

波点元素以其俏皮且永恒的魅力，在时尚和设计界占据着不败之地。如今，这种元素已悄然渗透至网页设计领域，为网站增添了一抹亮眼的风采。

在这篇博客中，我们将带你踏上使用纯 CSS 打造波点背景的奇妙旅程。无需任何图片，只需几行精巧的代码，即可实现令人惊叹的效果。

步骤 1：HTML 代码搭建

首先，你需要一个简单的 HTML 代码作为舞台。这个代码只包含一个 <body> 标签，并设置了背景颜色。

<body style="background-color: #ffffff;">
</body>

步骤 2：CSS 代码魔法

接下来，是让波点闪耀登场的时刻！添加以下 CSS 代码到你的 <head> 标签中，将背景变成波点派对。

body {
  background-color: #ffffff;
  background-image: radial-gradient(#ffffff 1px, transparent 0), radial-gradient(#ffffff 1px, transparent 0);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}

瞧！波点就这样诞生了！

步骤 3：定制波点风格

发挥你的创造力，通过调整 CSS 代码来定制波点的外观。你可以更改波点的颜色、大小和间距，打造符合你设计审美的波点风格。

body {
  background-color: #ffffff;
  background-image: radial-gradient(#000000 1px, transparent 0), radial-gradient(#000000 1px, transparent 0);
  background-size: 5px 5px;
  background-position: 0 0, 2.5px 2.5px;
}

步骤 4：添加动画效果

如果你希望波点动起来，为网站增添一份灵动，不妨在 CSS 代码中加入动画效果。让波点上下浮动、左右摆动或旋转，打造引人入胜的视觉体验。

body {
  background-color: #ffffff;
  background-image: radial-gradient(#000000 1px, transparent 0), radial-gradient(#000000 1px, transparent 0);
  background-size: 5px 5px;
  background-position: 0 0, 2.5px 2.5px;
  animation: move 10s infinite;
}

@keyframes move {
  0% {
    background-position: 0 0, 2.5px 2.5px;
  }
  50% {
    background-position: 5px 5px, 7.5px 7.5px;
  }
  100% {
    background-position: 0 0, 2.5px 2.5px;
  }
}