首页我想要htlm的旋转爱心源码

我想要htlm的旋转爱心源码

时间: 2023-06-26 22:09:24 浏览: 37

以下是一个简单的 HTML 代码，可以实现旋转的爱心效果： ```html <!DOCTYPE html> <html> <head> <title>旋转爱心</title> <style type="text/css"> .heart { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; animation: rotateHeart 2s linear infinite; } .heart:before, .heart:after { position: absolute; content: ""; left: 25px; top: 0; width: 25px; height: 40px; background: red; border-radius: 25px 25px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } @keyframes rotateHeart { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } </style> </head> <body> <div class="heart"></div> </body> </html> ``` 你可以将这段代码复制到一个 HTML 文件中，然后在浏览器中打开该文件，就可以看到一个旋转的爱心。你也可以根据自己的需求来修改该代码。