css3 loading

wuaiqiu 发布于2019-08-30 15:53 / 2241人阅读

摘要：效果一效果二蓝到浅蓝渐变右半圆环浅蓝到白色渐变左半圆环效果三参考文章

效果一

HTML

CSS

.zh-loading{position: absolute;z-index: 9;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.75);}
.zh-loading ul{position: absolute;z-index: 2;left: 50%;top: 50%;height: 60px;overflow: hidden;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.zh-loading ul li{float: left;height: 100%;width: 4px;margin: 0 2px;background-color: #ccc;-webkit-animation: stretchdelay 1.2s infinite ease-in-out;animation: stretchdelay 1.2s infinite ease-in-out;}
.zh-loading ul li:nth-of-type(2){-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}
.zh-loading ul li:nth-of-type(3){-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}
.zh-loading ul li:nth-of-type(4){-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}
@-webkit-keyframes stretchdelay{0%, 40%, 100%{-webkit-transform: scaleY(0.4)}
20%{-webkit-transform: scaleY(1.0)}}
@keyframes stretchdelay{0%, 40%, 100%{transform: scaleY(0.4);-webkit-transform: scaleY(0.4);}
20%{transform: scaleY(1.0);-webkit-transform: scaleY(1.0);}}

效果二

效果三

HTML

CSS

.zh-loading{display: none;margin: 1rem auto 0;width: 34px;height: 34px;}
.zh-loading li{float: left;width: 14px;height: 14px;margin: 2px 0 0 2px;background-color: #F2F2F2;}
.zh-loading li:nth-of-type(1){-webkit-animation: loadingEffect 1s ease 1s infinite;-ms-animation: loadingEffect 1s ease 1s infinite;animation: loadingEffect 1s ease 1s infinite;}
.zh-loading li:nth-of-type(2){-webkit-animation: loadingEffect 1s ease .25s infinite;-ms-animation: loadingEffect 1s ease .25s infinite;animation: loadingEffect 1s ease .25s infinite;}
.zh-loading li:nth-of-type(3){-webkit-animation: loadingEffect 1s ease .75s infinite;-ms-animation: loadingEffect 1s ease .75s infinite;animation: loadingEffect 1s ease .75s infinite;}
.zh-loading li:nth-of-type(4){-webkit-animation: loadingEffect 1s ease .5s infinite;-ms-animation: loadingEffect 1s ease .5s infinite;animation: loadingEffect 1s ease .5s infinite;}
@-webkit-keyframes loadingEffect{
    to{background-color: #BCBCBC;}
}
@-ms-keyframes loadingEffect{
    to{background-color: #BCBCBC;}
}
@keyframes loadingEffect{
    to{background-color: #BCBCBC;}
}

参考文章：
http://www.cnblogs.com/lhb25/...
https://www.jianshu.com/p/0cc...

GPU云服务器云服务器 css3loadding load() loaded loading

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116609.html

用 CSS3 动画功能，做一个有逼格的加载动画

摘要：主要用到的知识点参阅菜鸟教程动画延时实现说明用于区别四个不同点，里放通用样式重点如果了解，看这个更清晰些，如果不懂，看下面生成的定死容器的高度，不然会上下浮动横向排列子元素纵向排列子元素去掉最后一个 showImg(https://segmentfault.com/img/bVbqZDr?w=936&h=432); 主要用到的知识点：参阅菜鸟教程： http://www.runoob...

546669204 2019-08-02 16:11 评论0 收藏0
用 CSS3 动画功能，做一个有逼格的加载动画

摘要：主要用到的知识点参阅菜鸟教程动画延时实现说明用于区别四个不同点，里放通用样式重点如果了解，看这个更清晰些，如果不懂，看下面生成的定死容器的高度，不然会上下浮动横向排列子元素纵向排列子元素去掉最后一个 showImg(https://segmentfault.com/img/bVbqZDr?w=936&h=432); 主要用到的知识点：参阅菜鸟教程： http://www.runoob...

canopus4u 2019-08-29 18:31 评论0 收藏0
进入 CSS3 动画

摘要：我最近有机会深入研究一些动画。下一步是添加动画效果并确定它们何时发生。创建关键帧后，您可以将动画称为属性。点击动画使用上面的关键帧和动画语法，这里是我用来在本页顶部的中制作动画的代码。我最近有机会深入研究一些CSS3动画。我使用了像animate.css这样的库，用javascript完成了动画，但从未做过任何自定义的CSS3工作原文任务我们最近在SeatGeek更新了我们的...

lindroid 2019-08-30 15:44 评论0 收藏0
css3效果大集合（1）

摘要：背景渐变色效果标准的语法三角形效果圆环效果上下跳动加载效果代码文章链接 1、背景渐变色效果 .main{ background: -webkit-linear-gradient(#a18cd1, #fbc2eb); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(#a18cd1, #fbc2eb...

teren 2019-08-30 15:44 评论0 收藏0
css3 loading

摘要：动画 css /*loading动画*/ #pageLoading{width: 40px;height: 40px;position: fixed;margin: auto;top: 0px;left: 0px;right: 0px;bottom: 0px;} #pageLoading div {width: 100%;height: 100%;position: absolute;...

testbird 2019-08-29 12:51 评论0 收藏0