网站建设 >

查看其它板块

怎么用纯CSS3实现页面loading加载动画效果

小编给大家分享一下怎么用纯CSS3实现页面loading加载动画效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联专业为企业提供成华网站建设、成华做网站、成华网站设计、成华网站制作等企业网站建设、网页设计与制作、成华企业网站模板建站服务，十多年成华做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

实例示范：制作一个柱状动画加载效果，条纹由长变短再变长，具体代码如下：

HTML部分：

CSS部分：

.box{

margin:100pxauto;

width:50px;

height:60px;

}

.box>div{

background-color:#67CF22;

height:100%;

width:6px;

display:inline-block;

-webkit-animation:stretchdelay1.2sinfiniteease-in-out;

animation:stretchdelay1.2sinfiniteease-in-out;

}

.box.r2{

-webkit-animation-delay:-1.1s;

animation-delay:-1.1s;

}

.box.r3{

-webkit-animation-delay:-1.0s;

animation-delay:-1.0s;

}

.box.r4{

-webkit-animation-delay:-0.9s;

animation-delay:-0.9s;

}

.box.r5{

-webkit-animation-delay:-0.8s;

animation-delay:-0.8s;

}

@-webkit-keyframesstretchdelay{

0%,

40%,

100%{

-webkit-transform:scaleY(0.4)

}

20%{

-webkit-transform:scaleY(1.0)

}

}

@keyframesstretchdelay{

0%,

40%,

100%{

transform:scaleY(0.4);

-webkit-transform:scaleY(0.4);

}

20%{

transform:scaleY(1.0);

-webkit-transform:scaleY(1.0);

}

}

怎么用纯CSS3实现页面loading加载动画效果

以上是“怎么用纯CSS3实现页面loading加载动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网页名称：怎么用纯CSS3实现页面loading加载动画效果
本文链接：http://cdkjz.cn/article/iipdoo.html

返回首页了解更多建站资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线成都：13518219792 座机：028-86922220

在线咨询提交需求

友情链接交换友情链接

四川黔盛装饰成都400电话重庆托管服务器成都商城app开发成都广告招牌成都广告制作雕琢时光茶叶添翼二手车鉴定评估网站推广营销顺泽窗帘

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图