你可以用html,css,js写一个跳动的爱心吗
时间: 2023-06-07 21:10:03 浏览: 62
当然可以!以下是一个用HTML、CSS和JS实现的跳动爱心的代码示例:
HTML代码:
```
<div class="heart-container">
<div class="heart"></div>
</div>
```
CSS代码:
```
.heart-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.heart {
width: 50px;
height: 50px;
position: relative;
transform: rotate(45deg);
transform-origin: center;
border-radius: 50% 50% 0 0;
background: #f00;
animation: heartbeat 1s infinite;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
25% {
transform: scale(1.1);
}
40% {
transform: scale(1);
}
60% {
transform: scale(1.2);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
```
JS代码:
```
// 无需JS代码,仅为完整的代码示例
```
该代码将在页面居中显示一个跳动的红色爱心。