找到
1
篇与
js
相关的结果
-
七夕表白必备源码 AI摘要 七夕表白必备源码，包含星空背景、打字机效果和爱心动画，可自定义文案。 此内容根据文章生成，不代表个人观点，仅用于文章内容的解释与总结 12122.png图片 code here...<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>专属表白</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #000; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } /* 星空背景 */ .stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } /* 表白文案容器 */ .text-box { position: relative; z-index: 2; color: #fff; font-size: 24px; font-family: "微软雅黑"; padding: 20px 40px; border: 2px solid #ff69b4; border-radius: 10px; background: rgba(0,0,0,0.5); box-shadow: 0 0 20px #ff69b4; } /* 打字机效果 */ .typing { overflow: hidden; white-space: nowrap; border-right: 3px solid #ff69b4; animation: typing 5s steps(50) 1s 1 normal both, blink 0.5s infinite; } /* 爱心动画 */ .heart { position: absolute; color: #ff69b4; font-size: 20px; animation: float 3s infinite ease-in-out; opacity: 0; } /* 动画定义 */ @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink { from { border-color: transparent; } to { border-color: #ff69b4; } } @keyframes float { 0% { transform: translateY(0); opacity: 0.8; } 50% { transform: translateY(-20px); opacity: 1; } 100% { transform: translateY(0); opacity: 0.8; } } </style> </head> <body> <div class="stars" id="stars"></div> <div class="text-box"> <div class="typing" id="loveText">我喜欢你，不止一点点✨</div> </div> <script> // 自定义表白文案（改这里！） const loveWords = "我喜欢你，不止一点点✨"; document.getElementById("loveText").textContent = loveWords; // 生成星空 function createStars() { const stars = document.getElementById("stars"); for (let i = 0; i < 100; i++) { const star = document.createElement("div"); star.style.position = "absolute"; star.style.left = `${Math.random() * 100}%`; star.style.top = `${Math.random() * 100}%`; star.style.width = `${Math.random() * 3 + 1}px`; star.style.height = star.style.width; star.style.background = "#fff"; star.style.borderRadius = "50%"; star.style.opacity = Math.random(); star.style.animation = `twinkle ${Math.random() * 3 + 2}s infinite`; stars.appendChild(star); } } // 生成爱心 function createHearts() { setInterval(() => { const heart = document.createElement("div"); heart.className = "heart"; heart.textContent = "❤️"; heart.style.left = `${Math.random() * 100}%`; heart.style.top = `${Math.random() * 100}%`; heart.style.animationDelay = `${Math.random() * 2}s`; document.body.appendChild(heart); // 3秒后移除爱心 setTimeout(() => { heart.remove(); }, 3000); }, 500); } // 添加闪烁动画 const style = document.createElement("style"); style.textContent = ` @keyframes twinkle { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } `; document.head.appendChild(style); // 初始化 createStars(); createHearts(); </script> </body> </html>
