<!doctype html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<style>
body {
background-color:
#000;
overflow: hidden;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100px;
}
.wrapper .nav {
list-style: none;
width: 800px;
height: 100px;
padding: 0;
margin: 0 auto;
}
.wrapper .nav li {
width: 25%;
height: 50px;
float: left;
margin-top: 25px;
}
.wrapper .nav li a {
text-decoration: none;
color:
#fff;
text-align: center;
line-height: 50px;
display: block;
font-size: 20px;
font-family:
"KaiTi"
;
}
.star {
width: 5px;
height: 5px;
background:
#fff;
position: absolute;
z-index: -1;
}
@keyframes blink {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<p class=
"wrapper"
>
<ul class=
"nav"
>
<li><a href=
"#"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
>导航1</a></li>
<li><a href=
"#"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
>导航2</a></li>
<li><a href=
"#"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
>导航3</a></li>
<li><a href=
"#"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
>导航4</a></li>
</ul>
</p>
<script>
var
starrySky = {
starNum: 100,
starSize () {
return
2 + Math.trunc(Math.random() * 10) },
starColor:
"#fff"
,
lineColor:
"#fff"
,
lineHeight:
"3px"
,
changeTime:
"1s"
,
init () {
var
html =
""
;
for
(
var
i = 0; i <
this
.starNum; i++) {
html +=
"<p class='star' id='star"
+ i +
"'></p>"
;
}
document.querySelector(
".wrapper"
).innerHTML += html;
this
.disperse();
this
.combine();
},
disperse () {
var
that =
this
;
var
width = document.querySelector(&
#39;.wrapper').offsetWidth;
var
height = document.querySelector(&
#39;.wrapper').offsetHeight;
for
(
var
i = 0; i < that.starNum; i++) {
var
top = Math.trunc(height * Math.random());
var
left = Math.trunc(width * Math.random());
var
size = that.starSize();
document.querySelector(
"#star"
+ i).style.cssText += `
top:${top}px;
left:${left}px;
width:${size}px;
height:${size}px;
background:${that.starColor};
opacity:${Math.random()};
border-radius:50%;
animation:blink 1s ${Math.random() * 2}s infinite alternate;
`;
}
},
combine () {
var
that =
this
;
document.querySelectorAll(
".nav li a"
).forEach(
function
(item) {
item.addEventListener(
"mouseover"
,
function
(e) {
var
width =
this
.offsetWidth / that.starNum;
for
(
var
i = 0; i < that.starNum; i++) {
var
top =
this
.offsetTop +
this
.offsetHeight;
var
left =
this
.offsetLeft + i * width
document.querySelector(
"#star"
+ i).style.cssText += `
width:${width}px;
top:${top}px;
left:${left}px;
height:${that.lineHeight};
background:${that.lineColor};
opacity:1;
border-radius:0;
transition:${that.changeTime};
animation:blink 1s infinite alternate;
`;
}
});
item.addEventListener(
"mouseout"
,
function
() {
that.disperse();
});
}
);
},
}
starrySky.init();
</script>
</body>
</html>