首页给我完整的代码实现一个炫酷的爱心特效

给我完整的代码实现一个炫酷的爱心特效

时间: 2024-10-21 11:03:31 浏览: 34

实现一个炫酷的爱心特效通常需要HTML、CSS和可能的话，还有JavaScript。下面是一个基本的JavaScript和CSS结合的例子，创建了一个动态爱心闪烁的动画： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .heart-shimmer { display: inline-block; width: 100px; height: 100px; position: relative; background-color: rgba(255,0,0,0.8); transform-origin: bottom center; animation: shimmer 2s infinite ease-in-out; } @keyframes shimmer { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } </style> </head> <body> <button onclick="rotateHeart()">点击看效果</button> <div id="heart" class="heart-shimmer"></div> <script> function rotateHeart() { const heart = document.getElementById('heart'); if (heart.style.transform === 'rotateY(0deg)') { heart.style.transform = 'rotateY(180deg)'; } else { heart.style.transform = 'rotateY(0deg)'; } } </script> </body> </html> ``` 在这个代码中，当用户点击按钮时，爱心元素会旋转180度，给人一种“闪烁”动感。`shimmer` 动画则会让爱心在大小上稍微膨胀一下，增加视觉效果。

阅读全文