请你写一个动态爱心代码
时间: 2023-02-27 10:03:30 浏览: 82
java代码实现动态爱心代码示例
好的,这是一个用HTML, CSS和JavaScript制作的动态爱心代码:
HTML:
```
<div class="heart">
<span class="heart-shape"></span>
</div>
```
CSS:
```
.heart {
width: 100px;
height: 100px;
position: relative;
margin: 50px auto;
}
.heart-shape {
width: 100%;
height: 100%;
background: #e60073;
border-radius: 50% 50% 0;
transform: rotate(45deg);
position: absolute;
}
.heart-shape:before,
.heart-shape:after {
content: "";
width: 100%;;
height: 100%;
background: #e60073;
border-radius: 50% 50% 0;
position: absolute;
}
.heart-shape:before {
top: -50%;
left: 0;
}
.heart-shape:after {
top: 0;
left: -50%;
}
```
JavaScript:
```
var heart = document.querySelector('.heart');
var heartShape = document.querySelector('.heart-shape');
heart.addEventListener("click", function() {
heartShape.style.animation = "beat 1s ease infinite";
});
```
这个代码会创造一个爱心形状的div,它会在点击时呈现心跳的动画效果。
阅读全文