css特效之loading加载（二）-优快云博客

本文链接：https://blog.youkuaiyun.com/lpyacn/article/details/134130377

效果预览：效果预览
源码下载：关注公众号【RMRF】，回复【css8】可获取源码

一、HTML

<!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>loading-2</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="modal">
        <div class="loading">
            <div class="item1"></div>
            <div class="item2"></div>
            <div class="item3"></div>
            <div class="item4"></div>
            <div class="item5"></div>
            <div class="item6"></div>
            <div class="item7"></div>
            <div class="item8"></div>
            <div class="item9"></div>
            <div class="item10"></div>
            <div class="item11"></div>
            <div class="item12"></div>
        </div>
    </div>

</body>
</html>

二、CSS样式

* {
    padding: 0px;
    margin: 0px;
}


.modal {
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #202020;
}

.loading div {
    position: absolute;
    width: 5px;
    height: 20px;
    border-radius: 5px;
    background: #ff8f34;
    animation: loading 1s linear infinite;
}

@keyframes loading {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.15;
    }
}

.loading .item1 {
    transform: rotate(0deg) translate(0, -120%);
    animation-delay: 0s;
}

.loading .item2 {
    transform: rotate(30deg) translate(0, -120%);
    animation-delay: -1.1s;
}

.loading .item3 {
    transform: rotate(60deg) translate(0, -120%);
    animation-delay: -1s;
}

.loading .item4 {
    transform: rotate(90deg) translate(0, -120%);
    animation-delay: -0.9s;
}

.loading .item5 {
    transform: rotate(120deg) translate(0, -120%);
    animation-delay: -0.8s;
}

.loading .item6 {
    transform: rotate(150deg) translate(0, -120%);
    animation-delay: -0.7s;
}

.loading .item7 {
    transform: rotate(180deg) translate(0, -120%);
    animation-delay: -0.6s;
}

.loading .item8 {
    transform: rotate(210deg) translate(0, -120%);
    animation-delay: -0.5s;
}

.loading .item9 {
    transform: rotate(240deg) translate(0, -120%);
    animation-delay: -0.4s;
}

.loading .item10 {
    transform: rotate(270deg) translate(0, -120%);
    animation-delay: -0.3s;
}

.loading .item11 {
    transform: rotate(300deg) translate(0, -120%);
    animation-delay: -0.2s;
}

.loading .item12 {
    transform: rotate(330deg) translate(0, -120%);
    animation-delay: -0.1s;
}