首页画一个动态爱心用HTML

画一个动态爱心用HTML

时间: 2023-10-29 20:04:44 浏览: 83

以下是一个简单的HTML代码，实现动态心形图案： ```html <!DOCTYPE html> <html> <head> <title>动态爱心</title> <style> .heart { position: relative; animation: beat 0.75s infinite linear; transform-origin: center; } @keyframes beat { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .heart:before, .heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; border-radius: 50px 50px 0 0; background-color: red; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } </style> </head> <body> <div class="heart"></div> </body> </html> ``` 你可以将以上代码复制到一个HTML文件中，并在浏览器中打开，就可以看到一个动态的爱心图案了！

阅读全文