随笔 - 89  文章 - 0  评论 - 2  阅读 - 11万 

css样式弹跳的loading

HTML:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css跳动的loading💗</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="loading">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

　　CSS:

?
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
/*
* 1、 #232e6d
* 2、 #006cb4
* 3、 #61dafb
* 4、 #30d268
* 5、 #4fc08d
*/
 
* {
    padding: 0;
    margin: 0;
}
 
html, body {
    height: 100%;
    width: 100%;
}
 
.loading {
    position: fixed;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .9);
    z-index: 10;
}
 
ul {
    height: 200px;
    list-style: none;
}
 
li {
    float: left;
    width: 7px;
    height: 10px;
    margin: 3px;
    border-radius: 20px;
}
 
li:nth-child(1) {
    background-color: #232e6d;
    animation: dance 1s infinite;
     
}
 
li:nth-child(2) {
    background-color: #006cb4;
    animation: dance 1s infinite;
    animation-delay: .2s;
}
 
li:nth-child(3) {
    background-color: #61dafb;
    animation: dance 1s infinite;
    animation-delay: .4s;
}
 
li:nth-child(4) {
    background-color: #30d268;
    animation: dance 1s infinite;
    animation-delay: .6s;
}
 
li:nth-child(5) {
    background-color: #4fc08d;
    animation: dance 1s infinite;
    animation-delay: .8s;
}
 
@keyframes dance {
    50% {
        height: 30px;
        transform: translateY(-15px);
    }
    100% {
        height: 10px;
        transform: translateY(0px);
    }
}

　　

posted on   我的梦想是开个小店  阅读(75)  评论(0)  编辑  收藏  举报
相关博文：
· div 滚动条自动滚动
· table 实现自动滚动
· css跳动样式
· 博客园美化：给网页加上loading动画
· css样式向下滑动
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示