1024程序员节日Loading效果

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

至此1024程序员节日，作为一名程序员工作者，只能自己给自己找一点点乐子，去放松一下自己。

今天临时起意，就用 1024 主题做一个 loading 的效果，独乐乐不如众乐乐😂😂。

效果展示

html 代码

import React from 'react'
import './index.less'

export default () => {
  // 使用1024数字文本生成数字
  return (
    <div className="wrap">
      <i className="number first">1</i>
      <i className="number second">0</i>
      <i className="number third">2</i>
      <i className="number fourth">4</i>
    </div>
  )
}

css 代码

.wrap {
    width: 100px;
    position: fixed;
    top: 30%;
    // 使其左右居中
    left: calc(50% - 50px);

    .number {
      font-size: 28px;
      color: #1890ff;
      display: inline-block;
      width: 24px;
      text-align: center;
      // 匀速运行
      animation-timing-function: linear; 
      // 无限循环
      animation-iteration-count: infinite;
      // 执行周期设置为 1s
      animation-duration: 1s;
    }

    .first {
      animation-name: scale;
      // animation-duration: 1s;
      animation-delay: -1s;
    }
    .second {
      animation-name: scale;
      // animation-duration: 1s;
      animation-delay: -.85s;
    } 
    .third {
      animation-name: scale;
      // animation-duration: 1s;
      animation-delay: -.7s;
    }
    .fourth {
      animation-name: scale;
      // animation-duration: 1s;
      animation-delay: -0.55s;
    }
  }

@keyframes scale {
  0% {
    transform: scale(0.6);
  }
  25% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(0.6);
  }
}

实现逻辑

1. HTML 直接使用 1 0 2 4 四个数字（这种方式简单直接）
2. 设置每个数字的宽度固定，此处统一设置为 24px
3. 通过固定定位将 loading 效果放置到屏幕中间位置
4. 设置每个动画的关键帧 scale，使其从小到大，从大到小的循环变化
5. 设置每个数字的动画 animation

动画设置小技巧

类似这样的连续性动画，我们可以先把动画状态设置为 animation-play-state: pause，这样方便确定它第一帧的位置和动画样式。

animation-delay 一个负值会让动画立即从当前数字正数代表的时间位置开始运动

结语

如果这篇文章帮到了你，欢迎点赞👍和关注⭐️。

文章如有错误之处，希望在评论区指正🙏🙏。