HTML 爱心跳动表白代码
时间: 2024-09-14 08:08:35 浏览: 40
七夕情人节 跳动爱心 html代码
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()` 改变爱心的大小,模拟心脏跳动的效果。
阅读全文