HTML动态心形代码源码：
<!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> <title>动态心形代码</title> <style> #heart { position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -42.5px; } #heart:hover { cursor: pointer; } .heart { background: red; width: 50px; height: 50px; position: absolute; transform: rotate(45deg); } .heart:after { background: red; content: ""; width: 50px; height: 50px; border-radius: 25px 0 0 25px; position: absolute; left: 0; top: -25px; } .heart:before { background: red; content: ""; width: 50px; height: 50px; border-radius: 0 25px 25px 0; position: absolute; left: 25px; top: 0; } </style> </head> <body> <div id="heart"> <div class="heart"></div> </div> <script> var heart = document.querySelector('#heart'); heart.addEventListener('click',function(e) { var heart = document.createElement('div'); heart.classList.add('heart'); heart.style.left = e.clientX - 25 + 'px'; heart.style.top = e.clientY - 42.5 + 'px'; heart.addEventListener('animationend',function() { heart.remove(); }); document.body.appendChild(heart); }); </script> </body> </html>
本代码实现了一个简单的动态心形效果，当鼠标点击屏幕时会产生一个从鼠标位置飘落下来的动态心形，当心形运动结束时会自动消失。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
