css3实现加载动画

发表于 | 分类于

code

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
<style type="text/css">     
*{       
    padding:0;       
    margin:0;     
}     
.container{       
    width:60px;       
    height:60px;       
    position:absolute;       
    top:33%;       
    left:50%;     
}     
.container div{      
    width:15px;       
    height:15px;       
    background-color:rgb(25, 240, 33);       
    border-radius:20px;       
    position:absolute;       
    animation:bounce 0.8s infinite;       
    /*****bounce是名字,animation: name duration timing-function delay iteration-count direction;******/     
}     
.circle1{          
    left: 0;          
    top: 0;      
}      
.circle2{          
    right: 0;          
    top: 0;      
}      
.circle3{          
    right: 0;          
    bottom: 0;      
}      
.circle4{          
    left: 0;          
    bottom: 0;      
}      
.container2{          
    transform: rotate(45deg);      
}      
.container1 .circle1{     
/***animation-delay为负值时表示，动画跳过多少秒进入动画周期。***/     
    animation-delay: -0.8s;            
}      
.container2 .circle1{          
    animation-delay: -0.7s;     
}      
.container1 .circle2{        
    animation-delay: -0.6s;        
}      
.container2 .circle2{          
    animation-delay: -0.5s;      
}     
.container1 .circle3{          
    animation-delay: -0.4s;      
}      
.container2 .circle3{          
    animation-delay: -0.3s;      
}      
.container1 .circle4{          
    animation-delay: -0.2s;      
}      
.container2 .circle4{          
    animation-delay: -0.1s;      
}      
@keyframes bounce{          
    0%,100%{transform: scale(0.0);}          
    50%{transform: scale(1.0);}     
}  
</style>
<body>   
    <div class="container container1">     
        <div class="circle1"></div>     
        <div class="circle2"></div>     
        <div class="circle3"></div>     
        <div class="circle4"></div>   
    </div>   
    <div class="container container2">     
        <div class="circle1"></div>     
        <div class="circle2"></div>     
        <div class="circle3"></div>     
        <div class="circle4"></div>  
    </div>
</body>

show
show

坚持原创技术分享，您的支持将鼓励我继续创作！