<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
font-family: Arial, sans-serif;
background: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.stars {
position: absolute;
width: 1px;
height: 1px;
background: #fff;
box-shadow: 2000px 0 #fff;
animation: animStar 8s infinite linear;
}
@keyframes animStar {
from {
transform: translateY(0) translateX(0);
}
to {
transform: translateY(1080px) translateX(-1920px);
}
}
.content {
text-align: center;
z-index: 1;
}
</style>
<title>Personal Website with Shooting Star Background</title>
</head>
<body>
<div class="stars"></div>
<div class="content">
<h1>Welcome to My Personal Website</h1>
<p>This is where you can learn all about me.</p>
</div>
</body>
</html>
这个例子中,.stars
类被用来创建流星特效,通过 CSS 动画来让白色像素沿着屏幕飞行,从而营造出流星的效果。你可以将这段代码保存为 .html
文件然后在浏览器中打开,就可以看到效果了。