520向你的crush表白吧~

最新推荐文章于 2024-05-21 18:11:13 发布

ROSE_木木夕

最新推荐文章于 2024-05-21 18:11:13 发布

阅读量86

点赞数 1

分类专栏：娱乐贴文章标签： html

本文链接：https://blog.csdn.net/m0_63857646/article/details/130780714

版权

娱乐贴专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图大概是这样子

因为爱心弹跳觉得太变态了就没让它动

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啦！