用css做的10种动态进度条，喜欢可以直接去用话不多说先看效果图：
实现上图的，最主要的就是应用了css动画属性@keyframes和animation属性结合应用
下面看看语法：
@keyframes
@keyframes animationname {keyframes-selector {css-styles;}}
| animationname | 必需的。定义animation的名称。 |
|---|
| keyframes-selector | 必需的。动画持续时间的百分比。合法值：0-100%from (和0%相同)to (和100%相同)注意： 您可以用一个动画keyframes-selectors。 |
| css-styles | 必需的。一个或多个合法的CSS样式属性。 |
简单的实现示例：
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
animation
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
下面看看实现的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jiang</title>
<link rel="stylesheet" href="sty.css">
</head>
<body>
<div class="content">
<div class="one">
<div class="one1"></div>
<div class="one2"></div>
<div class="one3"></div>
<div class="one4"></div>
<div class="one5"></div>
<div class="one6"></div>
<div class="text">loading...</div>
</div>
<div class="two">
<div class="two1"></div>
<div class="two2"></div>
<div class="two3"></div>
<div class="two4"></div>
<div class="two5"></div>
<div class="two6"></div>
<div class="text">loading...</div>
</div>
<div class="there">
<div class="there1"></div>
<div class="text3">loading...</div>
<div class="there2"></div>
<div class="there3"></div>
</div>
<div class="four">
<div class="text3">loading...</div>
<div class="four1"></div>
</div>
<div class="five">
<div class="five1"></div>
<div class="five2"></div>
<div class="text4">loading...</div>
</div>
<div class="six">
<div class="six1"></div>
<div class="six2"></div>
<div class="six3"> </div>
<div class="text5">loading...</div>
</div>
<div class="seven">
<div class="text6">loading...</div>
<div class="sevendown">
<div class="seven1"></div>
<div class="seven2"></div>
<div class="seven3"></div>
<div class="seven4"></div>
<div class="seven5"></div>
<div class="seven6"></div>
</div>
</div>
<div class="eigth">
<div class="text6">loading...</div>
<div class="eigthdown">
<div class="eigth1"></div>
<div class="eigth2"></div>
<div class="eigth3"></div>
</div>
</div>
<div class="nine">
<div class="ninedown">
<div class="nine1"></div>
<div class="text7">loading...</div>
</div>
</div>
<div class="ten">
<div class="ten1"></div>
<div class="ten2"></div>
<div class="text8">loading...</div>
</div>
</div>
</body>
</html>
还有css代码：
.content{
display: flex;
flex-wrap: wrap;
}
.one,.two,.there,.four,.five,.six,.seven,.eigth,.nine,.ten{
width: 150px;
height: 150px;
border: 1px solid black;
margin:5px 10px;
background-color: #25AD81;
}
.one1,.one2,.one3,.one4,.one5,.one6{
width: 0px;
height: 10px;
margin-top: 3px;
background-color: white;
}
.two{
background-color:#32CEFF ;
}
.there{
background-color: red;
}
.four{
background-color: #FFAD73
}
.five{
background-color: #60307D;
}
.six{
background-color: #C3C3C3;
}
.seven{
background-color: #3E3484;
}
.eigth{
background-color: #C8EA70;
}
.nine{
background-color: #1B2324;
}
.ten{
background-color: #FEE673;
}
.there1,.there2,.there3{
width: 10px;
height: 10px;
border-radius: 5px;
background-color:white ;
}
.there1{
margin:3px auto ;
animation: runyuan1 1s linear alternate infinite;
}
.there2{
display: inline-block;
animation: runyuan2 1s linear alternate infinite;
}
.there3{
display: inline-block;
animation: runyuan3 1s linear alternate infinite;
}
.four1{
width: 20px;
height: 20px;
background-color: red;
animation: scla 1s linear infinite;
}
.five1{
margin:auto;
margin-top:10px ;
width: 0;
border-top: 50px solid #DFD6E6 ;
border-bottom: 50px solid #DFD6E6;
border-left: 50px solid #DFD6E6 ;
border-right: 50px solid white ;
border-radius: 50px;
animation: rotateyuan 1s linear infinite;
}
.five2{
width: 0;
position: relative;
top: -95px;
left: 30px;
border-top: 45px solid #60307D;
border-bottom: 45px solid #60307D;
border-left: 45px solid #60307D ;
border-right: 45px solid #60307D ;
border-radius: 45px;
}
.six1{
margin:auto;
margin-top:10px ;
width: 0;
border-top: 50px solid white ;
border-bottom: 50px solid white;
border-left: 50px solid white ;
border-right: 50px solid white ;
border-radius: 50px;
animation: rotateyuan 1s linear infinite;
}
.six2{
width: 0;
position: relative;
top: -98px;
left: 27px;
border-top: 48px solid #C3C3C3;
border-bottom: 48px solid #C3C3C3;
border-left: 48px solid #C3C3C3 ;
border-right: 48px solid #C3C3C3 ;
border-radius: 48px;
z-index: 0;
}
.six3{
width:15px;
height: 15px;
border-radius:7.5px;
position: relative;
top:-105px;
left: 74px;
background-color: white;
animation: rotateyuan1 1s linear infinite;
}
.seven1,.seven2,.seven3,.seven4,.seven5,.seven6{
width: 5px;
height: 10px;
display: inline-block;
margin-right: 2px;
background-color: #8F80CF;
}
.seven1{
animation: runs1 1s 0.8s linear alternate infinite;
}
.seven2{
animation: runs2 1s 0.3s linear alternate infinite;
}
.seven3{
animation: runs3 1s 0.5s linear alternate infinite;
}
.seven4{
animation: runs4 1s 1s linear alternate infinite;
}
.seven5{
animation: runs5 1s 0.6s linear alternate infinite;
}
.seven6{
animation: runs6 1s 0s linear alternate infinite;
}
.sevendown{
display: flex;
align-content: flex-start;
justify-content: center;
}
.eigthdown{
display: flex;
justify-content: space-evenly;
}
.eigth1, .eigth2, .eigth3{
width: 30px;
height: 30px;
background-color: #4F5548;
}
.eigth1{
animation: runeigth1 0.8s linear alternate infinite;
}
.eigth2{
animation: runeigth1 0.8s 0.7s linear alternate infinite;
}
.eigth3{
animation: runeigth1 0.8s 1.3s linear alternate infinite;
}
.nine1{
height: 12px;
width: 0px;
margin-top:60px ;
margin-left: 30px;
background-color: #B2CD6F;
animation: runnine1 1.5s linear infinite;
}
.ten1{
margin:auto;
margin-top:30px ;
width: 0;
border-top: 25px solid #FEE673 ;
border-bottom: 25px solid #FEE673;
border-left: 25px solid #AF9B54 ;
border-right: 25px solid #AF9B54 ;
border-radius: 25px;
animation: rotateyuan 1s linear alternate infinite;
}
.ten2{
width: 0;
position: relative;
top: -45px;
left: 55px;
border-top: 20px solid #FEE673;
border-bottom: 20px solid #FEE673;
border-left: 20px solid #FEE673 ;
border-right: 20px solid #FEE673 ;
border-radius: 20px;
}
.two1, .two2, .two3, .two4, .two5, .two6{
width: 0px;
height: 10px;
margin-top: 3px;
background-color: #007BAE;
}
.one1, .two1{
margin-top: 13px;
animation: run1 1s linear alternate infinite;
}
.one2, .two2{
animation: run2 1s 1.4s linear alternate infinite;
}
.one3, .two3{
animation: run3 1s 0.7s linear alternate infinite;
}
.one4, .two4{
animation: run4 1s 1.2s linear alternate infinite;
}
.one5, .two5{
animation: run5 1s 0.5s linear alternate infinite;
}
.one6, .two6{
animation: run6 1s 2s linear alternate infinite;
}
.text{
text-align: center;
color: white;
margin-top: 10px;
}
.text3{
position:relative;
left:20%;
color: white;
top: 40px;
}
.text4{
margin-top: -90px;
text-align: center;
color: white;
}
.text5{
position: relative;
top:-175px ;
text-align: center;
font-size: 20px;
color: white;
}
.text6{
text-align: center;
color: black;
margin-top: 30px;
}
.text7{
text-align: center;
color: #1B2324;
font-size: 5px;
margin-top: -13px;
}
.text8{
text-align: center;
color: #1B2324;
font-size: 20px;
margin-top: -13px;
}
@keyframes run1 {
0%{
width: 0;
}
100%{
width: 80px;
}
}
@keyframes run2 {
0% {
width: 0;
}
100% {
width: 98px;
}
}
@keyframes run3 {
0% {
width: 0;
}
100% {
width: 110px;
}
}
@keyframes run4 {
0% {
width: 0;
}
100% {
width: 123px;
}
}
@keyframes run5 {
0% {
width: 0;
}
100% {
width: 60px;
}
}
@keyframes run6 {
0%{
width: 0;
}
100%{
width: 120px;
}
}
@keyframes runyuan1{
0%{
transform: translate(0,0);
}
100%{
transform: translate(0,40px);
}
}
@keyframes runyuan2{
0%{
transform: translate(10px,70px);
}
100%{
transform: translate(55px,30px);
}
}
@keyframes runyuan3{
0%{
transform: translate(120px,70px);
}
100%{
transform: translate(65px,30px);
}
}
@keyframes scla{
0%{
transform: translate(10px,50px) ;
border-radius:10px;
opacity: 0;
}
50%{
opacity: 1;
}
100%{
transform: translate(110px,50px);
border-radius:10px;
opacity: 0;
}
}
@keyframes rotateyuan{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes rotateyuan1 {
0%{
transform-origin: 0px -40px;
transform: rotate(0deg);
}
100%{
transform-origin: 0px -40px;
transform: rotate(360deg);
}
}
@keyframes runs1 {
0%{
height: 0;
}
100%{
height: 80px;
}
}
@keyframes runs2 {
0% {
height: 0;
}
100% {
height: 83px;
}
}
@keyframes runs3 {
0% {
height: 0;
}
100% {
height: 79px;
}
}
@keyframes runs4 {
0% {
height: 0;
}
100% {
height: 86px;
}
}
@keyframes runs5 {
0% {
height: 0;
}
100% {
height: 75px;
}
}
@keyframes runs6 {
0%{
height: 0;
}
100%{
height: 90px;
}
}
@keyframes runeigth1 {
0%{
opacity: 1;
border-radius: 0;
}
100%{
opacity: 0;
border-radius: 15px;
}
}
@keyframes runnine1 {
0%{
width: 10px;
}
100%{
width: 100px;
}
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
