你现在是一名高级程序员,请你用HTML帮我写一个程序,要求画两个火柴人分别在左右两边,左边的人向右边的人发送一个爱心,右边的人接受到爱心之后,也向左边的人发送一个比较大的爱心,上面有感谢兄弟们的祝福这几个字,
时间: 2024-03-11 15:43:49 浏览: 18
好的,以下是HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>火柴人传递爱心</title>
<style>
.container{
display: flex;
justify-content: space-between;
align-items: center;
height: 500px;
}
.left, .right{
width: 300px;
height: 450px;
background-color: lightblue;
border-radius: 50% 50% 0 0;
position: relative;
overflow: hidden;
}
.left:after, .right:after{
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
background-color: white;
border-radius: 50%;
}
.left:after{
top: -25px;
}
.right:after{
top: -10px;
}
.heart{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: url("https://i.imgur.com/6oPbNjW.png") no-repeat center;
background-size: contain;
animation: pulse 2s infinite;
opacity: 0;
}
.heart.show{
opacity: 1;
}
.love{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
color: white;
font-weight: bold;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
opacity: 0;
}
.love.show{
opacity: 1;
animation: grow 1s ease-out;
}
.thanks{
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
color: white;
font-weight: bold;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
@keyframes pulse{
0%{
transform: scale(0.8);
}
50%{
transform: scale(1.2);
}
100%{
transform: scale(0.8);
}
}
@keyframes grow{
0%{
transform: scale(0);
}
100%{
transform: scale(1.5);
}
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="heart"></div>
<div class="love">❤️</div>
</div>
<div class="right">
<div class="heart"></div>
<div class="love thanks">感谢兄弟们的祝福</div>
</div>
</div>
<script>
const left = document.querySelector('.left');
const right = document.querySelector('.right');
const leftHeart = left.querySelector('.heart');
const rightHeart = right.querySelector('.heart');
const leftLove = left.querySelector('.love');
const rightLove = right.querySelector('.love');
const thanks = right.querySelector('.thanks');
leftHeart.addEventListener('animationend', function(){
this.classList.remove('show');
rightHeart.classList.add('show');
rightLove.classList.add('show');
setTimeout(function(){
rightLove.classList.remove('show');
thanks.classList.add('show');
}, 1000);
});
left.addEventListener('click', function(){
leftHeart.classList.add('show');
leftLove.classList.add('show');
});
</script>
</body>
</html>
```
这个程序通过 flex 布局将两个火柴人放在页面的两侧,并在他们的中间放置一个空心的圆形,模拟两个人之间传递爱心的过程。当左边的火柴人被点击时,会出现一个爱心,并向右边的火柴人发送一个实心的爱心。当右边的火柴人接受到爱心时,会出现一个比较大的爱心,上面有“感谢兄弟们的祝福”这几个字。