大家好呀!今天是我生日。雖然今年因為疫情原因不能和大家在一起,但是我還是很開心能和大家分享這個特別的日子!
為了慶祝我的生日,我準備了一份驚喜——這是一個用HTML代碼來做的煙花特效,并且還有生日快樂的字樣!準備好迎接這場精彩的表演了嗎?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>生日快樂!</title> <style> .firework{ position: absolute; border-radius: 50%; background-color: #f68; animation: explode 1s ease-out forwards; } @keyframes explode{ to { transform: scale(5); opacity: 0; } } p{ position: absolute; top: calc(50% - 50px); left: calc(50% - 150px); font-size: 80px; color: #fff; -webkit-text-stroke: 2px black; animation: float 2s ease-out infinite; } @keyframes float{ 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } </style> </head> <body> <p>生日快樂!</p> <script> var FIR_COUNT = 42; var area = document.getElementById('area'); for (var i = 0; i < FIR_COUNT; i++) { var firework = document.createElement('div'); firework.className = 'firework'; firework.style.left = (Math.random() * 100) + '%'; firework.style.top = (Math.random() * 100) + '%'; area.appendChild(firework); } </script> </body> </html>
代碼中,我使用了HTML標簽、CSS樣式和JavaScript來創造一個煙花特效,并且配上“生日快樂”的字樣,來為大家獻上一份小小的禮物。這個特效共有42個煙花火花,色彩斑斕,非常好看呢!
希望大家能喜歡我的這個小小的生日驚喜,也希望大家都有快樂的每一天!