css3实现圆形进度加载动画

使用到的css3属性有border-radius,transform,animation,clip等，在这里着重讲一下clip这个属性。因为博主也是第一次用这个属性。。。

这个属性就是规定盒子内显示的区域，可以有的值有auto（默认），有inherit：从父类继承，还有就是添加rect(top,right,bottom,left)。就是规定一下显示区域，只有盒子内从盒子的左上角的顶点做位置对比，只有在这四个值内的区域才能够显示出来。

重点：这个属性必须在绝对定位absolute或基于浏览器定位时fixed情况下，才管用。

具体情况还是自己测试一下，就全明白了。这个属性没有过渡效果，如果写到动画当中，它会从切换开始时间和切换时间取中间值，直接切换过去。

下面先上一个实现后的效果的代码，然后我还会再写一个封装好的代码，以便懒人使用。

<!doctype html>
<html>
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.div{position: absolute;left:0;top:0;width:100%;height: 100%;border-radius: 50%;border:10px solid rgba(0,0,0,0);box-sizing: border-box;}.left,.right{border-right-color: rgba(0,0,0,0);border-bottom-color: rgba(0,0,0,0);transform: rotate(-45deg);}#circle.hover .left{border-left:10px solid #1caffc;border-top:10px solid #1caffc;animation: left-animation 5s linear;}#circle.hover .right{border-left:10px solid #1caffc;border-top:10px solid #1caffc;animation: right-animation 5s linear;}#circle{top:200px;left:40%;width:200px;height: 200px;border-width: 0;clip:rect(0px,200px,200px,100px);}#circle.hover{animation: circle-animation 5s linear;}@keyframes circle-animation {0%{clip:rect(0px,200px,200px,100px);}100%{clip:auto;}}@keyframes left-animation {0%{transform: rotate(-45deg);}50%{transform: rotate(135deg);}100%{transform: rotate(315deg);}}@keyframes right-animation {0%{transform: rotate(-45deg);}50%{transform: rotate(135deg);}100%{transform: rotate(135deg);}}</style>
</head>
<body><div class="div hover" id="circle"><div class="right div"></div><div class="left div"></div></div>
</body>
</html>

下午因为项目需求，书写了一个构造函数，支持一些属性的修改，由于用了一下午，比较粗糙，凑合着用吧。只要把函数引入，实例化的时候设置将div的id传入，注意，一定要给div设置定位属性position为absolute或者fixed才管用。

<!doctype html>
<html>
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#circle{position: absolute;left:45%;top:200px;}</style>
</head>
<body><div id="circle"></div>
</body>
<script>function Loading(setting) {this.settings ={animationTime:5,//动画执行时间divId:"circle",//div盒子的iddivWidth:"200px",//盒子的宽度divHeight:"200px", // 盒子的高度divClassName: "active", //添加class名字后就会执行加载动画leftDivName:"left", //第一个盒子的class名字rightDivName:"right", //内部第二个盒子的class名字infinite:true, // 是否循环loadingWidth:"10px", //圆圈宽度loadingColor:"#000" //圆圈的颜色};this.timeOut = null; //延迟器if(setting){for(var i in setting){this.settings[i] = setting[i];}}this.prefix = function () {var div = document.createElement('div');var cssText = '-webkit-transition:all .1s; -moz-transition:all .1s; -o-transition:all .1s; -ms-transition:all .1s; transition:all .1s;';div.style.cssText = cssText;var style = div.style;if (style.webkitTransition) {return '-webkit-';}if (style.MozTransition) {return '-moz-';}if (style.oTransition) {return '-o-';}if (style.msTransition) {return '-ms-';}return '';};this.runOne = function (callback) {var that = this;//调用运行一次this.div.classList.add(this.settings.divClassName);this.timeOut = setTimeout(function () {that.div.classList.remove(that.settings.divClassName);callback.call(that.div,that.div);},+that.settings.animationTime*1000)};this.runForever = function () {this.div.classList.add(this.settings.divClassName);};var div = this.div = document.getElementById(this.settings.divId);div.style.cssText = "border-radius:50%; width:"+this.settings.divWidth+"; height:"+this.settings.divHeight+"; clip:rect(0,"+div.offsetWidth+"px,"+div.offsetHeight+"px,"+div.offsetWidth/2+"px);;";var left = document.createElement("div");left.className = this.settings.leftDivName;var right = document.createElement("div");right.className = this.settings.rightDivName;var style = document.createElement("style");div.appendChild(left);div.appendChild(right);style.innerText = "" +"@"+this.prefix()+"keyframes circle-animation {" +"   0%{clip:rect(0,"+div.offsetWidth+"px,"+div.offsetHeight+"px,"+div.offsetWidth/2+"px);}" +"   100%{clip:auto;}" +"}\n" +"@"+this.prefix()+"keyframes left-animation {" +"   0%{transform: rotate(-45deg);}" +"   50%{transform: rotate(135deg);}" +"   100%{transform: rotate(315deg);}" +"}\n" +"@"+this.prefix()+"keyframes right-animation {" +"   0%{transform: rotate(-45deg);}" +"   50%{transform: rotate(135deg);}" +"   100%{transform: rotate(135deg);}" +"}\n" +"#"+this.settings.divId+"."+this.settings.divClassName+"{" +"   "+this.prefix()+"animation: circle-animation "+this.settings.animationTime+"s linear "+(this.settings.infinite ? "infinite":"")+";" +"}\n" +"#"+this.settings.divId+" ."+this.settings.leftDivName+",#"+this.settings.divId+" ."+this.settings.rightDivName+"{" +"   border-left:"+this.settings.loadingWidth+" solid "+this.settings.loadingColor+";" +"   border-top:"+this.settings.loadingWidth+" solid "+this.settings.loadingColor+";" +"   border-right:"+this.settings.loadingWidth+" solid rgba(0,0,0,0);" +"   border-bottom:"+this.settings.loadingWidth+" solid rgba(0,0,0,0);" +"   transform: rotate(-45deg);" +"   position:absolute;" +"   left:0;" +"   top:0;" +"   width:100%;" +"   height:100%;" +"   border-radius:50%;" +"   box-sizing:border-box;" +"}\n" +"#"+this.settings.divId+"."+this.settings.divClassName+" ."+this.settings.leftDivName+"{" +"   "+this.prefix()+"animation: left-animation "+this.settings.animationTime+"s linear "+(this.settings.infinite ? "infinite":"")+"}\n" +"#"+this.settings.divId+"."+this.settings.divClassName+" ."+this.settings.rightDivName+"{" +"   "+this.prefix()+"animation: right-animation "+this.settings.animationTime+"s linear "+(this.settings.infinite ? "infinite":"")+"}\n" +"";document.head.appendChild(style);}var obj = new Loading({divId:"circle"}); //实例化构造函数obj.runOne(function () { //只运行一次，外加传入一个匿名函数console.log("动画执行完成");obj.runForever(); // 调用一直执行的函数});</script>
</html>

css3实现圆形进度加载动画相关推荐

html5 黑色圆圈,html5 css3圆形百分比加载动画特效
特效描述:html5 css3 圆形百分比加载动画特效.html5 css3 loading加载动画,圆形百分比进度条加载动画,加载完成显示健康度检测得分情况. 代码结构 1. 引入JS 2. HT ...
Css3+jquery 实现loading加载动画
一.Css3+jquery 实现loading加载动画这是一个 Loading 加载demo 不需要图片纯html和css 实现样式以下是html css以及js的代码需要自取 <!DO ...
Android 自定义进度加载动画
偶尔浏览一个android开发网站,发现进度加载动画比较不错,觉得挺有意思就自己参考了下自己做了一个进度加载动画效果图如下: 首选来看自定义动画 package com.itzb.paintdem ...
加载动画php,CSS3学习之页面加载动画（二）
本篇文章给大家分享6种css3的页面加载动画.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 在之前的文章[CSS3学习之页面加载动画(一)]中已经分享了四个CSS3的加载动画,今天 ...
android自定义笑脸,Android实现笑脸进度加载动画
最近看到豆瓣的笑脸loading很有意思,看一张效果图: 下面分析一下如何实现这样的效果: 1.默认状态是一张笑脸的状态(一个嘴巴,两个眼睛,默认状态) 2.开始旋转,嘴巴追上眼睛(合并状态) 3.追 ...
html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
php设置加载动画,如何用CSS3制作页面圆圈加载动画（附代码）
打开页面时,经常会遇到页面正在加载的情况,作为一个前端工程师,你知道如何用CSS3实现页面加载动画效果吗?这篇文章就和大家分享一个炫酷的圆圈加载动画效果的代码,有一定的参考价值,感兴趣的朋友可以看看. ...
纯css3可爱的Loading加载动画特效
这个是一款可爱的loading动画,觉得好看的小伙伴一定要试试哦! html代码 <div class="loadster"><div class="l ...
超酷jQuery进度条加载动画集合
在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...

css3实现圆形进度加载动画

css3实现圆形进度加载动画相关推荐

最新文章

热门文章