用html画个会动的爱心
时间: 2023-02-06 22:24:22 浏览: 191
好的,这是一个用 HTML 画出会动的爱心的例子:
```
<html>
<head>
<style>
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.heart {
animation: pulse 1s infinite;
}
</style>
</head>
<body>
<div class="heart">
<svg width="100" height="90">
<path d="M 50,50 m -45,0 a 45,45 0 1,1 90,0 a 45,45 0 1,1 -90,0" stroke="#ED4956" stroke-width="5" fill="none"/>
</svg>
</div>
</body>
</html>
```
这里使用了 HTML 的 `<svg>` 元素和 CSS 的 `@keyframes` 动画,来实现爱心图案的放大和缩小效果。这段代码中,`@keyframes pulse` 定义了一个名为 "pulse" 的动画,在动画过程中,爱心图案会从原始大小放大到 1.2 倍,然后再恢复到原始大小。这个动画会无限循环执行,因为在 CSS 样式中使用了 `animation: pulse 1s infinite;`。
相关问题
画一个动态爱心用HTML
以下是一个简单的HTML代码,实现动态心形图案:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态爱心</title>
<style>
.heart {
position: relative;
animation: beat 0.75s infinite linear;
transform-origin: center;
}
@keyframes beat {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.heart:before, .heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
border-radius: 50px 50px 0 0;
background-color: red;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
```
你可以将以上代码复制到一个HTML文件中,并在浏览器中打开,就可以看到一个动态的爱心图案了!
用html画一个动态的爱心
你可以使用HTML代码来画一个动态的爱心,代码如下:
<html>
<head>
<title>动态爱心</title>
</head>
<body>
<div>
<div style="background-color: #FF0000; width: 50px; height: 50px; border-radius: 50%; animation: heart 1s infinite;">
<style>
@keyframes heart {
0% {transform: scale(1);}
25% {transform: scale(1.2);}
50% {transform: scale(1);}
75% {transform: scale(1.2);}
100% {transform: scale(1);}
}
</style>
</div>
</div>
</body>
</html>