css3动画loading样式

演示结果：

　　

css样式：　　　

<style type="text/css">
body{
position: relative;
height: 900px;
}
.cssload-wrap {
position: absolute;
margin: 0 auto 0;
left: 50%;
top:50%;
margin-left: -218px;
transform: rotateX(75deg);
}
.cssload-circle {
position: absolute;
float: left;
border: 1px solid white;
animation: bounce 1.73s infinite ease-in-out alternate;
-o-animation: bounce 1.73s infinite ease-in-out alternate;
-ms-animation: bounce 1.73s infinite ease-in-out alternate;
-webkit-animation: bounce 1.73s infinite ease-in-out alternate;
-moz-animation: bounce 1.73s infinite ease-in-out alternate;
border-radius: 100%;
background: transparent;
top: -73px;
left: -73px;
}
.cssload-circle:nth-child(1) {
margin: 0 288px;
width: 10px;
height: 10px;
animation-delay: 115ms;
-o-animation-delay: 115ms;
-ms-animation-delay: 115ms;
-webkit-animation-delay: 115ms;
-moz-animation-delay: 115ms;
z-index: -1;
border: 1px solid rgba(255,43,0,0.7);
}
.cssload-circle:nth-child(2) {
margin: 0 283px;
width: 19px;
height: 19px;
animation-delay: 230ms;
-o-animation-delay: 230ms;
-ms-animation-delay: 230ms;
-webkit-animation-delay: 230ms;
-moz-animation-delay: 230ms;
z-index: -2;
border: 1px solid rgba(255,85,0,0.7);
}
.cssload-circle:nth-child(3) {
margin: 0 278px;
width: 29px;
height: 29px;
animation-delay: 345ms;
-o-animation-delay: 345ms;
-ms-animation-delay: 345ms;
-webkit-animation-delay: 345ms;
-moz-animation-delay: 345ms;
z-index: -3;
border: 1px solid rgba(255,128,0,0.7);
}
.cssload-circle:nth-child(4) {
margin: 0 273px;
width: 39px;
height: 39px;
animation-delay: 460ms;
-o-animation-delay: 460ms;
-ms-animation-delay: 460ms;
-webkit-animation-delay: 460ms;
-moz-animation-delay: 460ms;
z-index: -4;
border: 1px solid rgba(255,170,0,0.7);
}
.cssload-circle:nth-child(5) {
margin: 0 268px;
width: 49px;
height: 49px;
animation-delay: 575ms;
-o-animation-delay: 575ms;
-ms-animation-delay: 575ms;
-webkit-animation-delay: 575ms;
-moz-animation-delay: 575ms;
z-index: -5;
border: 1px solid rgba(255,213,0,0.7);
}
.cssload-circle:nth-child(6) {
margin: 0 263px;
width: 58px;
height: 58px;
animation-delay: 690ms;
-o-animation-delay: 690ms;
-ms-animation-delay: 690ms;
-webkit-animation-delay: 690ms;
-moz-animation-delay: 690ms;
z-index: -6;
border: 1px solid rgba(255,255,0,0.7);
}
.cssload-circle:nth-child(7) {
margin: 0 258px;
width: 68px;
height: 68px;
animation-delay: 805ms;
-o-animation-delay: 805ms;
-ms-animation-delay: 805ms;
-webkit-animation-delay: 805ms;
-moz-animation-delay: 805ms;
z-index: -7;
border: 1px solid rgba(212,255,0,0.7);
}
.cssload-circle:nth-child(8) {
margin: 0 253px;
width: 78px;
height: 78px;
animation-delay: 920ms;
-o-animation-delay: 920ms;
-ms-animation-delay: 920ms;
-webkit-animation-delay: 920ms;
-moz-animation-delay: 920ms;
z-index: -8;
border: 1px solid rgba(170,255,0,0.7);
}
.cssload-circle:nth-child(9) {
margin: 0 249px;
width: 88px;
height: 88px;
animation-delay: 1035ms;
-o-animation-delay: 1035ms;
-ms-animation-delay: 1035ms;
-webkit-animation-delay: 1035ms;
-moz-animation-delay: 1035ms;
z-index: -9;
border: 1px solid rgba(128,255,0,0.7);
}
.cssload-circle:nth-child(10) {
margin: 0 244px;
width: 97px;
height: 97px;
animation-delay: 1150ms;
-o-animation-delay: 1150ms;
-ms-animation-delay: 1150ms;
-webkit-animation-delay: 1150ms;
-moz-animation-delay: 1150ms;
z-index: -10;
border: 1px solid rgba(85,255,0,0.7);
}
.cssload-circle:nth-child(11) {
margin: 0 239px;
width: 107px;
height: 107px;
animation-delay: 1265ms;
-o-animation-delay: 1265ms;
-ms-animation-delay: 1265ms;
-webkit-animation-delay: 1265ms;
-moz-animation-delay: 1265ms;
z-index: -11;
border: 1px solid rgba(43,255,0,0.7);
}
.cssload-circle:nth-child(12) {
margin: 0 234px;
width: 117px;
height: 117px;
animation-delay: 1380ms;
-o-animation-delay: 1380ms;
-ms-animation-delay: 1380ms;
-webkit-animation-delay: 1380ms;
-moz-animation-delay: 1380ms;
z-index: -12;
border: 1px solid rgba(0,255,0,0.7);
}
.cssload-circle:nth-child(13) {
margin: 0 229px;
width: 127px;
height: 127px;
animation-delay: 1495ms;
-o-animation-delay: 1495ms;
-ms-animation-delay: 1495ms;
-webkit-animation-delay: 1495ms;
-moz-animation-delay: 1495ms;
z-index: -13;
border: 1px solid rgba(0,255,43,0.7);
}
.cssload-circle:nth-child(14) {
margin: 0 224px;
width: 136px;
height: 136px;
animation-delay: 1610ms;
-o-animation-delay: 1610ms;
-ms-animation-delay: 1610ms;
-webkit-animation-delay: 1610ms;
-moz-animation-delay: 1610ms;
z-index: -14;
border: 1px solid rgba(0,255,85,0.7);
}
.cssload-circle:nth-child(15) {
margin: 0 219px;
width: 146px;
height: 146px;
animation-delay: 1725ms;
-o-animation-delay: 1725ms;
-ms-animation-delay: 1725ms;
-webkit-animation-delay: 1725ms;
-moz-animation-delay: 1725ms;
z-index: -15;
border: 1px solid rgba(0,255,128,0.7);
}
.cssload-circle:nth-child(16) {
margin: 0 214px;
width: 156px;
height: 156px;
animation-delay: 1840ms;
-o-animation-delay: 1840ms;
-ms-animation-delay: 1840ms;
-webkit-animation-delay: 1840ms;
-moz-animation-delay: 1840ms;
z-index: -16;
border: 1px solid rgba(0,255,170,0.7);
}
.cssload-circle:nth-child(17) {
margin: 0 210px;
width: 166px;
height: 166px;
animation-delay: 1955ms;
-o-animation-delay: 1955ms;
-ms-animation-delay: 1955ms;
-webkit-animation-delay: 1955ms;
-moz-animation-delay: 1955ms;
z-index: -17;
border: 1px solid rgba(0, 255, 213, 0.7);
}
.cssload-circle:nth-child(18) {
margin: 0 205px;
width: 175px;
height: 175px;
animation-delay: 2070ms;
-o-animation-delay: 2070ms;
-ms-animation-delay: 2070ms;
-webkit-animation-delay: 2070ms;
-moz-animation-delay: 2070ms;
z-index: -18;
border: 1px solid rgba(0, 255, 255, 0.7);
}
.cssload-circle:nth-child(19) {
margin: 0 200px;
width: 185px;
height: 185px;
animation-delay: 2185ms;
-o-animation-delay: 2185ms;
-ms-animation-delay: 2185ms;
-webkit-animation-delay: 2185ms;
-moz-animation-delay: 2185ms;
z-index: -19;
border: 1px solid rgba(0, 212, 255, 0.7);
}
.cssload-circle:nth-child(20) {
margin: 0 195px;
width: 195px;
height: 195px;
animation-delay: 2300ms;
-o-animation-delay: 2300ms;
-ms-animation-delay: 2300ms;
-webkit-animation-delay: 2300ms;
-moz-animation-delay: 2300ms;
z-index: -20;
border: 1px solid rgba(0, 170, 255, 0.7);
}
.cssload-circle:nth-child(21) {
margin: 0 190px;
width: 205px;
height: 205px;
animation-delay: 2415ms;
-o-animation-delay: 2415ms;
-ms-animation-delay: 2415ms;
-webkit-animation-delay: 2415ms;
-moz-animation-delay: 2415ms;
z-index: -21;
border: 1px solid rgba(0, 127, 255, 0.7);
}
.cssload-circle:nth-child(22) {
margin: 0 185px;
width: 214px;
height: 214px;
animation-delay: 2530ms;
-o-animation-delay: 2530ms;
-ms-animation-delay: 2530ms;
-webkit-animation-delay: 2530ms;
-moz-animation-delay: 2530ms;
z-index: -22;
border: 1px solid rgba(0, 85, 255, 0.7);
}
.cssload-circle:nth-child(23) {
margin: 0 180px;
width: 224px;
height: 224px;
animation-delay: 2645ms;
-o-animation-delay: 2645ms;
-ms-animation-delay: 2645ms;
-webkit-animation-delay: 2645ms;
-moz-animation-delay: 2645ms;
z-index: -23;
border: 1px solid rgba(0, 43, 255, 0.7);
}
.cssload-circle:nth-child(24) {
margin: 0 175px;
width: 234px;
height: 234px;
animation-delay: 2760ms;
-o-animation-delay: 2760ms;
-ms-animation-delay: 2760ms;
-webkit-animation-delay: 2760ms;
-moz-animation-delay: 2760ms;
z-index: -24;
border: 1px solid rgba(0, 0, 255, 0.7);
}
.cssload-circle:nth-child(25) {
margin: 0 171px;
width: 244px;
height: 244px;
animation-delay: 2875ms;
-o-animation-delay: 2875ms;
-ms-animation-delay: 2875ms;
-webkit-animation-delay: 2875ms;
-moz-animation-delay: 2875ms;
z-index: -25;
border: 1px solid rgba(42, 0, 255, 0.7);
}
.cssload-circle:nth-child(26) {
margin: 0 166px;
width: 253px;
height: 253px;
animation-delay: 2990ms;
-o-animation-delay: 2990ms;
-ms-animation-delay: 2990ms;
-webkit-animation-delay: 2990ms;
-moz-animation-delay: 2990ms;
z-index: -26;
border: 1px solid rgba(85, 0, 255, 0.7);
}
.cssload-circle:nth-child(27) {
margin: 0 161px;
width: 263px;
height: 263px;
animation-delay: 3105ms;
-o-animation-delay: 3105ms;
-ms-animation-delay: 3105ms;
-webkit-animation-delay: 3105ms;
-moz-animation-delay: 3105ms;
z-index: -27;
border: 1px solid rgba(127, 0, 255, 0.7);
}
.cssload-circle:nth-child(28) {
margin: 0 156px;
width: 273px;
height: 273px;
animation-delay: 3220ms;
-o-animation-delay: 3220ms;
-ms-animation-delay: 3220ms;
-webkit-animation-delay: 3220ms;
-moz-animation-delay: 3220ms;
z-index: -28;
border: 1px solid rgba(170, 0, 255, 0.7);
}
.cssload-circle:nth-child(29) {
margin: 0 151px;
width: 283px;
height: 283px;
animation-delay: 3335ms;
-o-animation-delay: 3335ms;
-ms-animation-delay: 3335ms;
-webkit-animation-delay: 3335ms;
-moz-animation-delay: 3335ms;
z-index: -29;
border: 1px solid rgba(212, 0, 255, 0.7);
}
.cssload-circle:nth-child(30) {
margin: 0 146px;
width: 292px;
height: 292px;
animation-delay: 3450ms;
-o-animation-delay: 3450ms;
-ms-animation-delay: 3450ms;
-webkit-animation-delay: 3450ms;
-moz-animation-delay: 3450ms;
z-index: -30;
border: 1px solid rgba(255, 0, 255, 0.7);
}

@keyframes bounce {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(97px);
}
}

@-o-keyframes bounce {
0% {
-o-transform: translateY(0px);
}
100% {
-o-transform: translateY(97px);
}
}

@-ms-keyframes bounce {
0% {
-ms-transform: translateY(0px);
}
100% {
-ms-transform: translateY(97px);
}
}

@-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(97px);
}
}

@-moz-keyframes bounce {
0% {
-moz-transform: translateY(0px);
}
100% {
-moz-transform: translateY(97px);
}
}
</style>

html代码：　

<div class="cssload-wrap">
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
</div>

　　　　

注：兼容IE10以上的浏览器

原文地址：https://www.cnblogs.com/abcurry/p/8371863.html

时间： 2024-08-30 16:59:05

css3动画loading样式的相关文章

prefix css3漏斗Loading加载动画

<!DOCTYPE html><html><head><meta charset="gb2312"><title>css3漏斗Loading加载动画</title><style>* { margin: 0px; padding: 0px; border: 0px;}html, body { min-height: 100%;}body { background: radial-gradient(#eee

CSS3动画实现loading加载图标

CSS3动画实现loading加载图标,并利用JavaScript封装成插件,方便以后调用. index.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scal

纯CSS3动画按钮效果 5种漂亮样式DEMO演示

Come in ! click to begin You'll get a lot ! My box with glow HomeSee Us AboutMeet Us ContactEmail Us Home About Services Portfolio Contact us Login ? Register ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

酷炫的css3图标loading动画效果代码

css3 svg图标制作环形loading加载动画特效 绿色的css3动画加载图标代码 css3加载动画制作loading加载Android动画效果 jQuery css3预加载动画制作css3动画图标页面加载效果 css3加载动画特效制作css3 win8加载动画特效 css3加载动画效果制作loading动画效果代码 8种超炫css3加载动画代码_css3 loading动画效果代码 5个CSS3加载动画_css3网页加载动画图标下载 css3 Loading加载动画制作动态Loading阶

原生JS+ CSS3创建loading加载动画；

效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div"); Div.setAttribute("class","ui-loading"); var chidDiv = document.createElement("div"); chidDiv.setAttribute("class"

超酷震撼 HTML5/CSS3动画应用及源码

HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼的动画应用以及它们的源代码,真的非常不错. 1.纯CSS3创意Loading加载动画 今天要来分享一款非常具有创意的CSS3 Loading动画效果,整个Loading动画就像一部开足马力的发动机,在不停地循环工作,看上去Loading动画样式十分新颖.之前我们也分享过一些创意型的Loading动画,比如:HTML5 Canvas发光Loading动画 在

CSS3学习（CSS3过渡、CSS3动画）

CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加过渡效果.我们仅仅使用到了一个transition属性,专门来写过渡从一个样式到另一个样式过渡时所花费的时间,以秒为单位.若时长不规定,默认为0,即没有过渡时间.在使用这个过渡效果的时候,我们使用了类似于超链接的l(link).v(visited).h(hover).a(active)样式的控制.此

css3动画--边框线条动画

网上看到一个css3动画,地址 最开始思路是,里面一个DIV方块,右上角一个同样大小的div1,向上,向右平移8px,设div1的border-top,border-right值形成,如图所示 再用clip截取一半,形成半折角. 同理左下角建一个div,向左.向下平移8px,设border-left,border-bottom值,用clip截取形成 <div class="cont"> <div class="bb"></div>

css3动画详解

一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号"{-}",括号中就是一些不同时间段样式规则. @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; }} 示例:创建一个动画名叫"changecolor",在"0%&quo