纯CSS实现的星光动画背景

技术频道 - html技术

作者:admin 时间:2021-7-30 8:33:38 浏览:

这个星光动画背景，看起来挺酷的，在某些网站上可作为一个效果展示。难得的是，这动画是纯CSS3实现的，迁移十分方便，代码一拷就行。这里给大家分享一下。

纯CSS实现的星光动画背景

demo download

由于代码较多，这里不打算把完整代码都贴出来，仅对个别代码加以分析。

在本实例中，我们看到动画是固定在页面中间的位置，并且大小区域是固定的，如果我们想全页面都布满星光动画，要怎么设置呢？

我们可以修改这个CSS代码，原来的代码是这个：

.stars {
  -webkit-animation: rotate 60000ms linear infinite;
          animation: rotate 60000ms linear infinite;
  transform-origin: 50% 50% -250px;
}

我们可以把它改为这个（你可在演示页面里试一试）：

.stars {
  -webkit-animation: rotate 60000ms linear infinite;
          animation: rotate 60000ms linear infinite;

  transform-origin: 100% 100%;
}

很明显，是对transform-origin这个css属性做了修改。

transform-origin 属性，它是设置旋转元素的基点位置。

transform-origin 属性允许你改变被转换元素的位置。

2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

语法

transform-origin: x-axis y-axis z-axis;

值	描述
x-axis	定义视图被置于 X 轴的何处。可能的值：left、center、right、length、%
y-axis	定义视图被置于 Y 轴的何处。可能的值：top、center、bottom、length、%
z-axis	定义视图被置于 Z 轴的何处。可能的值：length

在本实例中，使用了3D转换元素。

此外，我们还可以通过更改下面的CSS样式，来改变星光动画的效果，比如星星的大小、动画速度等。

.counter {
  animation: rotate 60000ms linear infinite reverse;
}

.star {
  width: 6px;
  height: 6px;
}
.star .light {
  width: 100px;
  height: 6px;
  left: -47px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
}