【小白教程】趣味表白效果

心已赠人 2022-02-12 14:47 242阅读 0赞

这次我们玩点有意思的，先看看效果→[趣味表白效果][Link 1]

最好是在PC端预览哦，下面出简单的小白教程。（注意：此教程仅适合前端小白，高手请绕过）

### 1. 在电脑桌面点击鼠标右键，选择【新建】→【文本文档】 ###

### 2. 双击打开已在桌面上新建好的文本文档，复制粘贴以下代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>你喜欢我吗？</title>
        <style>
            *{ margin: 0; padding: 0;}
            a{ text-decoration: underline;}
            body{ font-size: 16px; color: #333; -webkit-user-select: none; user-select: none;}
            .alert{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(83, 26, 255, 0.8);}
            .alert .box{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 400px; height: 240px;
                margin: auto; padding: 20px; text-align: center; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 0 20px #111; background: #fff; overflow: hidden; -webkit-animation: model .5s; animation: model .5s; -webkit-transition: all .3s; transition: all .3s;}
            .alert .box::after{ content: '×'; position: absolute; top: 0; right: 0; width: 30px; font-size: 20px; line-height: 30px; cursor: pointer;}
            .alert .box:hover::after{ display: none;}
            .alert .title{ font-size: 28px; line-height: 6;}
            .alert.no-btn .title{ line-height: 8.5;}
            .alert.no-btn .btns{ display: none;}
            .alert .btns.reverse{ direction: rtl;}
            .alert .btn{ display: inline-block; width: 100px; margin: 0 5px; border-radius: 4px; border: 1px solid #ccc; box-sizing: border-box; font-size: 16px; line-height: 2.5; color: #333; background-color: #fff; cursor: pointer;}
            .alert .btn.like{ color: #fff; background-color: #ff4528; -webkit-transition: all .3s; transition: all .3s;}
            .alert .btn.like:hover{ background-color: #f93618;}
    
            @keyframes model {
                0%{ opacity: 0; transform: scale(.5);}
                60%{ opacity: 1; transform: scale(1.2);}
                100%{ opacity: 1; transform: scale(1);}
            }
            @-webkit-keyframes model {
                0%{ opacity: 0; -webkit-transform: scale(.5);}
                60%{ opacity: 1; -webkit-transform: scale(1.2);}
                100%{ opacity: 1; -webkit-transform: scale(1);}
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script>
            window.onload = function () {
                model('你喜欢我吗？',true,'喜欢');
                hoverBtn();
                $('.like').onclick = function () {
                    model('我也喜欢你，我们在一起吧',true,'同意');
                    hoverBtn();
                };
            };
    
            function $(selector) {
                return document.querySelector(selector);
            }
            function hoverBtn() {
                $('.dislike').addEventListener('mouseover',function () {
                    var btns = $('.btns');
                    if(btns.classList.contains('reverse')){
                        btns.classList.remove('reverse');
                    }
                    else{
                        btns.classList.add('reverse');
                    }
                });
            }
            function model(text,hasBtn,btnVal) {
                var html = '<div class="alert">\n' +
                    '        <div class="box">\n' +
                    '            <h2 class="title">'+ text + '</h2>\n' +
                    '            <div class="btns">\n' +
                    '                <div class="like btn" href="javascript:;">'+ btnVal + '</div>\n' +
                    '                <div class="dislike btn" href="javascript:;">不'+ btnVal +'</div>\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '    </div>';
                document.getElementById('container').innerHTML = html;
                if(!hasBtn){
                    $('.alert').classList.add('no-btn');
                }
            }
        </script>
    </body>
    </html>

### 3. 选择【文件】→【另存为】 ###

### 4. 在弹窗底部“文件名”处将“txt”改成“html”，“编码”处选择“utf-8”，点击保存 ###

### 5. 双击打开桌面上已经另存好的网页文件就可以了 ###

喜欢吗？喜欢就点个赞关注我呗~

[Link 1]: http://zhanhu56.com/h5/index.html