Amupu

星空特效的HTML代码示例

以下是一个星空特效的HTML代码示例:


星空特效的HTML代码示例

```html

<!DOCTYPE html>
<html>
<head>
<title>星空特效示例</title>
<style>
body {
background-color: #000;
}
.stars {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  }
.twinkle {
position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  box-shadow: 1px 1px 2px #fff;
  animation: twinkle 1s ease-in-out infinite;
}
@keyframes twinkle {
0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
</style>
</head>
<body>
<div class="stars">
<script>
for (var i = 0; i < 100; i++) {
var star = document.createElement('div');
star.className = 'twinkle';
star.style.left = Math.floor(Math.random() * 100) + '%';
  star.style.top = Math.floor(Math.random() * 100) + '%';
  document.body.appendChild(star);
}
</script>
</div>
</body>
</html>

```


这个代码会在页面背景中生成100个闪烁的星星,使得整个页面看起来像是夜空中的星空。可以在浏览器中运行查看效果。


以下是另外一个星空特效的HTML代码示例:


Example:


```html

<!DOCTYPE html>
<html>
<head>
<title>星空特效示例</title>
<style>
body {
background-color: #000;
}
.stars {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.star {
position: absolute;
background-color: white;
width: 2px;
height: 2px;
border-radius: 50%;
-webkit-animation: twinkle 3s infinite;
animation: twinkle 3s infinite;
}
.star:nth-child(1) {
animation-delay: 1s;
}
.star:nth-child(2) {
animation-delay: 2s;
}
.star:nth-child(3) {
animation-delay: 3s;
}
.star:nth-child(4) {
animation-delay: 4s;
}
.star:nth-child(5) {
animation-delay: 5s;
}
@keyframes twinkle {
0% {
transform: scale(0.5);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.2;
}
100% {
transform: scale(0.5);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="stars">
<script>
for (var i = 0; i < 100; i++) {
var star = document.createElement('div');
star.classList.add("star");
star.style.left = Math.floor(Math.random()*100) + "%";
star.style.top = Math.floor(Math.random()*100) + "%";
document.body.appendChild(star);
}
</script>
</div>
</body>
</html>

```


这些代码可以在浏览器中运行并产生相应的星空特效。

搜索
分类最新
    分类最新,为您呈现各领域的最新动态和热点话题。无论您关注科技、财经、创业还是生活,这里都能满足您的需求。我们精选最新文章,提供最新鲜、全面的内容,掌握最新的知识和趋势,保持与时俱进的步伐。
分类热门
    分类热门栏目,汇聚了各类热门话题的精华文章,无论是科技、云计算、生活还是时尚,都能在这里找到最新鲜、最热门的内容。我们精选优质文章,为您呈现一个丰富多彩的信息世界,让您在轻松阅读中领略不同领域的魅力,感受时代的脉搏。
  • 作文热门
  • 情感热门
  • 生活热门
分类猜你喜欢
    分类猜你喜欢栏目,根据您的阅读偏好和兴趣,为您精准推荐热门文章。我们运用智能算法,为您呈现最符合您口味的精彩内容。无论是深度解析、趣味科普还是心灵鸡汤,这里都有您喜欢的文章,让您在阅读中享受乐趣,发现更多精彩。
  • 作文分类!
  • 情感分类!
  • 生活分类!
© Copyright Amupu.Z-Blog.Some Rights Reserved.