首页HTML 爱心跳动表白代码

HTML 爱心跳动表白代码

时间: 2024-09-14 16:08:35 浏览: 48

HTML 爱心跳动表白代码通常是使用 HTML 结合 CSS 和 JavaScript 来创建一个动态的动画效果，使文字或图像像心脏跳动一样有节奏地进行动画展示。下面是一个简单的例子，展示如何使用 HTML 和 CSS 创建一个类似心脏跳动的动画效果： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>爱心跳动效果</title> <style> .heart-wrapper { position: relative; width: 100px; height: 100px; margin: 100px auto; transform: rotate(-45deg); animation: beat .5s infinite; } .heart-wrapper:before, .heart-wrapper:after { content: ''; position: absolute; width: 100px; height: 100px; background: red; } .heart-wrapper:before { border-radius: 100px 100px 0 0; top: -50px; left: 0; } .heart-wrapper:after { border-radius: 100px 100px 0 0; top: 0; left: 50px; } @keyframes beat { 0% { transform: scale(1) rotate(-45deg); } 50% { transform: scale(0.9) rotate(-45deg); } 100% { transform: scale(1) rotate(-45deg); } } </style> </head> <body> <div class="heart-wrapper">  </div> </body> </html> ``` 在这个例子中，`.heart-wrapper` 类定义了爱心的基本形状和大小，`:before` 和 `:after` 伪元素用来创建爱心的上下两部分。通过 `border-radius` 属性使角变圆，从而形成爱心形状。`@keyframes` 定义了一个名为 `beat` 的动画，该动画通过 `transform: scale()` 改变爱心的大小，模拟心脏跳动的效果。

阅读全文