效果图大概是这样子
因为爱心弹跳觉得太变态了就没让它动
520是可以变色的
背景是坠落粉色点点
非常简易
简单则美 保持smile :)
附代码:
<!DOCTYPE html>
<html>
<head>
<title>I have a crush on you~</title>
<style>
body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.heart {
width: 300px;
height: 300px;
background-color: red;
position: relative;
transform: rotate(-45deg);
margin: 0 auto;
}
.heart::before,
.heart::after {
content: '';
position: absolute;
width: 300px;
height: 300px;
background-color: red;
}
.heart::before {
border-radius: 200px 200px 0 0;
top: -150px;
left: 0;
}
.heart::after {
border-radius: 200px 200px 200px 0;
top: 0;
left: 150px;
}
.text {
text-align: center;
font-size: 108px;
margin-top: 50px;
transform: translateY(50%);
animation: colorChange 6s infinite;
}
.subtext {
font-size: 108px;
}
@keyframes colorChange {
0% {
color: #ff0000; /* 红色 */
}
20% {
color: #ff4500; /* 橙色 */
}
40% {
color: #ffd700; /* 黄色 */
}
60% {
color: #0000ff; /* 蓝色 */
}
80% {
color: #8a2be2; /* 紫色 */
}
100% {
color: #ff69b4; /* 浅粉色 */
}
}
.bubble {
position: absolute;
width: 10px;
height: 10px;
background-color: pink;
opacity: 0.8;
border-radius: 50%;
animation: bubbleFall 10s infinite;
}
@keyframes bubbleFall {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100vh);
}
}
</style>
</head>
<body>
<div class="heart"></div>
<div class="text">520</div>
<div class="subtext">I HAVE A CRUSH ON YOU</div>
<script>
for (let i = 0; i < 50; i++) {
createBubble();
}
function createBubble() {
const bubble = document.createElement("div");
bubble.classList.add("bubble");
bubble.style.left = Math.random() * 100 + "vw";
bubble.style.animationDuration = Math.random() * 6 + 3 + "s";
document.body.appendChild(bubble);
setTimeout(() => {
bubble.remove();
}, 10000);
}
</script>
</body>
</html>
新建一个txt文件,然后把代码放进去
修改后缀为.html
就可以发给你的crush啦!