• 页面LOADING效果


    <!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>Document</title>
        <style>
            body {
                font-family: monospace;
            }
    
            .overlay {
                position: absolute;
                bottom: 0;
                left: 0;
                 100%;
                height: 30vh;
                z-index: 100;
                background: white;
                background: linear-gradient(0deg, white 75%, rgba(255, 255, 255, 0.9) 80%, rgba(255, 255, 255, 0.25) 95%, rgba(255, 255, 255, 0) 100%);
            }
    
            .text {
                font-size: 100px;
                display: flex;
                position: absolute;
                bottom: 20vh;
                left: 50%;
                transform: translateX(-50%);
                user-select: none;
            }
    
            .text .wrapper {
                padding-left: 20px;
                padding-right: 20px;
                padding-top: 20px;
            }
    
            .text .wrapper .letter {
                transition: ease-out 1s;
                transform: translateY(10%);
            }
    
            .text .wrapper .shadow {
                transform: scale(1, -1);
                color: #999;
                transition: ease-in 5s, ease-out 5s;
            }
    
            /* .text .wrapper:hover .letter {
                transform: translateY(-200%);
            }
    
            .text .wrapper:hover .shadow {
                opacity: 0;
                transform: translateY(200%);
            } */
        </style>
    </head>
    
    <body>
        <div class="overlay"></div>
        <div class="text"></div>
    </body>
    
    <script>
    
        var str = 'LOADING',
            arr = [],
            html = '';
    
        for (let i = 0; i < str.length; i++) {
            const val = str[i];
            arr.push(i)
    
            html += `<div class="wrapper">
                        <div id="letter-${i}" class="letter">${val}</div>
                        <div id='shadow-${i}' class="shadow">${val}</div>
                    </div>`;
        }
        document.querySelector('.text').innerHTML = html;
    
    
        // 闭包是为了访问函数内部的变量而实现循环效果
        function Loading() {
            var index = 0;
    
            function changePosition(val) {
                console.log(val);
    
                var current_letter = document.querySelector(`#letter-${val}`);
                var current_shadow = document.querySelector(`#shadow-${val}`);
    
                current_letter.style.transform = 'translateY(-100%)';
                current_shadow.style.transform = 'translateY(100%)';
    
                setTimeout(() => {
                    current_letter.style.transform = 'translateY(10%)';
                    current_shadow.style.transform = 'translateY(0%)';
                }, 1000);
    
                setTimeout(() => {
                    index += 1;
                    if (index >= arr.length) {
                        index = 0;
                    }
                    changePosition(arr[index]);
                }, 500);
            }
            return changePosition;
        }
    
        setTimeout(() => {
            Loading()(arr[0])
        }, 500);
    </script>
    
    </html>
    
    

    CSS参考于:https://codepen.io/kajetan-orski/pen/YzQObKg

  • 相关阅读:
    未登录词识别方法研究公布硕士论文最新进展五(2007.4.26)
    公布硕士论文最新进展一(2007.3.6)
    对于切分歧义以及识别未登录词的随想公布硕士论文最新进展四(2007.4.13)
    一则杂感一次医院项目的感悟
    公布硕士论文最新进展三(2007.3.26)
    毕业典礼7.1
    家乡风光
    还在深圳!
    经历摩托罗拉
    又回来了,南京!
  • 原文地址:https://www.cnblogs.com/lbx6935/p/15545413.html
Copyright © 2020-2023  润新知