前端加载动画-三点加载

名词解释


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 的规则

步骤与思路:

  1. 要实现加载动画,首先需要三个原点用到css的动画知识点与边框知识
  2. 实现三点并排出现,可以使用flex或者inline-block
  3. 定义帧动画出现时间以及动态效果,使用@keyframes 方法定义帧动画
  4. 呈现的效果是依次显示,可以使用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>

前端加载动画-三点加载_第1张图片

至此加载动画就完成了

你可能感兴趣的:(前端练习【剖析】,html,css)