zoukankan      html  css  js  c++  java
  • CSS3-loading动画(一)

    前两天从一个网站中看到了一些比较好的loading动画效果,是用纯CSS3来写的,感觉不错,就尝试着照着效果来自己写出来。

    在开始之前,先复习一个小知识:CSS3新增的关键帧动画,可以用来实现很多的动画,我们可以通过animation-delay来控制动画延迟执行,来实现丰富的效果。

    当animation-delay的值为正值时,动画将被延迟从初始状态开始执行;

    当animation-delay的值为负数时,动画将被提前从该值(负数的绝对值)对应的状态开始执行。

    在线demo:http://liyunpei.xyz/loading.html    (持续更新)

    (效果图片可能不太清楚,请谅解)

    一、第一种效果

    一共16个小正方形,将位置定位,通过关键帧来改变正方形的透明度

    {animation: ball 2s 0s ease infinite;}
    @keyframes ball {
          0%{
            opacity: 1;
          }
          50%{
            opacity: 1;
          }
          51%{
            opacity: 0;
          }
        }

    对每一个正方形设置animation-delay值,在这里我的整体动画耗时是2s,均分16个正方形是0.125s,于是我设置的animation-delay值是从-1.875s开始以0.125的数差开始增加一直到0。

    二、第二种效果

    中间一个大球的位置不变,旁边三个小球分别包含在三个正方形中,将小球设置定位{top:0;left:0;},通过设置正方形rotateZ旋转便可以形成这种交叉。

    通过关键帧动画来设置动画过程(下面关键帧动画的书写并不是最好的方法),并给每个小球设置animation-delay的值,可以让三个小球在不同的时刻从正面通过。

    {animation: turn_atom 1.5s 0s ease infinite;}
    @keyframes turn_atom {
          0%{
            height:25px;
             25px;
            top: 0;
            left: 0;
          }
          50%{
            height: 20px;
             20px;
            top: 60px;
            left: 60px;
          }
          51%{
            height: 15px;
             15px;
            top: 60px;
            left: 60px;
          }
          100%{
            height: 20px;
             20px;
            top: 0;
            left: 0;
          }
        }

    另外,还需要给三个小球的父容器通过关键帧动画设置z-index值,来达到当小球是在围绕大球旋转的视觉效果。

    {animation: turn_atomZ 1.5s 0s ease infinite;}
    @keyframes turn_atomZ {
          0%{
            z-index: 6;
          }
          50%{
            z-index: 6;
          }
          51%{
            z-index: 4;
          }
        }

    三、第三种效果

    这种效果就比较简单了,只要改变小球的大小以及透明度就行了(透明度以及小球的宽高在初始时已定义)。

    {animation: light 1.5s 0s ease infinite;}
    @keyframes light {
          50%{
            opacity: 0.4;
            height: 15px;
             15px;
          }
        }

    四、第四种效果

    初始时,四个小球定位到同一个位置,通过关键帧来改变小球的left值以及小球的大小即可。

    {animation: r_ball 2s 0s ease infinite,r_ballZ 2s 0s ease infinite;}
    @keyframes r_ball {
          50%{
            left: 100%;
          }
        }
        @keyframes r_ballZ {
          25%{
            transform: scale(0.5);
          }
          50%{
            transform: scale(1);
          }
        }

    暂时就先写这么多,后面还会有补充。

    (未完待续)

  • 相关阅读:
    ​特征工程系列:特征预处理(上)
    特征工程系列:特征预处理(下)
    工具使用介绍
    Android图片处理
    Tomcat报java.lang.OutOfMemoryError: Java heap space错误停止运行如何解决
    JBOSS.71.1.Final安装配置
    android:windowSoftInputMode属性详解
    IOS入门之Swift语言(一)
    Android仿微信拍摄短视频
    Android实现播放视频
  • 原文地址:https://www.cnblogs.com/smallcool/p/7145996.html
Copyright © 2011-2022 走看看