争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

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

时间:2024/1/30作者:未知来源:争怎路由网人气:

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章就给大家分享四种css3的页面加载动画。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

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

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

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

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

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

一、第一种效果

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

一共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。

二、第二种效果

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

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

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

{animation: turn_atom 1.5s 0s ease infinite;}
@keyframes turn_atom {
      0%{
        height:25px;
        width: 25px;
        top: 0;
        left: 0;
      }
      50%{
        height: 20px;
        width: 20px;
        top: 60px;
        left: 60px;
      }
      51%{
        height: 15px;
        width: 15px;
        top: 60px;
        left: 60px;
      }
      100%{
        height: 20px;
        width: 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;
      }
    }

三、第三种效果

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

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

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

四、第四种效果

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

初始时,四个小球定位到同一个位置,通过关键帧来改变小球的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);
      }
    }

暂时就先写这么多,后面还会有补充。(未完待续)

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问 CSS基础视频教程 CSS3视频教程bootstrap教程

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


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:CSS3学习之页面加载动画(一)




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版