12. 星星背景实现详解

一、前言

本文详解一个星星背景的前端页面设计思路，并提供对应源码，可以用来作为登录页面、或者其它展示页面的背景，最终实现效果如下图：

注意，该背景并不是静态的，星星的大小与位置都会发生变化。

二、实现思路

首先不要想太复杂的东西，星星背景版实际上就是无数会动会变的星星组成的，所以我们只需要知道如何去制作一个星星、并对其进行大量复制，就行了。

可以先用css设置一下网页背景，调整为黑色：

body {
	background-color: #000200;
}

然后写一个div标签，作为一个星星元素：

<div class="star"></div>

星星是圆形的、白色的、且旁边有光晕，那么可以这样设置它的样式：

  .star {
	width: 4px;
	height: 4px;
	border-radius: 2px;
	background-color: #fff;
	box-shadow: 0 0 2px 2px #fff;
  }

此时它的样子应该是一个小光点。

接下来，我们还需要让其动起来、以及会变大变小。

变大变小这种固定的动作行为，我们可以使用css动画实现，但想要让其动起来，由于需要动态设置它的位置，所以得用js代码实现。

为了方便，这里就统一直接使用js实现这两个动画效果。

为了设置它的位置、以及让其动起来的时候有过度效果，我们还需要为其添加两个css样式：

      .star {
        position: fixed;
        width: 4px;
        height: 4px;
        border-radius: 2px;
        background-color: #fff;
        box-shadow: 0 0 2px 2px #fff;
        transition: all linear 1s;
      }

一个是position，可以让我们任意设置它的位置，通过top、left属性，另一个是transition，让其动起来的时候能够有过度效果。

首先要找到这个star标签：

let star=document.querySelector('.star');