CSS3饼状loading效果
概述
详细
一、前情提要
1、本demo主要使用纯CSS3实现一个饼状Loading效果,需要熟悉CSS3中的动画知识。
2、掌握position的几个属性及z-index的作用。
position属性规定元素的定位类型。
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
值 | 描述 |
---|---|
absolute |
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed |
生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative |
生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
值 | 描述 |
---|---|
auto | 默认。堆叠顺序与父元素相等。 |
number | 设置元素的堆叠顺序。 |
inherit | 规定应该从父元素继承 z-index 属性的值。 |
二、程序实现
1、文件结构如下:
2、实现原理
总体分为两部分:
外圈和内圆。颜色自定义,外圈和内圆是通过position定位重合在一起,实质上外圈转完2圈,内圆的红色和粉色才各转完1圈(内圆的全程包括红色从1到0、粉色从1到0),所以内圆的动画时间应该是外圈的两倍!!!
外圈:
外圈很简单,设置border-radius:50%
即可画出一个圆,然后设置三条边框为红色,另外一条为透明,即画出了四分之三个圆边框(即外圆)。
然后设置外圈动画,为其设置的动画就是旋转一圈,infinite表示无限次。
内圆:
此处有四个半圆,左边两个,右边两个(round为红色,mask为粉色),动画主要通过改变两个红色半圆的z-index
值来控制各个半圆显示的优先顺序。下面过程描述内圆的动画全程(其中右边的粉色全程不需要动,右边红色部分只需要改变z-index
的值来改变显示的优先级,从而实现显示和隐藏的效果来配合补充左半边的圆):
a. 初始设置 模型图:
红左 z-index:3
粉1 z-index:2
红右 z-index:1
粉2 z-index:0
b. 左边红色旋转完180度时(逆时针旋转所以是360→180→0)模型图:
c. 左边红色转完到0度时(此时左右两边的红色半圆被粉色覆盖)模型图:
d.粉色半圆重复之前红色半圆的动画(即左边粉色360→180→0)模型图:
e. 当左边粉色旋转到0度时,全部半圆回到了最初始的状态,整个动画即完成(在相同时间下外圈完成了2次的动画)。模型图:
这样外圈和内圆配合完成两圈即为整个动画过程。
3、主要代码
a. 首先html结构如下:
<div class="con-wrap">
<!--外圈-->
<div class="out-round"></div> <!--内圆,里面有半圆四个-->
<div class="in-round">
<div class="lt-round"></div>
<div class="lt-mask"></div>
<div class="rt-round"></div>
<div class="rt-mask"></div>
</div>
</div>
b. 四分之三个圆实现:
.out-round {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 150px auto;
border: 3px solid #FF298C;
border-left: 3px solid transparent;
animation: outRound 1s linear infinite running;
}
c. 左半圆和右半圆实现:
/*左边两个半圆*/
.lt-round, .lt-mask {
position: absolute;
width: 35px;
height: 70px;
border-radius: 35px 0 0 35px;
transform-origin: right center;
} /*右边两个半圆*/
.rt-round, .rt-mask {
position: absolute;
left: 50%;
width: 35px;
height: 70px;
border-radius: 0 35px 35px 0;
}
d. 涉及的部分CSS属性说明:
border-radius:圆角设置
position:元素的定位类型
z-index:元素的堆叠顺序
animation:rtRound 2s linear infinite running;
animation-name:动画名称
animation-time:执行时间
animation-timing-function:动画执行速度
animation-play-state:动画初始状态
transform:
rotate(deg):旋转角度
动画定义:
@keyframes 动画名称 {
0% { }
…………
100% { }
}
三、运行效果
1、直接双击index.html文件打开即可查看效果。
2、运行截图:
3、demo演示效果:
四、其他补充
1、由于动画是匀速变化的,但是z-index的值不能匀速变化,所以只能在某个很短时间内去改变z-index的值。这样才能达到效果。
2、由于是自己定的大小,导致看起来大小不太合适。
注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权
CSS3饼状loading效果的更多相关文章
- 用CSS3实现饼状loading效果
原文地址:http://visugar.com/2017/05/17/CSS3%E9%A5%BC%E7%8A%B6loading%E6%95%88%E6%9E%9C/ 写在前面 (附录有源码及效果) ...
- html+css3 实现各种loading效果
效果见下图 代码: 建议直接去本人github上浏览代码 https://github.com/wuliqiangqiang/loading <!DOCTYPE html> <htm ...
- 10种CSS3实现的Loading效果
原文链接:http://www.cnblogs.com/jr1993/p/4622039.html 第一种效果: 代码如下: <div class="loading"> ...
- HTML5+CSS3 loading 效果收集--转载
用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和 ...
- 5年前端经验小伙伴教你纯css3实现饼状图
有一些网页中,有时候会碰到饼状图的需求,比如统计图表,进度指示器,定时器等,实现方式也是各种各样,现在也有不少现成的js库,可以直接拿来使用,方便很多.这里笔者为大家演示一种纯css实现饼状图效果的方 ...
- 【转】 CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...
- CSS3轻松实现清新 Loading 效果
至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例. 第一种效果: HTM ...
- CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...
- CSS3实现8种Loading效果【第二波】
原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...
随机推荐
- python笔记32-ddt框架优化(生成html报告注释内容传变量)
前言 至于什么是ddt这个可以参考我之前写的博客内容,使用ddt框架的时候,有个问题困扰我很久了,一直没得到解决(也有很大小伙伴问过我,没解决抱歉了!) 这个问题就是:如何使用ddt框架时,生成的ht ...
- 【甘道夫】通过Mahout构建推荐系统--通过IDRescorer扩展评分规则
通过Mahout构建推荐系统时,假设我们须要添�某些过滤规则(比方:item的创建时间在一年以内),则须要用到IDRescorer接口,该接口源代码例如以下: package org.apache.m ...
- html嵌套iframe怎样实现等iframe页面载入完进行下一步调用
</pre>假设想在你的html里面显示一张图片.或者显示一个报表,常常会在里面嵌套iframe,当我们点查询报表时.在报表显示过程中,我们想做个遮罩层,提示等待...可是报表显示出来后. ...
- 混沌数学之CircuitChaotic(二维离散电路混沌系统)
相关软件参见:混沌数学之离散点集图形DEMO 相关代码: // http://wenku.baidu.com/link?url=yg_gE7LUXCg2mXRp-ZZdfRXXIkcNj8YOhvN7 ...
- PHP 解决版本问题:"Assigning the return value of new by reference is deprecated"
问题描述: 在最近使用ECSHOP v273帮客户建立了一个商城系统,商城搭建一切ok但在使用中后台发现了一个500错误 在服务器上访问该地址发现了错误信息:"Assigni ...
- chm格式文件,win7下用c:/windows/hh.exe打开
chm格式文件,win7下用c:/windows/hh.exe打开
- IE11与Cognos怪谈
想必大家都知道高版本的IE运行Cognos相关组件的时候要设置兼容性,安全级别相对调低等设置.但是升级了win10系统后,默认的IE版本是IE11的,装了Cognos10.2.1之后,进行了一个常规的 ...
- 如何将数据转换libsvm格式文件
原文:http://blog.sina.com.cn/s/blog_5c2f929b0100qse8.html 有三种工具可用1.网上有一个xls文FormatDataLibsvm.xls具有宏命令, ...
- 我对REST的理解
1:rest的由来 REST即表述性状态传递(英文:Representational State Transfer,简称REST) 通俗点说:资源在网络中以某种表现形式进行状态转移. 源于REST之父 ...
- idea 设置代码的颜色