写一个展示爱心的前端代码
时间: 2023-10-31 18:43:38 浏览: 31
以下是一个展示爱心的前端代码,它使用HTML、CSS和JavaScript实现了一个爱心动画:
HTML:
```html
<div class="heart-container">
<div class="heart"></div>
</div>
<button onclick="showLove()">Show Love</button>
```
CSS:
```css
.heart-container {
position: relative;
width: 100px;
height: 100px;
}
.heart {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-image: url('https://cdn.jsdelivr.net/gh/wangding/cdn-assets/heart.png');
background-size: cover;
animation: pulse 1s ease-in-out infinite;
opacity: 0;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0;
}
50% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
```
JavaScript:
```javascript
function showLove() {
const heart = document.querySelector('.heart');
heart.style.opacity = 1;
setTimeout(() => {
heart.style.opacity = 0;
}, 1000);
}
```
点击按钮后,会显示一个爱心动画,持续1秒钟。这个动画使用一个背景图片作为爱心的形状,并使用CSS动画实现了心跳的效果。JavaScript的showLove函数会在点击按钮时触发,将爱心的opacity属性设置为1,然后一秒钟后将其设置为0,使得爱心动画消失。