首页html跳动爱心特效代码

html跳动爱心特效代码

时间: 2024-09-30 14:16:06 浏览: 56

HTML本身并不直接支持动画效果，但你可以通过JavaScript配合CSS实现一个简单的跳动爱心特效。下面是一个基本的例子，使用了JavaScript的setInterval函数和CSS的transform属性来创建动态效果： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .heart { width: 50px; height: 50px; position: relative; background-color: red; animation: bounce 2s infinite alternate; } @keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } </style> </head> <body> <div class="heart heart-bounce"></div> <script> window.onload = function() { const hearts = document.querySelectorAll('.heart-bounce'); hearts.forEach(function(heart) { heart.classList.add('bounce'); }); }; </script> </body> </html> ``` 在这个示例中，`.heart` 容器有一个名为 `bounce` 的CSS动画，使得爱心元素上下跳跃。JavaScript会在页面加载完成后为所有 `.heart-bounce` 类的元素添加 `bounce` 类，激活动画。

阅读全文