网站首页 > 技术文章正文

加载动画「三点循环加载」（三点加载图片）

nanyue 2024-10-30 02:57:58 技术文章 11 ℃

名词解释

animation（动画）：

语法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name：指定要绑定到选择器的关键帧的名称

语法：animation-name: keyframename|none;12

keyframename：指定要绑定到选择器的关键帧的名称
none：
ease-in-out：动画以低速开始和结束
linear：动画从头到尾的速度是相同的
ease：默认。动画以低速开始，然后加快，在结束前变慢
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始和结束

animation-delay（设置动画在启动前的延迟间隔）
animation-fill-mode（把物体动画地从一个地方移动到另一个地方）

语法：
animation-fill-mode: none|forwards|backwards|both|initial|inherit;12

forwards：在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值
backwards ：动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值
both：动画遵循 forwards 和 backwards 的规则

步骤与思路：

要实现加载动画，首先需要三个原点用到css的动画知识点与边框知识
实现三点并排出现，可以使用flex或者inline-block
定义帧动画出现时间以及动态效果，使用@keyframes 方法定义帧动画
呈现的效果是依次显示，可以使用animation-delay来延迟出现时间，让加载动画更有层次性

<!DOCTYPE html>
  <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>加载动画</title>
</head>
<style>
    .content {
        margin: 20% auto;
        width: 150px;
    }
    .content > div {
        width: 20px;
        height: 20px;
        background-color: #33e5e5;
        border-radius: 50%;
        display: inline-block;
        animation: action 1.5s infinite ease-in-out;
        animation-fill-mode: both;
    }
    .content .point1 {
        animation-delay: -0.3s;
    }
    .content .point2 {
        animation-delay: -0.1s;
    }

    @keyframes action {
        0%, 80%, 100% {
            transform: scale(0);
        }
        40% {
            transform: scale(1.0);
        }
    }
</style>
    <body>
          <div class="content">
        <div class="point1"></div>
        <div class="point2"></div>
        <div class="point3"></div>
    </div>
    </body>
</html>

线实例预览地址：https://codepen.io/836108186/pen/jOrEorL

至此加载动画就完成了

网站首页 > 技术文章 正文

加载动画「三点循环加载」（三点加载图片）

猜你喜欢

网站首页 > 技术文章正文