<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爱❤️的制裁</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
margin: 0;
flex-direction: column;
overflow: hidden;
position: relative;
}
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
top: 0;
width: 100px;
height: 160px;
border-radius: 100px 100px 0 0;
background: red;
}
.heart::before {
left: 100px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart::after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes pulse {
0% {
transform: scale(0.95);
}
70% {
transform: scale(1);
}
100% {
transform: scale(0.95);
}
}
.heart {
animation: pulse 1s infinite;
}
.message {
margin-top: 20px;
font-size: 24px;
color: white;
text-align: center;
}
.floating-love {
position: absolute;
font-size: 20px;
color: white;
animation: float 5s linear infinite;
}
@keyframes float {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-200px);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="heart"></div>
<div class="message">💗</div>
<script>
function createFloatingLove() {
const loveElement = document.createElement('div');
loveElement.textContent = '❤️ love';
loveElement.className = 'floating-love';
loveElement.style.left = Math.random() * (window.innerWidth - 50) + 'px'; // Adjust to fit within the window
loveElement.style.top = Math.random() * (window.innerHeight - 50) + 'px'; // Adjust to fit within the window
document.body.appendChild(loveElement);
setTimeout(() => {
loveElement.remove();
}, 5000); // Remove after animation
}
setInterval(createFloatingLove, 1000);
</script>
</body>
</html>
10-26
3719
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
10-03
8862
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
12-31
2万+
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-03
176
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-04
531
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-09