最近在學習HTML編程,學到了一個很有趣的代碼——滿屏飄愛心代碼。這個代碼可以讓屏幕上飄滿了愛心,十分浪漫和溫馨。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滿屏飄愛心代碼</title> <style> * { margin: 0; padding: 0; cursor: none; } body { overflow: hidden; } .heart { position: absolute; width: 100px; height: 90px; background: url('https://cdn.jsdelivr.net/gh/chokcoco/static_resources/img/heart.png') no-repeat; background-size: 100% 100%; animation: heart 1.2s ease-in-out infinite; } @keyframes heart { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(45deg) scale(1.3); } 100% { transform: rotate(0deg) scale(1); } } </style> </head> <body> <script> setInterval(function() { var r = Math.floor(Math.random() * 255); var g = Math.floor(Math.random() * 255); var b = Math.floor(Math.random() * 255); var a = Math.random() * 0.5 + 0.5; var fontSize = Math.floor(Math.random() * 30 + 10); var div = document.createElement("div"); div.innerHTML = "<div class='heart' style='left: " + Math.floor(Math.random() * window.innerWidth) + "px; top: " + Math.floor(Math.random() * window.innerHeight) + "px; color: rgba(" + r + "," + g + "," + b + "," + a + "); font-size: " + fontSize + "px;'></div>"; document.body.appendChild(div.firstChild); }, 200); </script> </body> </html>
這段代碼需要在HTML中嵌入CSS和JavaScript代碼,并使用循環語句定時向屏幕添加愛心元素。愛心元素的樣式通過CSS進行設置,可以自定義愛心的大小、顏色、旋轉等特效,非常容易上手。
使用這段代碼可以為網站或者電子賀卡增添一份浪漫和溫馨,讓用戶感受到愛的力量。