首页HTml动态爱心代码

HTml动态爱心代码

时间: 2024-10-18 19:01:54 浏览: 80

HTML动态爱心代码通常使用CSS样式和JavaScript来创建交互式的元素，比如SVG(Scalable Vector Graphics)可以用于生成复杂的矢量图形，包括爱心形状。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .heart { width: 100px; height: 80px; position: relative; transform-origin: bottom center; } .heart:before, .heart:after { content: ""; position: absolute; left: 50%; top: 15%; border-radius: 50% 50% 0 0; width: 0; height: 0; transition: all 0.3s ease-in-out; } .heart:before { transform: translateX(-50%) rotate(60deg); border-left-color: red; border-width: 18px 0 18px 18px; } .heart:after { transform: translateX(-50%) translateY(-20px) rotate(-60deg); border-right-color: red; border-width: 18px 18px 18px 0; } </style> <script> document.addEventListener('click', function(e) { var target = e.target.closest('.heart'); if (target) { target.style.transform = 'scale(1.1)'; setTimeout(function() { target.style.transform = ''; }, 300); } }); </script> </head> <body> <div class="heart"></div> </body> </html> ``` 这个示例中，当你点击屏幕上的爱心图标时，它会稍微放大并恢复原状，看起来像是动态的心形。

阅读全文