你现在是一名高级程序员,请你用HTML帮我写一个程序,要求画两个小人分别在左右两边,左边的小人向右边发送一个爱心,右边小人接受到爱心之后,也向左边发送一个比较大的爱心,上面有感谢兄弟们的祝福这几个字,
时间: 2024-03-11 07:43:55 浏览: 80
爱心代码.HTML.html
很高兴为您提供帮助,以下是一份HTML代码,您可以直接复制粘贴到HTML文件中进行测试:
```html
<!DOCTYPE html>
<html>
<head>
<title>两个小人的爱心交换</title>
<style type="text/css">
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 500px;
}
.person {
width: 200px;
height: 300px;
background-image: url('https://www.w3schools.com/howto/img_avatar.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.heart {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-image: url('https://www.w3schools.com/howto/img_heart.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
animation: heartAnimation 1s ease-in-out;
animation-fill-mode: forwards;
}
@keyframes heartAnimation {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
100% {
transform: scale(2);
opacity: 0;
}
}
.big-heart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-image: url('https://www.w3schools.com/howto/img_heart2.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: none;
}
.message {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
color: white;
display: none;
}
.person.left .heart {
left: 100%;
animation-direction: reverse;
}
.person.left .big-heart {
right: 100%;
transform: translate(50%, -50%);
}
.person.left .message {
transform: translateX(-200%);
}
.person.right .heart {
right: 100%;
}
.person.right .big-heart {
left: 100%;
transform: translate(-50%, -50%) scale(0);
animation: bigHeartAnimation 1s ease-in-out;
animation-fill-mode: forwards;
}
.person.right .message {
transform: translateX(200%);
}
@keyframes bigHeartAnimation {
0% {
transform: translate(-50%, -50%) scale(0);
}
50% {
transform: translate(-50%, -50%) scale(2);
}
100% {
transform: translate(-50%, -50%) scale(3);
}
}
</style>
</head>
<body>
<div class="container">
<div class="person left">
<div class="heart"></div>
<div class="big-heart"></div>
<div class="message">感谢兄弟们的祝福</div>
</div>
<div class="person right">
<div class="heart"></div>
<div class="big-heart"></div>
<div class="message">感谢兄弟们的祝福</div>
</div>
</div>
<script type="text/javascript">
const leftPerson = document.querySelector('.person.left');
const leftHeart = document.querySelector('.person.left .heart');
const leftBigHeart = document.querySelector('.person.left .big-heart');
const leftMessage = document.querySelector('.person.left .message');
const rightPerson = document.querySelector('.person.right');
const rightHeart = document.querySelector('.person.right .heart');
const rightBigHeart = document.querySelector('.person.right .big-heart');
const rightMessage = document.querySelector('.person.right .message');
leftHeart.addEventListener('animationend', function() {
leftBigHeart.style.display = 'block';
leftMessage.style.display = 'block';
});
rightHeart.addEventListener('animationend', function() {
rightBigHeart.style.display = 'block';
rightMessage.style.display = 'block';
});
leftHeart.addEventListener('click', function() {
rightHeart.style.display = 'block';
leftHeart.style.display = 'none';
});
rightBigHeart.addEventListener('animationend', function() {
rightBigHeart.style.display = 'none';
rightHeart.style.display = 'none';
leftHeart.style.display = 'block';
leftBigHeart.style.display = 'none';
leftMessage.style.display = 'none';
rightMessage.style.display = 'none';
});
</script>
</body>
</html>
```
解释:这份代码使用了HTML、CSS和JavaScript来实现两个小人之间的爱心交换。其中,HTML负责页面结构的搭建,CSS负责样式的设置,JavaScript负责动态效果的实现。
具体来说,我们使用了flex布局来让左右两个小人水平排列,并使用了背景图片来设置小人的样式。同时,我们使用了绝对定位来让小人内部的元素(即爱心、大爱心和感谢兄弟们的祝福)居中显示。
在JavaScript部分,我们使用了事件监听器来监听爱心的动画结束事件,从而触发大爱心和感谢兄弟们的祝福的显示。同时,我们也使用了事件监听器来监听爱心的点击事件,从而让右边的小人接收到爱心。最后,我们使用了动画效果和定时器来让大爱心随着时间逐渐放大,最后消失。
阅读全文