星空是許多人鐘愛的美景,而星空閃爍更是璀璨奪目。今天我們將使用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生成一組隨機位置的星星,最終實現了仿佛置身于星空之中的效果。
下一篇mysql中排序關鍵字