前端加载动画-三点加载

爱护自己的鼠标手

已于 2023-02-08 18:00:02 修改

阅读量2.2k

点赞数

分类专栏：前端练习【剖析】文章标签： html css

于 2020-10-10 14:04:12 首次发布

本文链接：https://blog.csdn.net/qq_39007603/article/details/108992877

版权

前端练习【剖析】专栏收录该内容

1 篇文章 0 订阅

订阅专栏

名词解释

animation（动画）：

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

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

语法：
animation-name: keyframename|none;

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;

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>

至此加载动画就完成了

爱护自己的鼠标手

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端加载动画-三点加载

名词解释animation（动画）：语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;animation-name：指定要绑定到选择器的关键帧的名称语法：animation-name: keyframename|none;keyframename：指定要绑定到选择器的关键帧的名称none：ease-in-out：动画以低速开始和结束
复制链接

扫一扫

专栏目录