css3实现loading动画效果

最终的loading效果如图：

说明：共两个层，每个层里有4个花瓣，共组成8个花瓣；动画过程为每个花瓣的透明度依次从1变为0的过程。

HTML代码：

<div class="loadingBox"><div class="loadingBox1"><div class="circle circle1"></div><div class="circle circle2"></div><div class="circle circle3"></div><div class="circle circle4"></div></div><div class="loadingBox2"><div class="circle circle1"></div><div class="circle circle2"></div><div class="circle circle3"></div><div class="circle circle4"></div></div>
</div>

CSS代码：

<style type="text/css">
.loadingBox{width:25px;height:25px;position:relative;margin:50px auto;
}
.loadingBox1,.loadingBox2{width:100%; height:100%;position:absolute;}
.loadingBox2{-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
}
.circle{position:absolute;width:10px;height:10px;background:#333;    -webkit-animation:loading .8s infinite linear;-moz-animation:loading .8s infinite linear;-o-animation:loading .8s infinite linear;animation:loading .8s infinite linear;
}
.loadingBox2 .circle1{-webkit-animation-delay:0.1s;-moz-animation-delay:0.1s;animation-delay:0.1s;
}.circle2{-webkit-animation-delay:0.2s;-moz-animation-delay:0.2s;animation-delay:0.2s;
}
.loadingBox2 .circle2{-webkit-animation-delay:0.3s;-moz-animation-delay:0.3s;animation-delay:0.3s;
}
.circle3{-webkit-animation-delay:0.4s;-moz-animation-delay:0.4s;animation-delay:0.4s;
}
.loadingBox2 .circle3{-webkit-animation-delay:0.5s;-moz-animation-delay:0.5s;animation-delay:0.5s;
}
.circle4{-webkit-animation-delay:0.6s;-moz-animation-delay:0.6s;animation-delay:0.6s;
}
.loadingBox2 .circle4{-webkit-animation-delay:0.7s;-moz-animation-delay:0.7s;animation-delay:0.7s;
}.circle1{/*左上*/top:0;left:0;border-radius:0 10px;
}
.circle2{/*右上*/top:0;right:0;border-radius:10px 0;
}
.circle3{/*右下*/bottom:0;right:0;border-radius:0 10px;
}
.circle4{/*左下*/bottom:0; left:0;border-radius:10px 0;
}
@-webkit-keyframes loading{0%{opacity:1;}50%{opacity:0.5;}100%{opacity:0;}
}
@-moz-keyframes loading{0%{opacity:1;}50%{opacity:0.5;}100%{opacity:0;}
}
loading{0%{opacity:1;}50%{opacity:0.5;}100%{opacity:0;}
}
</style>

转载于:https://www.cnblogs.com/lch880/p/3571861.html

css3实现loading动画效果相关推荐

css加载更多动画效果,css3实现loading动画效果
通过css3动画实现三种loading加载动画效果1:通过css3的border-radius与transform的rotate()实现效果2:通过css3动画animation的animatio ...
CSS3 实现 loading 动画效果
在观看视频时经常遇到卡顿,此时屏幕中间通常会有一个圆圈一直在转,作为一种正在加载的显示其实,它可以通过CSS3的动画实现实现方法由围成一个圈的一些小圆点,然后顺时针方向,逐个半径变小,再变大,也 ...
loading动画_超干货 CSS3/SVG Loading动画集合
随着css3实现各种炫酷动画效果越来越流行.今天给大家推荐一些css3和SVG实现loading加载动画效果. 先上一波令人愉悦的动画效果. 怎么样,是不是感觉很nice,那就继续往下看吧.这里为大家 ...
HTML显示波形,CSS3波形loading动画特效
这是一款使用CSS3制作的波形loading动画特效.这组波形loading动画特效共有11种波形动画,分别使用不同的CSS3 animation动画来实现. 使用方法在页面中引入style.css ...
css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构该css3线条波浪动画效果的HTML结构如下: CSS样式然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com
html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
25个CSS3 渐变和动画效果教程
2019独角兽企业重金招聘Python工程师标准>>> 随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站 ...
[Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
html ie动画效果,css3强大的动画效果animate使用说明及浏览器兼容介绍
好久没更新blog,上次发文(11月8日)到现在刚好一个月,期间项目上的东西比较多,一时觉得时间比较紧,没来得及更新.这个星期总算是告一段落,补上几篇技术性的文章.好吧,第一篇是关于css3动画的使用 ...

css3实现loading动画效果

css3实现loading动画效果相关推荐

最新文章

热门文章