新年最美表白烟花-祝大家新年快乐，表白成功

进步小白

已于 2022-02-01 11:40:28 修改

阅读量2.6k

点赞数 6

分类专栏：有趣分享文章标签：计算机人表白代码示例新年表白烟花效果 JavaScript代码

于 2022-02-01 11:23:51 首次发布

本文链接：https://blog.csdn.net/am_student/article/details/122763077

版权

有趣分享专栏收录该内容

2 篇文章 0 订阅

订阅专栏

✨✨✨

感谢优秀的你打开了小白的文章

“希望在看文章的你今天又进步了一点点，离美好生活更近一步！”🌈

📣📣📣

今天就是大年初一了，在新的一年里不和自己喜欢的人表白多遗憾对吧（手动狗头）！

身为计算机人，代码表白最合适不过了，今天为大家分享一个表白代码，有好看的烟花昂。（文末有源代码）

开局就要有选择-愿意还是不愿意？

<div class="share_img"><img src="images/a8b.png" alt=""></div>

    <div class="page_one">
        <div class="content">
            <div class="text_wrapper">
                <img src="images/a8.png" alt="">
                <div class="text">
                    我好喜欢你，你愿意做我女朋友吗？
                </div>
            </div>
        </div>
        <div class="btn-groups">
            <div class="heart-btn">
                <div id="yes" class="btn btn-a"><span>愿意</span></div>
            </div>
            <div id="no" class="btn btn-b"><span>不愿意</span></div>
        </div>
    </div>
    <div class="page_two hide">
        <div class="type_words"></div>
    </div>

希望大家都是愿意昂哈哈哈哈。

如果不愿意，那我们作为舔狗是吧，也不能放弃！！！

构造不同意选项：

  function A() {
        modal('我喜欢你！', B);
    }

    function B() {
        modal('我知道你在等我这一句话', C);
    }

    function C() {
        modal('请不要拒绝我', D);
    }

    function D() {
        modal('你还点啊', E);
    }

    function E() {
        modal('这辈子都不可能让你离开我', F);
    }

    function F() {
        modal('跟我走吧', G);
    }

    function G() {
        modal('房产证上写你名字', H);
    }

    function H() {
        modal('还骂我', I);
    }

    function I() {
        modal('爱你。么么哒！', J)
    }

    function J() {
        modal('行，我们去民政局登记吧', function() {
            fireworks();
        });
    }

由于代码长度限制，这里让大家看看HTML主代码：

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

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <title>forever love</title>
</head>

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.fireworks.js" type="text/javascript"></script>

<style type="text/css">
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    html {
        width: 100%;
        height: 100%;
    }
    
    #fireworksField {
        z-index: -1;
    }
    
    body {
        max-width: 600px;
        margin: 0 auto;
        background: #0b3443;
        color: #f0f0f0;
    }
    
    .share_img {
        width: 0;
        height: 0;
        overflow: hidden;
        opacity: 0;
    }
    
    .content {
        padding: 80px 20px;
    }
    
    .text_wrapper {
        display: -webkit-box;
        display: flex;
    }
    
    .text_wrapper .text {
        padding-top: 20px;
        padding-left: 20px;
    }
    
    .hide {
        display: none !important;
    }
    
    p {
        margin: 0;
    }
    
    .btn-groups {
        padding-right: 20px;
        text-align: center;
    }
    
    .heart-btn {
        display: inline-block;
        animation: breath 0.8s linear 0s infinite both;
        -webkit-animation: breath 0.8s linear 0s infinite both;
    }
    
    .btn {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 60px;
        margin: 0 30px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    
    .btn span {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 60px;
        margin-top: -10px;
        margin-left: -10px;
        text-align: center;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
    
    .btn-a {
        background: #d26ae5;
    }
    
    .btn-b {
        background: #c9c9c9;
    }
    
    .btn-a:before {
        content: '';
        position: absolute;
        display: block;
        width: 30px;
        height: 60px;
        background: #d26ae5;
        left: -29px;
        top: 0;
        border-top-left-radius: 60px;
        border-bottom-left-radius: 60px;
    }
    
    .btn-a:after {
        content: '';
        position: absolute;
        display: block;
        width: 60px;
        height: 30px;
        background: #d26ae5;
        left: 0;
        top: -29px;
        border-top-left-radius: 60px;
        border-top-right-radius: 60px;
    }
    
    .btn-b:before {
        content: '';
        position: absolute;
        display: block;
        width: 30px;
        height: 60px;
        background: #c9c9c9;
        left: -29px;
        top: 0;
        border-top-left-radius: 60px;
        border-bottom-left-radius: 60px;
    }
    
    .btn-b:after {
        content: '';
        position: absolute;
        display: block;
        width: 60px;
        height: 30px;
        background: #c9c9c9;
        left: 0;
        top: -29px;
        border-top-left-radius: 60px;
        border-top-right-radius: 60px;
    }
    
    .container {}
    
    .container .mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
    }
    
    .container .modal {
        width: 80%;
        height: 160px;
        position: absolute;
        top: 50%;
        left: 50%;
        padding: 20px 15px;
        border-radius: 5px;
        transform: translate(-50%, -70%);
        -webkit-transform: translate(-50%, -70%);
        background: #f3f3f3;
    }
    
    .container .modal p {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 16px;
        color: #353535;
        text-align: center;
    }
    
    .confirm {
        display: block;
        width: 120px;
        height: 40px;
        margin: 0 auto;
        border: none;
        font-size: 16px;
        border-radius: 5px;
        color: #ffffff;
        background: #f45cae;
    }
    
    .type_words {
        padding: 12px 20px;
        color: darkgray;
        z-index: 1000;
        /* margin: auto; */
        margin-top: 55%;
    }
    
    @keyframes breath {
        0% {
            transform: scale3d(1, 1, 1);
            -webkit-transform: scale3d(1, 1, 1);
            transform-origin: 50% 50%;
        }
        50% {
            transform: scale3d(1.02, 1.02, 1.02);
            -webkit-transform: scale3d(1.02, 1.02, 1.02);
            transform-origin: 50% 50%;
        }
        100% {
            transform: scale3d(1, 1, 1);
            -webkit-transform: scale3d(1, 1, 1);
            transform-origin: 50% 50%;
        }
    }
</style>

<script type="text/javascript">
    $(function() {
        $('#yes').click(function(event) {
            modal('我就知道小姐姐您一定会愿意的。(^_^)', function() {
                $('.page_one').addClass('hide');
                $('.page_two').removeClass('hide');
                // typeWrite();
                fireworks();

            });
        });
        $('#no').click(function(event) {
            modal('不要这样子嘛', A);
        });
    });

    function A() {
        modal('我喜欢你！', B);
    }

    function B() {
        modal('我知道你在等我这一句话', C);
    }

    function C() {
        modal('请不要拒绝我', D);
    }

    function D() {
        modal('你还点啊', E);
    }

    function E() {
        modal('这辈子都不可能让你离开我', F);
    }

    function F() {
        modal('跟我走吧', G);
    }

    function G() {
        modal('房产证上写你名字', H);
    }

    function H() {
        modal('还骂我', I);
    }

    function I() {
        modal('爱你。么么哒！', J)
    }

    function J() {
        modal('行，我们去民政局登记吧', function() {
            fireworks();
        });
    }

    function fireworks() {
        $('.page_one').addClass('hide');
        $('.page_two').removeClass('hide');
        $('.page_two').fireworks({
            sound: false,
            opacity: 0.9,
            width: '100%',
            height: '100%'
        });
    }

    function modal(content, callback) {
        var tpl = '<div class="container">' +
            '<div class="mask"></div>' +
            '<div class="modal">' +
            '<p>' + content + '</p>' +
            '<button type="button" id="confirm" class="confirm">确定</button>' +
            '</div>' +
            '</div>';
        $('body').append(tpl);
        $(document).on('click', '.confirm', function() {
            $('.container').remove();
            callback();
        });
    }

    var myWords = 'XXX,在新的一年我想对你说:我好喜欢你.';
    var x = 0;
    var speed = 150;
    var current = 0;

    function typeWrite() {
        $('.type_words').html(myWords.substring(0, x++) + '_');
        var timer = setTimeout("typeWrite()", 200);
        if (x == myWords.length) {
            x = myWords.length;
            clearTimeout(timer)
        }
    }
    typeWrite();
</script>

<body>

    <div class="share_img"><img src="images/a8b.png" alt=""></div>

    <div class="page_one">
        <div class="content">
            <div class="text_wrapper">
                <img src="images/a8.png" alt="">
                <div class="text">
                    我好喜欢你，你愿意做我女朋友吗？
                </div>
            </div>
        </div>
        <div class="btn-groups">
            <div class="heart-btn">
                <div id="yes" class="btn btn-a"><span>愿意</span></div>
            </div>
            <div id="no" class="btn btn-b"><span>不愿意</span></div>
        </div>
    </div>
    <div class="page_two hide">
        <div class="type_words"></div>
    </div>

</body>

</html>

另外最重要的是烟花！展示以下：