简易骨架屏_scala

 

<!DOCTYPE html>
<html>

<head>
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <style>
        * {
            padding: 0;
            margin: 0
        }
        
        .light {
            position: relative;
            overflow: hidden;
        }
        
        .light::after {
            position: absolute;
            width: 100px;
            height: 2000px;
            background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.9), transparent);
            left: 0px;
            top: -1000px;
            content: '';
            z-index: 11;
            animation-duration: 2s;
            animation-delay: .2s;
            animation-iteration-count: infinite;
            animation: slideOutRight 1s linear infinite;
        }
        
        @keyframes slideOutRight {
            0% {
                -webkit-transform: translateX(-100px) rotateZ(30deg);
                transform: translateX(-100px) rotateZ(30deg)
            }
            100% {
                -webkit-transform: translateX(1000px) rotateZ(30deg);
                transform: translateX(1000px) rotateZ(30deg)
            }
        }
    </style>

    <script>
    </script>
</head>

<body>

    <div class="light" id="zhan">
    </div>
    <script>
        var zhan = document.getElementById("zhan");
        var str = ""
        for (var i = 0; i < 10; i++) {
            str += `<div style='height:25px;background:#f3f3f3;margin-bottom:10px;width:${Math.random()*100}%'></div>`
        }
        zhan.innerHTML = str
    </script>
</body>

</html>