【加载中...】简单又复杂的加载动画效果

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第15天，点击查看活动详情

前言

css专栏中已经写了好多动画效果了，有移动的、有漂浮的、有3D的，今天再来做一个滚动的吧。

一种简单又复杂的滚动效果，可以用来做页面loading动画哦~~

小格子

👻 首先在页面居中的位置放一个小格子，后面的内容都是基于这个格子做出来的哦

<div class="loader">
    <div class="l_main">
        <div class="l_square">
            <span></span>
        </div>
    </div>
</div>

.l_square span {
    position: absolute;
    top: 0px;
    left: 20px;
    height: 36px;
    width: 36px;
    border-radius: 2px;
    background-color: #FFFFFF
}

• 这里就写一点格子的样式效果
• 居中定位的样式可以在最后去看码上掘金中的代码哦

🤡 有了一个小格子之后，我们可以在几个 span 标签，相当于做一个垂直的循环

<div class="l_square"><span></span><span></span><span></span></div>

.l_square span:nth-child(1) {
    top: 0px
}

.l_square span:nth-child(2) {
    top: 44px
}

.l_square span:nth-child(3) {
    top: 88px
}

• 因为我们的格子元素是绝对定位的，所以我们可以使用 nth-child 伪类方法定义 top 的值

滚动起来

🤖 使用 animation 来定义小格子的滚动效果

.l_square span {
    animation: animsquare 2s infinite ease-in
}

@keyframes animsquare {
    0%,
    5%,
    95%,
    100% {
        transform: translate(0px, 0px) rotate(0deg)
    }
    30%,
    70% {
        transform: translate(-40px, 0px) rotate(-90deg)
    }
}

• 2s 的时间差从 坐标0点 向前翻转90° 然后再翻转回来
• 为了看起来流畅一点，这里使用的百分比值相对来说是比较正常的。
• 如果你想看起来快一点，可以把百分比值多写一点

💥 这样一起滚动就没啥看点了，我们可以针对每一个小格子做一点特殊处理

.l_square span:nth-child(1) {
    animation-delay: 0.00s
}

.l_square span:nth-child(2) {
    animation-delay: 0.15s
}

.l_square span:nth-child(3) {
    animation-delay: 0.30s
}

• 给小格子中的每一个 span 标签都用 nth-child 伪类去添加动画延迟效果
• animation-delay 设置动画延迟效果的样式

码上掘金看效果