看到他们写的html动画效果挺炫酷的,我就试着去写了一个简单星星的效果
html部分
<div id="box"></div>
<div class="lxybox">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
css部分
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
}
body {
background-image: url("https://img1.baidu.com/it/u=4020737096,1188815710&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
}
#box {
position: absolute;
top: 0;
left: 0;
}
.dian {
width: 4px;
height: 4px;
position: absolute;
top: 0;
left: 0px;
border-radius: 50%;
background-color: white;
}
@keyframes yd {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.lxybox {
width: 100%;
height: 800px;
position: relative;
left: 0;
top: 0;
overflow: hidden;
}
.line {
width: 1px;
background-color: white;
position: absolute;
top: 0;
left: 0;
}
@keyframes lxy {
0% {
transform: rotate(45deg) translateY(-400px);
opacity: 0;
}
50% {
opacity: 1;
}
to {
transform: rotate(45deg) translateY(100px);
opacity: 0;
}
}
这里的animation动画我写在了js部分,下面会展示
js部分
var oBox = document.getElementById("box");
// 获取流星雨
var lineArr = document.querySelectorAll(".line");
// 创建新的子元素
var childElement = document.createElement("div");
for (let index = 0; index < 100; index++) {
//添加多个子元素
childElement.innerHTML += `<div class="dian"></div>`;
}
// 将子元素添加到父元素中
oBox.appendChild(childElement);
var dianArr = document.querySelectorAll(".dian");
// 星星
function setStar() {
for (let index = 0; index < 100; index++) {
//可以更改数量
let left = Math.round(Math.random() * window.innerWidth);
let topdian = Math.round(Math.random() * window.innerHeight);
let scds = Math.random() * 1;
let xxWH = Math.random() * (4 - 1 + 1) + 1; // 随机星星的宽高
dianArr[index].style.left = left + "px"; //每个元素的位置和动画
dianArr[index].style.top = topdian + "px";
dianArr[index].style.height = xxWH + "px";
dianArr[index].style.width = xxWH + "px";
dianArr[index].style.animation = `yd .8s linear ${scds}s infinite`;
}
}
// 流星雨
function setMeteor() {
for (let index = 0; index < lineArr.length; index++) {
let left = Math.round(Math.random() * window.innerWidth);
let topdian = Math.round(Math.random() * window.innerHeight);
let scds = Math.random() * (2 - 1 + 1) + 1;
let height = Math.floor(Math.random() * (100 - 10 + 10) + 10);
lineArr[index].style.left = left + "px";
lineArr[index].style.top = topdian + "px";
lineArr[index].style.height = height + "px";
lineArr[index].style.animation = `lxy linear ${scds}s infinite`;
}
}
setMeteor();
setStar();
//document对象事件监听--鼠标移动
document.onmousemove = function (e) {
//更改样式
setStar();
setMeteor();
};
这里是监听的的鼠标移动事件改编星星的样式动画,如,位置,长,宽。动画时间
完整代码如下
创建一个index.html 文件,复制下列代码到该文件保存后,双击或右击该文件,即可运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>满天星</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
}
body {
background-image: url("https://img1.baidu.com/it/u=4020737096,1188815710&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
}
#box {
position: absolute;
top: 0;
left: 0;
}
.dian {
width: 4px;
height: 4px;
position: absolute;
top: 0;
left: 0px;
border-radius: 50%;
background-color: white;
}
@keyframes yd {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.lxybox {
width: 100%;
height: 800px;
position: relative;
left: 0;
top: 0;
overflow: hidden;
}
.line {
width: 1px;
background-color: white;
position: absolute;
top: 0;
left: 0;
}
@keyframes lxy {
0% {
transform: rotate(45deg) translateY(-400px);
opacity: 0;
}
50% {
opacity: 1;
}
to {
transform: rotate(45deg) translateY(100px);
opacity: 0;
}
}
</style>
</head>
<body>
<div id="box"></div>
<div class="lxybox">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<script>
var oBox = document.getElementById("box");
// 获取流星雨
var lineArr = document.querySelectorAll(".line");
// 创建新的子元素
var childElement = document.createElement("div");
for (let index = 0; index < 100; index++) {
//添加多个子元素
childElement.innerHTML += `<div class="dian"></div>`;
}
// 将子元素添加到父元素中
oBox.appendChild(childElement);
var dianArr = document.querySelectorAll(".dian");
// 星星
function setStar() {
for (let index = 0; index < 100; index++) {
//可以更改数量
let left = Math.round(Math.random() * window.innerWidth);
let topdian = Math.round(Math.random() * window.innerHeight);
let scds = Math.random() * 1;
let xxWH = Math.random() * (4 - 1 + 1) + 1; // 随机星星的宽高
dianArr[index].style.left = left + "px"; //每个元素的位置和动画
dianArr[index].style.top = topdian + "px";
dianArr[index].style.height = xxWH + "px";
dianArr[index].style.width = xxWH + "px";
dianArr[index].style.animation = `yd .8s linear ${scds}s infinite`;
}
}
// 流星雨
function setMeteor() {
for (let index = 0; index < lineArr.length; index++) {
let left = Math.round(Math.random() * window.innerWidth);
let topdian = Math.round(Math.random() * window.innerHeight);
let scds = Math.random() * (2 - 1 + 1) + 1;
let height = Math.floor(Math.random() * (100 - 10 + 10) + 10);
lineArr[index].style.left = left + "px";
lineArr[index].style.top = topdian + "px";
lineArr[index].style.height = height + "px";
lineArr[index].style.animation = `lxy linear ${scds}s infinite`;
}
}
setMeteor();
setStar();
// 移动鼠标就变换效果有点影响体检
// 改成了鼠标左键按下拖动鼠标变换
let flag = false;
document.onmousedown = function (e) { //鼠标按下
flag = true;
//更改样式
};
//document对象事件监听--鼠标移动
document.onmousemove = function (e) {
//更改样式
if (flag) {
setStar();
setMeteor();
}
};
document.onmouseup = function (e) { //鼠标抬起
flag = false;
};
</script>
</body>
</html>
祝大家新年快乐!可能迟了点~~嘿