响应式全屏幕 css-loading ++++

[ 默认分类 ]

Kapture 2019-04-08 at 15.30.43.gif

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>loading</title>
</head>
<body>
<style>
#loader {
    background: rgba(255,255,255,1);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 100%;
    height: 100%;
    transform: scaleX(1);
    transform-origin: right;
    transition: all .3s ease-in-out
}

#loader .cross {
    position: relative;
    width: 10vw;
    height: 10vw;
    margin: 1em
}

.cross:nth-child(odd) {
    animation: rotate 5s linear infinite
}

.cross:nth-child(even) {
    animation: rotateReverse 5s linear infinite
}

#loader .cross::after,#loader .cross::before {
    content: '';
    background-color: #000
}

#loader .cross::before {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 40%;
    transform: translateY(-50%)
}

#loader .cross::after {
    position: absolute;
    left: 50%;
    width: 40%;
    height: 100%;
    transform: translateX(-50%)
}

#loader.loaded {
    transform: scaleX(0)!important
}

@keyframes rotate {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes rotateReverse {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(-360deg)
    }
}
</style>
<div id="loader">
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
    <div class="cross">
    </div>
</div>
</body>
</html>

Demo →

#none

2019年04月08日266 次浏览

随机

扫一扫
查看手机版