HTML5星空特效代碼
HTML5技術可以為網頁帶來各種各樣的特效和互動效果。其中,星空特效可以為網頁增加浪漫和神秘的氛圍。以下是一個使用HTML5和CSS3編寫的星空特效代碼。
代碼如下:
/* 創(chuàng)建星空背景 */ body { background-color: #000; background-image: url('https://cdn.pixabay.com/photo/2014/09/25/12/54/space-459007_960_720.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; } /* 創(chuàng)建星星 */ .star { position: absolute; top: 0; width: 1px; height: 1px; border-radius: 50%; box-shadow: 0px 0px 2px #fff; } /* 添加動畫效果 */ .star:hover { animation: flicker 1s ease-in-out infinite; } /* 創(chuàng)建星星閃爍動畫 */ @keyframes flicker { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } /* 添加星星到網頁上 */ var stars = 400; var $starContainer = document.querySelector('.stars'); var starCoords = []; for (var i = 0; i< stars; i++) { var $star = document.createElement('div'); $star.classList.add('star'); var top = Math.floor(Math.random() * window.innerHeight); var left = Math.floor(Math.random() * window.innerWidth); starCoords.push({ top: top, left: left }); $star.style.top = top + 'px'; $star.style.left = left + 'px'; $starContainer.appendChild($star); }以上代碼中,我們首先為網頁的背景設置了一張星空的圖片。然后通過CSS樣式創(chuàng)建了星星的形狀和樣式,并為其添加了閃爍動畫效果。最后,在JavaScript中通過循環(huán)創(chuàng)建了一定數量的星星,并將它們添加到網頁上。 快來試試這段代碼,創(chuàng)造一個充滿神秘和浪漫氣氛的HTML5星空吧!
下一篇scalex css