我需要一个表白爱心的网页,你能写一段代码来实现吗?
时间: 2023-05-24 18:02:10 浏览: 43
当然可以,以下是一个简单的实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表白爱心</title>
</head>
<body>
<div id="heart"></div>
<script>
function createHeart(x, y) {
var heart = document.createElement('div');
heart.className = 'heart';
document.body.appendChild(heart);
heart.style.left = x - heart.offsetWidth / 2 + 'px';
heart.style.top = y - heart.offsetHeight / 2 + 'px';
setTimeout(function() {
heart.remove();
}, 3000);
}
document.addEventListener('click', function(e) {
createHeart(e.pageX, e.pageY);
}, false);
</script>
<style>
.heart {
position: fixed;
width: 32px;
height: 32px;
background: url(https://i.imgur.com/9v1Bf8U.png) no-repeat;
background-size: contain;
animation: heartBeat 0.8s cubic-bezier(0.2, 0.68, 0.18, 1.08) both;
z-index: 1000;
}
@keyframes heartBeat {
from {transform: scale(1);}
to {transform: scale(1.2);}
}
</style>
</body>
</html>
```
你可以将该代码保存为一个 html 文件,然后在浏览器中打开该文件,点击页面即可出现表白爱心!