首页html写一个动态的爱心代码

html写一个动态的爱心代码

时间: 2023-10-26 22:18:16 浏览: 102

以下是一个简单的 HTML 爱心动态代码： ```html <!DOCTYPE html> <html> <head> <title>动态爱心</title> <style> body { background-color: #f8f8f8; text-align: center; margin-top: 50px; } .heart { position: relative; margin: auto; width: 100px; height: 90px; } .heart:before, .heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } .heart:hover:before, .heart:hover:after { background: pink; animation: beat 1s infinite linear; } @keyframes beat { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } </style> </head> <body> <div class="heart"></div> </body> </html> ``` 这个代码创建了一个红色的爱心，当鼠标悬停在上面时，爱心会变成粉色并且有一个跳动的动画效果。您可以将此代码复制到您的编辑器中，将其保存为 HTML 文件并在浏览器中打开，就可以看到动态的爱心了。

阅读全文