用js生成一个会动的爱心
时间: 2024-05-03 19:20:11 浏览: 8
好的,我可以帮你解决这个问题。你可以使用JavaScript和CSS3的动画效果来实现一个会动的爱心。代码如下:
HTML:
```
<div class="heart"></div>
```
CSS:
```
.heart {
width: 30px;
height: 30px;
position: relative;
margin: 0 auto;
transform: translateX(-20px) rotate(45deg);
}
.heart:before,
.heart:after {
content: "";
background-color: red;
border-radius: 15px 15px 0 0;
position: absolute;
transform: rotate(45deg);
}
.heart:before {
width: 30px;
height: 30px;
top: -15px;
left: 0;
}
.heart:after {
width: 30px;
height: 30px;
top: 0;
left: 15px;
}
.heart:hover:before,
.heart:hover:after {
animation: heartbeat 0.7s ease-out infinite;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
10% {
transform: scale(0.9);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
60% {
transform: scale(1);
}
80% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
```
这段代码将会生成一个会动的红色爱心。你可以通过更改CSS属性来调整这个爱心的颜色、大小和其他属性。