用CSS实现加载的动画效果
用纯CSS实现加载的一些动态效果,可以把加载效果中的元素分成很多个小部分,每个部分都有动画,每个部分的动画再设置相应的延迟效果,这样,看起来就是连贯的加载动画效果。代码如下:
1、效果1
<div className='loading-con'>
<div className='load-dian dian1'></div>
<div className='load-dian dian2'></div>
<div className='load-dian dian3'></div>
<div className='load-dian dian4'></div>
<div className='load-dian dian5'></div>
<div className='text-loading'>加载中</div>
</div>
.loading-con{
position: absolute;
top: 50%;
width: 100px;
height: 100px;
left: 50%;
transform: translate(-50%,-50%);
background: rgba(0,0,0,0.65);
border-radius: 8px;
}
.load-dian{
position: absolute;
width: 8px;
height: 8px;
border-radius: 5px;
background: #fff;
top: 40%;
-webkit-animation: Loading-delay 1.2s infinite ease-in-out both;
animation: Loading-delay 1.2s infinite ease-in-out both;
}
.dian1{
left: 15%;
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.dian2{
left: 30%;
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.dian3{
left: 45%;
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.dian4{
left: 60%;
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.dian5{
left: 75%;
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
@-webkit-keyframes Loading-delay {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
2、效果2
<div className='loading-con-o'>
<div className='load-item load-item-1'></div>
<div className='load-item load-item-2'></div>
<div className='load-item load-item-3'></div>
<div className='load-item load-item-4'></div>
<div className='load-item load-item-5'></div>
<div className='load-item load-item-6'></div>
<div className='load-item load-item-7'></div>
<div className='load-item load-item-8'></div>
<div className='load-item load-item-9'></div>
<div className='load-item load-item-10'></div>
<div className='load-item load-item-11'></div>
<div className='load-item load-item-12'></div>
<div className='text-loading'>加载中</div>
</div>
.loading-con-o{
position: absolute;
top:50%;
width: 100px;
height: 100px;
left: 50%;
transform: translate(-50%,-50%);
background: rgba(0,0,0,0.65);
border-radius: 8px;
}
.load-item{
position: absolute;
width: 8px;
height: 2px;
border-radius: 2px;
background: #fff;
top: 40%;
left: calc(50% + 8px);
transform-origin:-100%;
-webkit-animation: Loading-delay1 1.2s infinite ease-in-out both;
animation: Loading-delay1 1.2s infinite ease-in-out both;
}
@-webkit-keyframes Loading-delay1 {
0%, 100% {
opacity:;
}
40% {
opacity: 0.1;
}
}
.load-item-1{
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
} .load-item-2{
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
} .load-item-3{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
} .load-item-4{
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
} .load-item-5{
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.load-item-6{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.load-item-7{
-webkit-transform: rotate(210deg);
transform: rotate(210deg);
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.load-item-8{
-webkit-transform: rotate(240deg);
transform: rotate(240deg);
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.load-item-9{
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.load-item-10{
-webkit-transform: rotate(300deg);
transform: rotate(300deg);
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.load-item-11{
-webkit-transform: rotate(330deg);
transform: rotate(330deg);
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
.load-item-12{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-animation-delay: -0s;
animation-delay: -0s;
}
用CSS实现加载的动画效果的更多相关文章
- 用纯CSS实现加载中动画效果
HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut&quo ...
- HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% // ...
- [Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- css实现加载中的效果
那天闲着,学习了一下样式效果,自己实现了一个简单的加载中的效果 废话不多说,开始吧!! 一.实现一个圆环 要实现圆环,首先我们需要知道盒模型里面border的本质,先来看一个效果吧 从上面 ...
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器 ...
- 使用CSS3实现超炫的Loading(加载)动画效果
SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器 ...
- 如何使用SVG生成超酷的页面预加载素描动画效果
在线演示 本地下载 1 SVG简介 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 2 SVG的特点 与其他图像 ...
- 多种方法实现Loading(加载)动画效果
当我们ajax提交一个按钮的时候,给那个按钮来个Loading效果会高端很多,体验也会上升个层次. 既能让用户知道正在提交中,也能防止二次提交,好处多多呢.
- (转)多种方法实现Loading(加载)动画效果
当我们ajax提交一个按钮的时候,给那个按钮来个Loading效果会高端很多,体验也会上升个层次. 既能让用户知道正在提交中,也能防止二次提交,好处多多呢.
随机推荐
- 新人大餐:2018最新Office插件开发之ExcelDNA开发XLL插件免费教学视频,五分钟包教包会
原始链接:https://www.cnblogs.com/Charltsing/p/ExcelDnaVideoCourse.html QQ: 564955427 先解释一下,为什么要做这个视频: 我在 ...
- 核主成分分析方法(KPCA)怎么理解?
先回顾下主成分分析方法.PCA的最大方差推导的结论是,把数据投影到特征向量的方向后,方差具有极大值的.假如先把数据映射到一个新的特征空间,再做PCA会怎样?对于一些数据,方差会更好地保留下来.而核方法 ...
- Centos6.5-DHCPServer安装
1.查询dhcp有没有被安装,如下没有被安装 [zfp@localhost ~]$ rpm -q dhcppackage dhcp is not installed[zfp@localhost ~]$ ...
- SpringCloud---网关概念、Zuul项目搭建(六)
SpringCloud---网关概念.Zuul项目搭建(六) 一.网关概念 1.什么是路由网关 网关是系统的唯一对外的入口,介于客户端和服务器端之间的中间层,处理非业务功能 提供路由请求.鉴权.监控. ...
- IO模型、线程模型
五种IO模型介绍和对比 https://juejin.im/post/5bd32b84f265da0ac962e7c9 Linux 的 IO 通信 以及 Reactor 线程模型浅析 https:// ...
- DS博客作业03--栈和队列
1.本周学习总结 本周学习中学习了栈和队列,栈和队列都属于线性结构,栈和队列不同于线性表的地方在于它们的相关运算具有一些特殊性,所以栈和队列也称为操作受限的线性表. 1.栈 栈是重要且常用的数据结构之 ...
- zookeeper集群的简单搭建
zookeeper简单介绍 zookeeper是一个为分布式应用提供一致性服务的软件,它是开源的Hadoop项目的一个子项目,并根据google发表的一篇论文来实现的.zookeeper为分布式系统提 ...
- code runner 使用教程
https://zhuanlan.zhihu.com/p/54861567 其中解决无法在编辑器中编辑问题(编辑器只读) 只需要把Code-runner: Run In Terminal true(打 ...
- 洛谷P1197 [JSOI2008]星球大战
题目 由于题目不要求强制在线,所以可以离线. 而离线的话就会带来许多便利,所以我们可以先处理出全部打击后的图,通过并查集来判断是否连通. 然后再从后往前枚举,得出答案 #include <bit ...
- bzoj 2157: 旅游 (LCT 边权)
链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2157 题面; 2157: 旅游 Time Limit: 10 Sec Memory Lim ...