当前位置:Gxlcms > 前端框架 > CSS3学习之页面加载动画(四)

CSS3学习之页面加载动画(四)

时间:2021-07-01 10:21:17 帮助过:36人阅读

本篇文章再给大家分享6种css3的页面加载动画。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

在之前的文章【CSS3学习之页面加载动画(三)】中又分享了6个CSS3的加载动画,今天继续分享(标题接上一次),图片看得不真切。

十七、效果十七

三个小球,纵向居中,间距撑开,依次改变小球的translateY的值即可。

@keyframes leap_ball {
      50% {
        transform: translateY(60px);
      }
    }

十八、效果十八

三个小球,横纵方向上均居中,通过外边距撑开小球之间的距离,从效果上看是左右两边的两个小球在围绕中间小球做环绕运动,那么我们可以直接让小球的父元素来旋转,来达到两边小球的环绕效果(父元素旋转的时候,因为圆形,所以中间小球看不出是在旋转,并且中间的位置也不会改变,从视觉上看,中间小球没有做任何变化)。

@keyframes wind_ball {
      50% {
        transform: rotateZ(180deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }

十九、效果十九

一共五个小球,每一个小球执行的动画都一样,只是每个小球的动画延迟时间不同,而使小球的位置不同,将五个小球定位至同一个位置作为统一起点(这里,我是将五个小球统一定位至最右边)

{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}@keyframes cool_ballP {
      80% {
        right: 75%;    //到达终点,开始返回起点      }
    }
@keyframes cool_ballS {
      80% {               //到达终点
        top: 25%;
        width: 20px;
        height: 20px;
      }
      81% {               //开始返回起点,长度变大,宽度变小,模拟移动产生的形变
        top: 0;
        width: 25px;
        height: 15px;
      }
      99% {               //到达起点
        top: 0;
        width: 25px;
        height: 15px;
      }
       100% {             //恢复初始
        width: 20px;
        height: 20px;
      } 
    }

二十、效果二十

共八个小球,定位围成一个圆,改变小球的宽度、高度即可(要保持小球改变的是以小球的圆心为基准)

{animation: load_ball 1.6s linear infinite;}@keyframes load_ball {
      50% {
        height: 0;
        width: 0;
      }
      80% {
        height: 0;
        width: 0;
      }
    }

(50%-80%小球维持宽度、高度保持0,形成了一半显示,一半隐藏的效果)

二十一、效果二十一

一共三个小球,每个小球的运动轨迹依然是相同的,这里,我将三个小球的中心定位到纵向顶部,横向中心,然后分三个阶段,先运动到右下角,再到左下角,最后返回起点。

(在每一个阶段接近中间的时间点,加上了透明度的改变)

@keyframes triangle_ball {
      16% {
        opacity: .6;
      }
      33% {
        left: 100%;
        top: 100%;
        opacity: 1;
      }
      50% {
        opacity: .6;
      }
      66% {
        left: 0;
        top: 100%;
        opacity: 1;
      }
      83% {
        opacity: .6;
      }
      99% {
        top: 0;
        left: 50%;
        opacity: 1;
      }
    }

二十二、效果二十二

这类似于一个旋转的齿轮,关键是如何做出一个齿轮的形状来,一个p给实现边框做里面的圆,给p的伪类虚线边框做外面的锯齿,伪类的边框越宽,锯齿越稀松,反之,越密集。

做出来齿轮了,就剩下旋转的小case了。

.gear_ball {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      display: inline-block;
      border: 4px #fff solid;
      position: relative;
    }

    .gear_ball:after {
      content: '';
      position: absolute;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      top: -8px;
      left: -8px;
      border: 8px #fff dashed;
    }

今天的分享结束,后面还会有一波,撒花完结。希望能对大家的学习有所帮助,更多相关教程请访问 CSS基础视频教程, CSS3视频教程,bootstrap教程!

以上就是CSS3学习之页面加载动画(四)的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行