欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

星空閃爍css3

錢多多2年前9瀏覽0評論

星空是許多人鐘愛的美景,而星空閃爍更是璀璨奪目。今天我們將使用CSS3,展示如何創建一個星空閃爍的效果。

/* 設置背景色 */
body{
background-color: #000;
}
/* 添加一個星星元素 */
.star{
position: fixed;
width: 2px;
height: 2px;
background-color: #fff;
border-radius: 50%;
}
/* 使用動畫使星星閃爍 */
@keyframes twinkling{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
/* 將閃爍效果應用在星星元素上 */
.star.active{
animation: twinkling 1s ease-in-out infinite alternate;
}
/* 創建一組星星 */
.star-group{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* 使用JavaScript隨機生成星星 */
for(let i=0; i<100; i++){
const star = document.createElement('div');
star.className = 'star';
star.style.top = `${Math.random() * 100}%`;
star.style.left = `${Math.random() * 100}%`;
const delay = Math.random() * 10;
star.style.animationDelay = `${delay}s`;
document.querySelector('.star-group').appendChild(star);
setTimeout(() =>{
star.classList.add('active');
}, delay*1000);
}

以上代碼使用CSS3的動畫屬性和JavaScript的DOM操作,構建了一個星空閃爍的效果。我們創建了一個星星元素,使用動畫讓其閃爍,并通過JavaScript生成一組隨機位置的星星,最終實現了仿佛置身于星空之中的效果。