首页html粒子爱心动态代码

html粒子爱心动态代码

时间: 2024-10-01 20:00:39 浏览: 80

HTML粒子爱心动态代码通常通过CSS动画和JavaScript实现，下面是一个简单的例子，展示了如何创建一个点击放大并改变颜色的心形动态效果： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .heart { width: 50px; height: 50px; position: relative; transform-origin: center bottom; } .heart::before, .heart::after { content: ""; position: absolute; width: 0; height: 0; border-radius: 50%; transition: all 0.3s ease-in-out; } .heart::before { top: -25px; left: calc(50% - 7px); border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 28px solid red; } .heart::after { bottom: -25px; left: calc(50% - 6px); border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 28px solid red; } .heart:hover { transform: scale(1.1); } </style> </head> <body> <button onclick="changeColor(this)">点击变色</button> <div class="heart" id="heart"></div> <script> function changeColor(element) { const heart = document.getElementById('heart'); let currentColor = window.getComputedStyle(heart).borderBottomColor; // 可以添加更多颜色变化，这里仅示例两个 if (currentColor === 'red') { heart.style.borderColor = 'blue'; } else { heart.style.borderColor = 'red'; } } </script> </body> </html> ``` 这个代码创建了一个红色心形，当鼠标悬停或点击按钮时，心形会放大并在红蓝之间切换颜色。

阅读全文