首页请帮我生成一份跳动爱心的html

请帮我生成一份跳动爱心的html

时间: 2023-02-25 12:39:36 浏览: 83

好的，下面是一份跳动爱心的 HTML 代码： ``` <!DOCTYPE html> <html> <head> <style> .heart { width: 100px; height: 100px; position: relative; margin: 100px auto; } .heart:before, .heart:after { content: ""; position: absolute; top: 45px; width: 80px; height: 80px; background: red; border-radius: 50% 50% 0; transform: rotate(45deg); transform-origin: 0 100%; } .heart:after { left: -15px; top: 70px; transform: rotate(-45deg); transform-origin: 100% 100%; } @keyframes heartbeat { 0% { transform: scale(0.95); } 5% { transform: scale(1); } 39% { transform: scale(1); } 45% { transform: scale(0.95); } 60% { transform: scale(0.95); } 100% { transform: scale(0.95); } } .heart.animate { animation: heartbeat 1s ease-in-out infinite; } </style> </head> <body> <div class="heart animate"></div> </body> </html> ``` 将代码保存为一个 .html 文件，然后用浏览器打开，您就可以看到一个跳动的爱心了。

阅读全文