首页html满屏爱心特效代码

html满屏爱心特效代码

时间: 2024-05-18 09:10:04 浏览: 198

HTML满屏爱心特效代码可以通过以下步骤实现： 1. 创建一个新的HTML文件，并在文件中添加以下代码： ``` <html> <head> <title>满屏爱心特效</title> <style> body { background-color: #f8e7e7; overflow: hidden; } .heart { position: absolute; background-color: #fc2d2d; width: 10px; height: 10px; transform: rotate(45deg); animation: heart 1s ease-in-out infinite; } @keyframes heart { 0% { transform: scale(0.75); } 20% { transform: scale(1); } 40% { transform: scale(0.75); } 60% { transform: scale(1); } 80% { transform: scale(0.75); } 100% { transform: scale(0.75); } } </style> </head> <body> <script> var hearts = []; var heartImage = 'https://cdn.jsdelivr.net/gh/lin-xin/blog-images/pure-css/heart.png'; var heartWidth = 40; var heartHeight = 36; var maxHearts = 20; var minScale = 0.4; var maxScale = 0.8; function createHeart() { var heart = document.createElement('div'); heart.classList.add('heart'); heart.style.backgroundImage = 'url(' + heartImage + ')'; heart.style.width = heartWidth + 'px'; heart.style.height = heartHeight + 'px'; heart.style.left = Math.floor(Math.random() * window.innerWidth) + 'px'; heart.style.top = Math.floor(Math.random() * window.innerHeight) + 'px'; heart.style.transform = 'scale(' + (Math.random() * (maxScale - minScale) + minScale) + ')'; hearts.push(heart); document.body.appendChild(heart); setTimeout(function() { heart.remove(); hearts.splice(hearts.indexOf(heart), 1); }, 3000); } setInterval(function() { if (hearts.length < maxHearts) { createHeart(); } }, 200); </script> </body> </html> ``` 2. 将代码中的`heartImage`变量替换为你想要使用的爱心图片的URL地址，也可以使用纯色背景。 3. 打开HTML文件，你将会看到屏幕上出现了满屏飘动的爱心。

阅读全文