流星划过爱意之夜：浪漫表白网页演示

bug小空

已于 2023-05-25 21:56:29 修改

阅读量380

点赞数 3

文章标签： css css3 html

于 2023-05-05 19:51:36 首次发布

本文链接：https://blog.csdn.net/qq_56313338/article/details/130513888

版权

该文章展示了一个使用HTML、CSS和JavaScript编写的表白网页代码。网页包含文字动画效果，如名字淡入淡出，以及背景颜色变化和流星特效。当鼠标悬停在名字上时，名字会放大。此外，网页还配有一首背景音乐，并在2秒后自动播放。

摘要由CSDN通过智能技术生成

效果展示

表白网页

代码

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #fff;
            height: 100vh;
            overflow: hidden;
            position: relative;
            animation: bg 10s infinite alternate;
        }

        .main {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 50px;
            height: 60px;
            cursor: pointer;
        }

        .main:nth-child(2) {
            transition: all 1s;
        }

        .main:nth-child(2):hover {
            transform: scale(1.3);
        }


        .name,
        .name2 {
            display: inline-block;
            font-weight: bold;
            font-size: 40px;
            font-family: serif;
            position: absolute;
            color: rgba(255, 255, 255, 0);
        }

        /* 名字动画后显示名字 */
        .name2 {
            position: relative;
            /* 9s */
            animation: show 1s 9s forwards;
        }

        .name2:nth-child(4) {
            animation: show-heart 1s 10s forwards;
        }

        /* 名字动画 */
        .name:nth-child(1) {
            animation: name1 2s linear;
        }

        .name:nth-child(2) {
            animation: name1 2s 2s linear;
        }

        .name:nth-child(3) {
            animation: name1 2s 4s linear;
        }

        .name:nth-child(4) {
            animation: name1-heart 3s 6s linear;
        }


        @keyframes bg {
            to {
                background-color: rgb(10, 10, 10);
            }
        }

        /* 名字动画 */
        @keyframes name1 {
            0% {
                color: rgb(255, 255, 255, 0);
            }

            60% {
                color: rgb(255, 255, 255);
            }

            100% {
                color: rgba(255, 255, 255, 0);
                transform: scale(5);
            }
        }

        /* 显示第一个爱心 */
        @keyframes name1-heart {
            0% {
                color: rgb(255, 0, 0, 0);
            }

            60% {
                color: rgb(255, 0, 0);
            }

            100% {
                color: rgba(255, 0, 0, 0);
                transform: scale(100);

            }
        }


        /* 显示名字动画 */
        @keyframes show {
            to {
                color: rgba(255, 255, 255);
                transform: translateY(-100px);
            }
        }

        /* 显示名字后的爱心 */
        @keyframes show-heart {
            to {
                color: red;
                transform: translateY(-100px);
            }
        }


        .test:nth-child(3) {
            width: 4px;
            height: 100px;
            /* border-radius: 50%; */
            background-color: aqua;
            position: absolute;
            border-radius: 50% 50% 50% 50% / 98% 98% 5% 5%;
            top: 0;
            right: -20px;
            transform: rotate(45deg);
            animation: meteor 5s forwards;
        }


        .meteor {
            z-index: 100;
            width: 4px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            border-radius: 50% 50% 50% 50% / 98% 98% 5% 5%;
            /* top: 0;
    right: -50px; */
            transform: rotate(45deg);
            /* animation: meteor 5s forwards; */
        }

        /* .meteor:hover{
    animation-play-state: paused;
} */

        @keyframes meteor {
            to {
                transform: rotate(45deg) translate(0, 5000px);

            }
        }
    </style>

</head>

<body>
    <div class="main">
        <span class="name">王</span>
        <span class="name">兰</span>
        <span class="name">彪</span>
        <span class="name heart">❤</span>
    </div>

    <div class="main">
        <span class="name2">王</span>
        <span class="name2">兰</span>
        <span class="name2">彪</span>
        <span class="name2 heart">❤</span>
    </div>

    <audio src="./花火瞬夜.m4a"></audio>

        <script>
            setTimeout(() => {
                document.querySelector("audio").play();
            }, 2000);
            function Meteor(speed = 5, style = 1, color = "aqua") {
                this.speed = speed
                this.style = style
                this.color = color
                this.meteor = null
                // 初始化
                this.init = () => {
                    this.meteor = document.createElement("div")
                    this.meteor.classList.add("meteor")
                    var xy = this.position()
                    if (this.meteor) {
                        this.meteor.style.animation = `meteor ${speed}s forwards`
                        this.meteor.style.backgroundColor = this.color
                        // console.log(this.color);
                        this.meteor.style.top = `${xy[1]}px`
                        this.meteor.style.right = `${xy[0]}px`
                    }

                    document.body.appendChild(this.meteor)
                }

                this.destruct = () => {
                    // console.log(this.meteor)
                    if (this.meteor) {
                        document.body.removeChild(this.meteor)
                    }
                }

                // 计算流星位置
                this.position = () => {
                    var xy = [0, 0]
                    if (Math.floor(Math.random() * 2)) {
                        xy[0] = 0
                        xy[1] = -(Math.floor(Math.random() * document.body.clientWidth))
                    } else {
                        xy[0] = -(Math.floor(Math.random() * document.body.clientHeight))
                        xy[1] = 0
                    }
                    return xy
                }

                // 运行
                this.run = () => {
                    this.init()
                    setTimeout(this.destruct, this.speed * 1000)
                }
            }

            setInterval(start, 1)

            function start() {
                colors = ['f00', 'ff0', 'fff', '0ff', '00f', 'fba', 'bfa', 'f0f']
                var n = Math.floor(Math.random() * colors.length)
                var color = `#${colors[n]}`;
                // console.log(color);
                (new Meteor(n, n, color)).run()
            }
        </script>
</body>

</html>