给女神写的动态表白代码

智界工具库

已于 2024-07-16 10:32:40 修改

阅读量121

点赞数 1

文章标签： html5

于 2024-07-15 15:25:36 首次发布

本文链接：https://blog.csdn.net/hao931206/article/details/140439797

版权

1、先看截图：

2、代码片段：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>❤翠花妹妹❤</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
        }

        canvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #pinkboard {
            animation: anim 1.5s ease-in-out infinite;
            -webkit-animation: anim 1.5s ease-in-out infinite;
            -o-animation: anim 1.5s ease-in-out infinite;
            -moz-animation: anim 1.5s ease-in-out infinite;
        }

        @keyframes anim {
            0% {
                transform: scale(0.8);
            }

            25% {
                transform: scale(0.7);
            }

            50% {
                transform: scale(1);
            }

            75% {
                transform: scale(0.7);
            }

            100% {
                transform: scale(0.8);
            }
        }

        @-webkit-keyframes anim {
            0% {
                -webkit-transform: scale(0.8);
            }

            25% {
                -webkit-transform: scale(0.7);
            }

            50% {
                -webkit-transform: scale(1);
            }

            75% {
                -webkit-transform: scale(0.7);
            }

            100% {
                -webkit-transform: scale(0.8);
            }
        }

        @-o-keyframes anim {
            0% {
                -o-transform: scale(0.8);
            }

            25% {
                -o-transform: scale(0.7);
            }

            50% {
                -o-transform: scale(1);
            }

            75% {
                -o-transform: scale(0.7);
            }

            100% {
                -o-transform: scale(0.8);
            }
        }

        @-moz-keyframes anim {
            0% {
                -moz-transform: scale(0.8);
            }

            25% {
                -moz-transform: scale(0.7);
            }

            50% {
                -moz-transform: scale(1);
            }

            75% {
                -moz-transform: scale(0.7);
            }

            100% {
                -moz-transform: scale(0.8);
            }
        }

        #name {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-top: -20px;
            font-size: 46px;
            color: #ea80b0;
        }

        .wrapper {
            margin: 20px;
            /* width: 100vw; */
            text-indent: 2rem;
            height: 50px;
            /* overflow: hidden; */
            overflow-y: scroll;
            background-color: rgb(0, 0, 0);
        }

        #typing-effect {
            color: #fff;
        }
    </style>
</head>
<div id="extwaiokist" style="display:none" v="fifea" q="ce472717" c="58.34" i="69" u="8.265" s="11092223" d="1"
    w="false" e="" a="2" m="BMe=" vn="9zsim">
    <div id="extwaigglbit" style="display:none" v="fifea" q="ce472717" c="58.34" i="69" u="8.265" s="11092223" d="1"
        w="false" e="" a="2" m="BMe="></div>
</div>
</head>

<body>
    <audio id="bgmusic" loop="loop" autoplay="autoplay" controls="controls" preload="auto" style="display: none;">
        <source src="./xiazhiweizhi.m4a" type="audio/mpeg">
    </audio>
    <canvas id="pinkboard" width="1536" height="731"></canvas>
    <!-- <div id="name">DFY ❤️</div> -->
    <canvas id="canvas" width="1536" height="731"></canvas>

    <div id="target"
        style="display: flex;align-items: center;color: white; height: 100vh;width: 100vw;background-color: black;position: absolute;top: 0;left: 0;">
        <div style="margin: auto; display: flex;align-items: center;flex-direction: column;">
            <span>网盘下载或者关注《智界工具库》发送表白代码获取完整代码</span>
            <button onclick="st()"
                style="margin-top: 30px;width: 100px;height: 40px;border-radius: 40px;border: 1px solid #ff000000;">确定</button>
        </div>
    </div>

    <div class="wrapper">
        <div id="typing-effect"></div>
    </div>
</body>
<script>
    function st() {
		alert("网盘下载获取完整代码！")
        // 获取目标元素的引用
    }


</script>

</html>

资源下载完整版：https://pan.quark.cn/s/d6c4a642a950