HTML做的夜空星星闪烁页面
作者：野牛程序员：2023-03-25 10:48:48网页设计阅读 2604
![\"1679712612033.png\"/](\"/uploads/image/20230325/1679712566668994.png\" "\\"1679712566668994.png\\"")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态火焰爱心</title>
<style>
body {
background: #000;
}
.heart {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 90px;
transform: translate(-50%, -50%);
animation: heartbeat 1s ease-in-out infinite;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
top: 0;
left: 50px;
width: 50px;
height: 80px;
background: #ff4f4f;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes heartbeat {
0% {
transform: scale(3);
}
20% {
transform: scale(2.9);
}
40% {
transform: scale(3);
}
60% {
transform: scale(2.9);
}
80% {
transform: scale(3);
}
100% {
transform: scale(3);
}
}
.stars {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: #000;
overflow: hidden;
}
.star {
position: absolute;
top: calc(100% * var(--y));
left: calc(100% * var(--x));
width: 298px;
height: 298px;
background: #fff;
border-radius: 50%;
animation: twinkle calc(4s * var(--d)) ease-in-out infinite;
}
@keyframes twinkle {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="stars">
<script>
for (let i = 0; i < 500; i++) {
const star = document.createElement("div");
star.classList.add("star");
star.style.setProperty("--x", Math.random());
star.style.setProperty("--y", Math.random());
star.style.setProperty("--d", Math.random());
const size = Math.random() * 3;
star.style.width = size + "px";
star.style.height = size + "px";
const duration = Math.random() * 4 + 2;
star.style.animationDuration = duration + "s";
document.body.appendChild(star);
}
</script>
</div>
<!--<div class="heart"></div>-->
</body>
</html>野牛程序员教少儿编程与信息学奥赛-微信|电话：15892516892
- 上一篇：算法图解读后笔记
- 下一篇：什么是质数？用C++编程：判断一个数是不是质数？