CSS——loading动画

示例

一、解析

loading动画1

  由图可见,动画1中有三根竖线,在进行变长变短的高度变化以及线条的颜色变化,因此分为以下几个步骤:

  • 建立块级区域;
  • 三根线条排版;
  • 动画——颜色、线条长度渐变;
  • 动画引入及执行方法;

loading动画2

  动画2中则与动画1排版略有不同:在动画区域内,有四个圆点,然后重复的放大缩小以及匀速旋转。因此步骤如下:

  • 建立块级区域;
  • 四个原点排版(定位/flex等方法)
  • 动画——缩放、旋转;
  • 动画引入及执行方法;

二、 代码

1. loading1

html
<div class="loading">
    <div class="loading1">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
    </div>
</div>
css
.loading{
    width: 100px;
    height: 100px;
    overflow: hidden;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    margin: 10px;
}

/* loading1 */
.loading1{
    height: 34px;
    margin-top: 33px;
    text-align: center;
    display: flex;
    justify-content: center;
}
.line{
    margin: 0 5px;
    width: 10px;
    height: 16px;
    background: #8e6ddb;
    border-radius: 15px;
}
.line1{
    animation: loading1 .6s ease 0s infinite;
}
.line2{
    animation: loading1 .6s ease .2s infinite;
}
.line3{
    animation: loading1 .6s ease .4s infinite;
}
@keyframes loading1 {
    0% {
        height: 16px;
        background: #608cff;
    }
    50% {
        height: 34px;
        background: #8e6ddb;
    }
    100% {
        height: 16px;
        background: #608cff;
    }
}

2. loading2

html
<div class="loading">
    <div class="loading2">
        <div class="point point1"></div>
        <div class="point point2"></div>
        <div class="point point3"></div>
        <div class="point point4"></div>
    </div>
</div>
css
.loading{
    width: 100px;
    height: 100px;
    overflow: hidden;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    margin: 10px;
}
/* loading2 */
.loading2{
    position: relative;
    width: 46px;
    height: 46px;
    margin: 27px auto 0;
    flex-wrap: wrap;
    animation: loading2 2s linear 0s infinite;
}
.point{
    width: 16px;
    height: 16px;
    background: red;
    border-radius: 50%;
    position: absolute;
}
.point1{
    top: -8px;
    left: 50%;
    margin-left: -8px;
    background: #dbdcbf;
}
.point2{
    right: -8px;
    top: 50%;
    margin-top: -8px;
    background: #32b53f;
}
.point3{
    bottom: -8px;
    left: 50%;
    margin-left: -8px;
    background: #a77ef4;
}
.point4{
    left: -8px;
    top: 50%;
    margin-top: -8px;
    background: #c4356d;
}

@keyframes loading2 {
    0% {
        transform: rotate(0deg) scale(1);
    }
    10% {
        transform: rotate(36deg) scale(1.1);
    }
    20% {
        transform: rotate(72deg) scale(1.2);
    }
    30% {
        transform: rotate(108deg) scale(1.3);
    }
    40% {
        transform: rotate(144deg) scale(1.4);
    }
    50% {
        transform: rotate(180deg) scale(1.5);
    }
    60% {
        transform: rotate(216deg) scale(1.4);
    }
    70% {
        transform: rotate(252deg) scale(1.3);
    }
    80% {
        transform: rotate(288deg) scale(1.2);
    }
    90% {
        transform: rotate(324deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

#

以上。

本文分享自微信公众号 - 流眸(zxm0146),作者:流眸

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue弹窗屏蔽滑动的两种解决方案

      在开发过程中,我们经常会遇到要加弹窗的需求,而如果当前页的展示数据一屏展示不完,则在打开弹窗后,有滑动操作时,页面也会随之滑动。那么如何处理这一问题呢?

    流眸
  • Hello React

      至此,Mac环境下react基于脚手架的开发环境已搭建完成。运行项目( npm start)后,浏览器会自动打开本地页面http://localhost:3...

    流眸
  • CSS布局之道——内凹圆角

    但是细想之后发现两者皆不可用,border-radius处理的话是凸角,舍弃;定位需要独立出来两个模块,复杂度高了,舍弃。可是舍弃后,需要怎么做呢?切背景图吗?...

    流眸
  • 网页布局之九宫格

    九宫格虽然嵌套了一些标签,但对于IE6、IE7来讲为了达到预期的美术效果,这中间需要进行权衡;无论怎么讲,他还是很多精华之处。

    meteoric
  • 使用HTML5+CSS3绘制HTML5的logo

    王凡汎
  • css 定位

    正常文档流模式下,后面的dom元素覆盖前面的,如果将前面的元素设置了relative将提升它自身的层级

    超然
  • CSS深入理解学习笔记之absolute

    1、absolute和float   拥有相同的特性表现:     ①包裹性(容器应用之后,可以包裹里面的内容); 1 <!doctype html> 2 ...

    就只是小茗
  • (2019)[前端]面试题[1]:CSS BFC是什么【BFC详解】

    BFC(Block Formatting Context)格式化上下文,是盒模型的一种渲染布局,简言之可以理解为 一个独立的容器,不受外部影响,不影响外部。

    无道
  • 前端基础-CSS滑动门效果

    概念:3个盒子浮动,左边和右边写宽高,负责加载两边的背景,中间的盒子宽度不定,让文字撑开

    cwl_java
  • [Java小工匠]CSS盒子模型-边距合并

      CSS外边距合并,只有上外边距和下外边距才会触发外边距合并,左外边距和右外边距不会。

    Java小工匠

扫码关注云+社区

领取腾讯云代金券