html5 圆形加载进度条,纯css3超酷圆形Loading加载进度条特效
这是一款效果炫酷的纯css3圆形Loading加载进度条特效插件。该loading特效使用:before和:after伪元素来制作动画d的不同部分,然后给他们设置absolute定位和CSS transformations来创建动画效果。
制作方法
对于制作一个水平的loading进度条并不是十分的困难,但是要制作一个平滑运动的圆形进度条就有一点难度了。你要弄明白它们是如何工作的,先来看一下水平进度条的CSS样式代码:
水平进度条
.loading{
position: relative;
background: rgba(255,255,255,.8);
}
.loading:before{
content:'';
box-sizing: border-box;
/* centre everything */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 30px;
border: solid 1px #000;
border-radius: 30px;
}
.loading:after{
content:'';
box-sizing: border-box;
/* centre everything */
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border: solid 5px #000;
width: 28px;
height: 28px;
border-radius: 50%;
}
我们可以为任意元素添加一个class loading来使用上面的代码。我们将会得到下图所示的水平进度条,圆形小球在进度条的中心。
如果你想为整个页面应用loading效果,可以在body元素上添加class,同时还要设置一些页面的高度:
html, body { height: 100%; }
为了完成最终效果,我们需要在进度条上前后来回移动小球。
圆形进度条
对于圆形进度条我们添加以下的CSS代码:
.loading:after{
...
-webkit-animation: loading 3s ease-in-out infinite alternate;
animation: loading 3s ease-in-out infinite alternate;
}
在这个动画中最重要的属性是animation-timing-function和animation-direction。在animation-timing-function属性中我们使用了ease-in-out效果,这种效果在小球改变方向是有一个减速的效果。在这个例子中animation-direction必须设置为alternate。接下来为动画设定动画帧。
@keyframes loading {
0% { transform: translate(-99px, -50%); }
100% { transform: translate(71px, -50%); }
}
@-webkit-keyframes loading {
0% { transform: translate(-99px, -50%); }
100% { transform: translate(71px, -50%); }
}
来解释一下上面的translate取值设定。-50%比较容易理解,就是设置小球垂直居中。
对于0帧和100帧的两个数值,有两个计算公式:
0帧公式:
-(half the width of the bar - border width of the bar)
-(100 - 1) = -99
100帧公式:
(half the width of the bar - border width of the bar – width of circle)
100-1-28 = 71
你可以改变进度条的宽度和其它一些属性,修改之后要重新计算它们的动画帧。
html5 圆形加载进度条,纯css3超酷圆形Loading加载进度条特效相关推荐
- CSS3超酷网页Loading加载进度条动画效果
在jQuery之家上发现的一款css3效果. CSS3 animation超酷网页Loading加载进度条动画效果 >>查看演示 > ...
- html img 圆头像_纯CSS3炫酷圆形头像图片过滤特效
这是一款效果非常酷的纯CSS3炫酷圆形头像图片过滤特效.该特效将图片制作为圆形图片,以网格形式布局,带点击相应的分类按钮后,该类别的图片被放大显示,其它类别的图片被缩小,效果非常的不错. 制作方法 H ...
- 全屏响应式html5+jquery幻灯片轮播特效,纯CSS3超酷全屏响应式幻灯片特效
这是一款效果非常炫酷的纯CSS3全屏幻灯片特效.该幻灯片特效的效果类似于全屏水平方向的单页滚动效果.该幻灯片效果使用纯CSS3制作,代码仅有100多行,非常的小巧. 制作方法 HTML结构 整个幻灯片 ...
- jsp预加载转圈_30种CSS3炫酷页面预加载loading动画特效(推荐)
这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画.当你点击页面的任何 ...
- css拖动音乐进度条,用css3绘制酷狗音乐闪烁的进度条
看了看酷狗音乐播放器的界面,里面的哪个进度条的圆头一闪一闪的,具有良好的用户体验性,于是就用css绘制了一个,感觉还不错,可以广泛用于html5播放器上. html代码为: css代码为: .dise ...
- html的悬停图片圆形,css3炫酷圆形图片鼠标滑过特效
这是一款纯css3炫酷圆形图片鼠标滑过特效插件.在插件中,所有的缩略图都被用css3 border-radius制作成圆形,然后再在其上做各种鼠标滑过特效. HTML 所有demo的html结构都如下 ...
- 20个HTML5/CSS3超酷应用
http://www.gbtags.com/gb/share/2818.htm?utm_source=tuicool 20个HTML5/CSS3超酷应用 #文章 CSS3 HTML5 jQuery 申 ...
- html5 下拉框 美化,纯js超酷select下拉框美化插件
tastySelect是一款纯js超酷select下拉框美化插件.tastySelect下拉框插件支持多选,内置两种主题,使用CSS3动画过渡效果,整体设计时尚大方. 使用方法 在页面中引入tasty ...
- 纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
最新文章
- Linux 学习手记(1):命令行BASH的基本操作
- k8s网络架构图_唯品会基于Kubernetes(k8s)网络方案演进
- 会计记忆总结之六:账务处理程序
- 【Python基础】Pandas三种实现数据透视表的方法
- android support Percent支持库开发
- http压力测试工具
- 关于DNS区域查询,DNS字典爆破,以及查询文件问题
- 动态切换父元素隐藏和显示里面的子元素的动画会再一次执行吗?
- 关于工作的选择之软件开发还是软件维护的建议
- 非常好用的游戏数据保存类:ScriptableObject
- linux内存和flash区别,嵌入式Linux概念NOR/NAND Flash的差别
- 【Excel】如何用SUMIF实现SUMIFS的功能
- iOS 25个性能优化/内存优化常用方法
- Eclipse.org上Git已经超越了CVS与SVN
- AngularJS的学习--ng-show/ng-hide/ng-if和ng-switch
- 百度地图、腾讯地图坐标转换
- 笔记本键盘失灵解决办法
- 我只想保持本色,和少年的心气。
- Python常见面试题汇总(根据面试总结)
- 如何使用在线客服转接功能