当前位置：首页 > 网页特效 > 进度条

CSS3 animation超酷网页Loading加载进度条动画效果

分类：进度条日期：2024-05-14 点击(7) 评论(0)

简介

效果一
```css
ul#progress{
	list-style:none;
	width:125px;
	margin:0 auto;
	padding-top:50px;
	padding-bottom:50px;
}
ul#progress li{
	float:left;
	position:relative;
	width:15px;
	height:15px;
	border:1px solid #fff;
	border-radius:50px;
	margin-left:10px;
	border-left:1px solid #111;border-top:1px solid #111;border-right:1px solid #333;border-bottom:1px solid #333;
	background:#000;
}
ul#progress li:first-child{margin-left:0;}
.running .ball{
	background-color:#2187e7;
	background-image:-moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
	background-image:-webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);

width:15px;
	height:15px;
	border-radius:50px;
	-moz-transform:scale(0);
	-webkit-transform:scale(0);
	
	-moz-animation:loading 1s linear forwards;
	-webkit-animation:loading 1s linear forwards;
}
.running .pulse{
	width:15px;
	height:15px;
	border-radius:30px;
	border:1px solid #00c6ff;
	box-shadow:0 0 5px #00c6ff;
	position:absolute;
	top:-1px;
	left:-1px;
	-moz-transform:scale(0);
	-webkit-transform:scale(0);
	
	-webkit-animation:pulse 1s ease-out;
	-moz-animation:pulse 1s ease-out;
}
#layer1{-moz-animation-delay:0.5s;-webkit-animation-delay:0.5s;}
#layer2{-moz-animation-delay:1s;-webkit-animation-delay:1s;}
#layer3{-moz-animation-delay:1.5s;-webkit-animation-delay:1.5s;}
#layer4{-moz-animation-delay:2s;-webkit-animation-delay:2s;}
#layer5{-moz-animation-delay:2.5s;-webkit-animation-delay:2.5s;}
#layer7{-moz-animation-delay:1.5s;-webkit-animation-delay:1.5s;}
#layer8{-moz-animation-delay:2s;-webkit-animation-delay:2s;}
#layer9{-moz-animation-delay:2.5s;-webkit-animation-delay:2.5s;}
#layer10{-moz-animation-delay:3s;-webkit-animation-delay:3s;}
#layer11{-moz-animation-delay:3.5s;-webkit-animation-delay:3.5s;}

@-moz-keyframes loading{
	0%{-moz-transform:scale(0,0);}
	100%{-moz-transform:scale(1,1);}	
}

@-webkit-keyframes loading{
	0%{-webkit-transform:scale(0,0);}
	100%{-webkit-transform:scale(1,1);}	
}

@-moz-keyframes pulse{
	0%  {-moz-transform:scale(0);opacity:0;}
    10% {-moz-transform:scale(1);opacity:0.5;}
	50% {-moz-transform:scale(1.75);opacity:0;}
    100%{-moz-transform:scale(0);opacity:0;}  
}

@-webkit-keyframes pulse{
	0%  {-webkit-transform:scale(0);opacity:0;}
	10% {-webkit-transform:scale(1);opacity:0.5;}
    50% {-webkit-transform:scale(1.75);opacity:0;}
    100%{-webkit-transform:scale(0);opacity:0;}    
}
```
效果二
```css
#content{
	width:100%;
	height:5px;
	margin:50px auto;
	background:#000;
}

.fullwidth .expand{
	width:100%;
	height:1px;
	margin:2px 0;
	background:#2187e7;
	position:absolute;
	box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7);
    -moz-animation:fullexpand 10s ease-out;
	-webkit-animation:fullexpand 10s ease-out;
}

@-moz-keyframes fullexpand{
	0%{width:0px;}
	100%{ width:100%;}	
}
@-webkit-keyframes fullexpand{
	0%{width:0px;}
	100%{ width:100%;}	
}

```
效果三
```css
ul#loadbar{
	list-style:none;
	width:140px;
	margin:0 auto;
	padding-top:50px;
	padding-bottom:75px;
}
ul#loadbar li{
	float:left;
	position:relative;
	width:11px;
	height:26px;
	margin-left:1px;
	border-left:1px solid #111;border-top:1px solid #111;border-right:1px solid #333;border-bottom:1px solid #333;
	background:#000;
}

ul#loadbar li:first-child{margin-left:0;}

.ins .bar{
	background-color:#2187e7; 
	background-image:-moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
	background-image:-webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
	width:11px;
	height:26px;
	opacity:0;
	-webkit-animation:fill .5s linear forwards;
	-moz-animation:fill .5s linear forwards;
}

#layerFill1{-moz-animation-delay:0.5s;-webkit-animation-delay:0.5s;}
#layerFill2{-moz-animation-delay:1s;-webkit-animation-delay:1s;}
#layerFill3{-moz-animation-delay:1.5s;-webkit-animation-delay:1.5s;}
#layerFill4{-moz-animation-delay:2s;-webkit-animation-delay:2s;}
#layerFill5{-moz-animation-delay:2.5s;-webkit-animation-delay:2.5s;}
#layerFill6{-moz-animation-delay:3s;-webkit-animation-delay:3s;}
#layerFill7{-moz-animation-delay:3.5s;-webkit-animation-delay:3.5s;}
#layerFill8{-moz-animation-delay:4s;-webkit-animation-delay:4s;}
#layerFill9{-moz-animation-delay:4.5s;-webkit-animation-delay:4.5s;}
#layerFill10{-moz-animation-delay:5s;-webkit-animation-delay:5s;}

@-moz-keyframes fill{
	0%{ opacity:0;}
	100%{ opacity:1;}	
}

@-webkit-keyframes fill{
	0%{ opacity:0;}
	100%{ opacity:1;}	
}
```

web299.com

CSS3 animation超酷网页Loading加载进度条动画效果

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果