一、前言
本文详解一个星星背景的前端页面设计思路,并提供对应源码,可以用来作为登录页面、或者其它展示页面的背景,最终实现效果如下图:
注意,该背景并不是静态的,星星的大小与位置都会发生变化。
二、实现思路
首先不要想太复杂的东西,星星背景版实际上就是无数会动会变的星星组成的,所以我们只需要知道如何去制作一个星星、并对其进行大量复制,就行了。
可以先用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');