希望之光
效果就是从屏幕下方动态飘出希望之光如下图
具体代码如下,感兴趣的可以CV看一下,还是很不错的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
for (let i = 0; i < 200; i++) {
const el = document.createElement('div');
if(i > 50){
el.classList.add('c')
}else{
el.classList.add('a')
}
el.style.cssText = `--duration:` + (Math.random() * 50 + 10)
document.body.appendChild(el);
}
// let a = document.createElement("div")
// a.classList.add("circle")
// let countent = document.getElementById("countent");
// countent.appendChild(a)
</script>
<style>
body {
background: #000000;
min-height: 100vh;
width: 100vm;
}
.c {
width: 50px;
height: 50px;
border-radius: 50%;
background: skyblue;
box-shadow: 0px 0px 40px skyblue
0px 0px 140px skyblue;
position: relative;
margin: 0 5px;
display: inline-block;
animation: drawHeart 5s linear infinite;
animation-duration: calc(600s / var(--duration));
}
.c:nth-of-type(even) {
background: palevioletred;
box-shadow: 0px 0px 40px palevioletred;
}
.a {
width: 50px;
height: 50px;
border-radius: 50%;
background: yellow;
box-shadow: 0px 0px 40px yellow;
0px 0px 140px skyblue;
position: relative;
margin: 0 5px;
display: inline-block;
animation: drawHeart 5s linear infinite;
animation-duration: calc(500s / var(--duration));
}
.a:nth-of-type(even) {
background: white;
box-shadow: 0px 0px 40px white;
}
@keyframes drawHeart {
from {
transform: translateY(100vh) scale(0);
}
to {
transform: translateY(-100vh) scale(1);
}
}
</style>
</html>