首页写一个html的爱心代码慢慢呈现出爱心的效果爱心粉色做工好看一点

写一个html的爱心代码慢慢呈现出爱心的效果爱心粉色做工好看一点

时间: 2024-05-18 14:10:25 浏览: 118

可以使用CSS3的动画效果来实现慢慢呈现出爱心的效果。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>爱心特效</title> <style> .heart { position: relative; width: 100px; height: 90px; margin: 100px auto; transform: rotate(-45deg); animation: love 5s forwards; } .heart:before, .heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: #FFC0CB; border-radius: 50px 50px 0 0; transform: rotate(-45deg); } .heart:before { border-radius: 0 50px 0 0; transform: rotate(45deg); } @keyframes love { from { height: 0; } to { height: 90px; } } </style> </head> <body> <div class="heart"></div> </body> </html> ``` 这个示例中，我们定义了一个`.heart`类来表示爱心，然后使用`:before`和`:after`伪类来定义两个半圆形来组成一个完整的爱心。使用`animation`属性来实现动画效果，`@keyframes`规则定义了动画从开始到结束的过程。你可以将CSS代码中的颜色改为粉色，以便更符合你的需求。

阅读全文