写个跳动的心html页面
时间: 2023-11-03 16:08:21 浏览: 49
好的,我会给您展示一个简单的跳动的心的 HTML 页面:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跳动的心</title>
<style>
/* 设置心形的颜色、大小、位置 */
.heart {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
transform: translate(-25px, -25px);
background-color: red;
border-radius: 50% 50% 0 0;
animation: pulse 1s ease-in-out infinite;
}
/* 设置跳动动画 */
@keyframes pulse {
0% {
transform: scale(0.8);
}
70% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
</style>
</head>
<body>
<!-- 创建心形 div -->
<div class="heart"></div>
</body>
</html>
```
这个页面使用 CSS3 动画制作了一个跳动的红色心形,大小为 50px,位置在中心。这个心形以 1 秒的时间在缩放,跳动效果非常可爱。希望您喜欢这个小玩意儿!