首页写一个会跳动的爱心脚本

写一个会跳动的爱心脚本

时间: 2024-05-13 16:15:52 浏览: 52

以下是一个简单的 HTML、CSS、JavaScript 代码，可以实现一个跳动的爱心： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>跳动的爱心</title> <style> .heart { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 90px; background-color: #ff7f7f; border-radius: 50px 50px 0 0; transform-origin: 50% 0%; animation: beat 1s ease-in-out infinite; } .heart:before, .heart:after { content: ""; position: absolute; top: 0; width: 100px; height: 100px; background-color: #ff7f7f; border-radius: 50px 50px 0 0; } .heart:before { left: -50px; transform: rotate(-45deg); } .heart:after { left: 50px; transform: rotate(45deg); } @keyframes beat { 0% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(1); } } </style> </head> <body> <div class="heart"></div> <script> function moveHeart() { var heart = document.querySelector('.heart'); var x = Math.floor(Math.random() * window.innerWidth); var y = Math.floor(Math.random() * window.innerHeight); heart.style.left = x + 'px'; heart.style.top = y + 'px'; setTimeout(moveHeart, 1000); } moveHeart(); </script> </body> </html> ``` 这个代码创建了一个红色的爱心形状，并使用 CSS 动画使其跳动。JavaScript 代码随机移动这个爱心的位置，使其看起来像是在跳动。

阅读全文