在Web開發(fā)中，HTML3D星空效果一直備受追捧。這種效果通過HTML的3D變換來實現(xiàn)，能夠讓用戶在網(wǎng)頁上感受到身臨其境的感覺。
<!DOCTYPE html>
<html>
<head>
<title>HTML3D星空效果</title>
<style>
body {
margin: 0;
padding: 0;
perspective: 1000px;
}
.sky {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transform-style: preserve-3d;
}
.star {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 5px #fff;
animation: flicker 1s linear infinite;
}
@keyframes flicker {
0% {
opacity: 0.5;
}
50% {
opacity: 1;
}
100% {
opacity: 0.5;
}
}
</style>
</head>
<body>
<div class="sky">
<!-- 生成500個星星 -->
<?php for($i=0; $i<500; $i++): ?>
<div class="star"></div>
<?php endfor; ?>
</div>
</body>
</html>上面的代碼中，通過position: absolute讓星星的位置可以根據(jù)網(wǎng)頁的高度和寬度自適應(yīng)，同時使用transform-style: preserve-3d讓星星具有3D效果。通過animation屬性設(shè)置星星的閃爍動畫，讓星星看起來更加真實。要注意的是，在生成星星的循環(huán)中使用了PHP語法。這是因為生成500個星星的HTML代碼會讓網(wǎng)頁加載變得非常緩慢，使用PHP可以通過循環(huán)來動態(tài)生成HTML代碼，提高網(wǎng)頁加載效率。