一个表白页面送给大家

最新推荐文章于 2022-07-28 15:41:31 发布

_雨季_

最新推荐文章于 2022-07-28 15:41:31 发布

阅读量406

点赞数

分类专栏：其他文章标签： css3 js html

本文链接：https://blog.youkuaiyun.com/qq_25337221/article/details/108333796

版权

其他专栏收录该内容

14 篇文章

订阅专栏

为了使得页面更加容易让对方运行，该代码使用纯原生js、html、css制作而成。仅仅需要将该代码编辑到文本文件，然后稍加修改内容，后缀改为html即可双击运行~
赶快动手，向你的真爱发起表白吧~哈。

<!DOCTYPE html>
<html lang="UTF-8">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花花，我喜欢你</title>
</head>
<style>
    .title {
        position: relative;
        z-index: 222;
        margin-top: 50px;
        text-align: center;
    }

    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .star-animation {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0, 0, 0);
        overflow: hidden;
    }

    .circle {
        position: relative;
        text-align: center;
        top: 150px;
        left: 42%;
        border-radius: 50%;
        z-index: 222;
    }
     

    .circle-animation {
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;

        width: 150px;
        height: 150px;
        color: white;
    }

    .circle-text {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        border-radius: 50%;
        width: 150px;
        height: 150px;
        padding-top: 60px;
        color: white;
        font-size: 30px;
        font-family: cursive;
    }

    /* 动画定义 */
    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    /* 旋转，渐变色 */
    #advance {
        width: 150px;
        height: 150px;

        background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, rgb(0, 255, 13) 0%, orange 80%, red 75%);
        background-image: -webkit-radial-gradient(45px 45px, circle cover, rgb(0, 255, 13) 0%, rgb(0, 153, 255) 10%, rgb(255, 123, 0) 20%, rgb(255, 0, 128) 75%, orange 100%);
        background-image: radial-gradient(45px 45px 45deg, circle cover, rgb(17, 0, 255) 0%, orange 100%, rgb(255, 0, 128) 95%);

        animation-name: spin;
        animation-duration: 3s;
        /* 3 seconds */
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    /*动画设计*/
    @-webkit-keyframes identifier {
        25% {
            transform: scale(8);
        }

        50% {
            transform: scale(10);
        }

        75% {
            transform: scale(7);
        }

        100% {
            transform: scale(8);
        }

    }

    @-o-keyframes identifier {
        25% {
            transform: scale(8);
        }

        50% {
            transform: scale(10);
        }

        75% {
            transform: scale(7);
        }

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

    @-moz-keyframes identifier {
        25% {
            transform: scale(8);
        }

        50% {
            transform: scale(10);
        }

        75% {
            transform: scale(7);
        }

        100% {
            transform: scale(8);
        }

    }

    @keyframes identifier {
        25% {
            transform: scale(8);
        }

        50% {
            transform: scale(10);
        }

        75% {
            transform: scale(7);
        }

        100% {
            transform: scale(8);
        }
    }
</style>

<body>
    <div class="star-animation">
        <div class="title" id="title"></div>
        <div class="circle">
            <div class="circle-animation" id="advance"></div>
            <div class="circle-text" onclick="wish()">许愿池</div>
        </div>
    </div>
</body>
<script>
    function title() {
        var titleStr = "花花，我喜欢你";
        setInterval(function () {
            var returnTitle = "";
            for (var i = 0; i < titleStr.length; i++) {
                var word = titleStr[i];
                var color = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
                var min = 50;
                var max = 70;
                var fontSize = parseInt(Math.random() * (max - min + 1) + min, 10);
                var wordStyle = function () {
                    return 'color:' + color + ';font-size:' + fontSize + 'px;';
                }
                returnTitle += '<span style="' + wordStyle() + '">' + word + '</span>'
            }
            var titleId = document.getElementById("title");
            titleId.innerHTML = "";
            titleId.innerHTML = returnTitle;
        }, 200);
    }
    // 创建星星的一个工厂函数
    function starFactory() {
        let star = document.createElement("div");
        let width = Math.ceil(Math.random() * 8);
        star.style.position = "absolute";
        star.style.width = width + 'px';
        star.style.height = width + 'px';
        star.style.zIndex = '111';
        star.style.backgroundColor = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
        star.style.top = Math.ceil(Math.random() * window.innerHeight) + 'px';
        star.style.left = Math.ceil(Math.random() * window.innerWidth) + 'px';
        star.style.boxShadow = "#545454 0 0 " + 2 + "px " + 2 + "px";
        star.style.borderRadius = width + 'px';

        // 当星星直径小于3时，有一个放大缩小的动画
        if (width < 3) {
            star.style.boxShadow = "#545454 0 0 " + width / 3 + "px " + width / 3 + "px";
            star.style.animation = "identifier 2000ms infinite 500ms";
        }
        return star;
    }
    function wish() {
        var wishPool = [
             '弹出框0',
             '弹出框1',
             '弹出框2',
             '弹出框3',
             '弹出框4'
        ];
        for (var i = 0; i < wishPool.length; i++) {
            if (i == 0 || i == 3) {
                var result = confirm(wishPool[i]);               
                    while (true) {
                        if (result) {
                            break;
                        } else {
                            result = confirm(wishPool[i] + '附加信息~');
                        }
                    }                
            }else{
               alert(wishPool[i]); 
            }
        }
    }   
    (function (container) {
        title();
        for (var i = 0; i < window.innerWidth / 5; i++) {
            container.append(starFactory());
        }
    })(document.getElementsByClassName("star-animation")[0]);
</script>

</html>

运行结果图: