devbox
编程先知
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

10种动态进度条用css3实现_css3 进度条动画

作者：编程先知 | 2024-02-05 10:04:37

赞

踩

css3 进度条动画

用css做的10种动态进度条，喜欢可以直接去用话不多说先看效果图：

在这里插入图片描述

实现上图的，最主要的就是应用了css动画属性@keyframes和animation属性结合应用

下面看看语法：

@keyframes

@keyframes animationname {keyframes-selector {css-styles;}}

  • 1
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;}
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

  • 1

在这里插入图片描述

下面看看实现的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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87

还有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;
    }
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • 371
  • 372
  • 373
  • 374
  • 375
  • 376
  • 377
  • 378
  • 379
  • 380
  • 381
  • 382
  • 383
  • 384
  • 385
  • 386
  • 387
  • 388
  • 389
  • 390
  • 391
  • 392
  • 393
  • 394
  • 395
  • 396
  • 397
  • 398
  • 399
  • 400
  • 401
  • 402
  • 403
  • 404
  • 405
  • 406
  • 407
  • 408
  • 409
  • 410
  • 411
  • 412
  • 413
  • 414
  • 415
  • 416
  • 417
  • 418
  • 419
  • 420
  • 421
  • 422
  • 423
  • 424
  • 425
  • 426
  • 427
  • 428
  • 429
  • 430
  • 431
  • 432
  • 433
  • 434
  • 435
  • 436
  • 437
  • 438
  • 439
  • 440
  • 441
  • 442
  • 443
  • 444
  • 445
  • 446
  • 447
  • 448
  • 449
  • 450
  • 451
  • 452
  • 453
  • 454
  • 455
  • 456
  • 457
  • 458
  • 459
  • 460
  • 461
  • 462
  • 463
  • 464
  • 465
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/编程先知/article/detail/60356
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号