帮我用js写一个动态的爱心
时间: 2023-03-29 12:02:41 浏览: 52
好的,以下是一个用JS实现的动态爱心的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态爱心</title>
<style>
#heart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 90px;
background: transparent;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
</style>
</head>
<body>
<div id="heart"></div>
<script>
function animateHeart() {
const heart = document.getElementById('heart');
heart.style.transform = 'scale(1)';
heart.style.opacity = '1';
setTimeout(() => {
heart.style.transform = 'scale(.9)';
heart.style.opacity = '.9';
}, 500);
setTimeout(() => {
heart.style.transform = 'scale(1)';
heart.style.opacity = '1';
}, 1000);
}
setInterval(animateHeart, 2000);
</script>
</body>
</html>
```
这段代码会在页面中创建一个DIV元素,并使用CSS样式将其形状设置为一个红色的爱心。接着,使用JS的动画效果让这个爱心在页面中不断缩放,从而实现动态效果。你可以将这段代码复制粘贴到你的HTML文件中,就可以看到动态爱心效果了。
相关推荐
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)