代码直接拿走
<!DOCTYPE html>
<html>
<head>
<title>钉钉刷新动画css实现</title>
<style type="text/css">
.refresh {
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.refresh .blueball {
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
}
.refresh .blueball_1 {
background-color: #0080ff;
transform: translate(-10px, -10px);
animation: forward_1 4s infinite;
}
.refresh .blueball_2 {
background-color: #009a61;
transform: translate(10px, -10px);
animation: forward_2 4s infinite;
}
.refresh .blueball_3 {
background-color: #cc0000;
transform: translate(10px, 10px);
animation: forward_3 4s infinite;
}
.refresh .blueball_4 {
background-color: #ffa500;
transform: translate(-10px, 10px);
animation: forward_4 4s infinite;
}
@keyframes forward_1 {
0% {
transform: translate(-10px, -10px);
background-color: #0080ff;
}
25% {
transform: translate(10px, -10px);
background-color: #009a61;
}
50% {
transform: translate(10px, 10px);
background-color: #cc0000;
}
75% {
transform: translate(-10px, 10px);
background-color: #ffa500;
}
100% {
transform: translate(-10px, -10px);
background-color: #0080ff;
}
}
@keyframes forward_2 {
0% {
transform: translate(10px, -10px);
background-color: #009a61;
}
25% {
transform: translate(10px, 10px);
background-color: #cc0000;
}
50% {
transform: translate(-10px, 10px);
background-color: #ffa500;
}
75% {
transform: translate(-10px, -10px);
background-color: #0080ff;
}
100% {
transform: translate(10px, -10px);
background-color: #009a61;
}
}
@keyframes forward_3 {
0% {
transform: translate(10px, 10px);
background-color: #cc0000;
}
25% {
transform: translate(-10px, 10px);
background-color: #ffa500;
}
50% {
transform: translate(-10px, -10px);
background-color: #0080ff;
}
75% {
transform: translate(10px, -10px);
background-color: #009a61;
}
100% {
transform: translate(10px, 10px);
background-color: #cc0000;
}
}
@keyframes forward_4 {
0% {
transform: translate(-10px, 10px);
background-color: #ffa500;
}
25% {
transform: translate(-10px, -10px);
background-color: #0080ff;
}
50% {
transform: translate(10px, -10px);
background-color: #009a61;
}
75% {
transform: translate(10px, 10px);
background-color: #cc0000;
}
100% {
transform: translate(-10px, 10px);
background-color: #ffa500;
}
}
/*---------flex----------*/
.flex {
display: flex;
align-items: center;
}
.flex_c {
flex-direction: column;
}
.flex_w {
flex-wrap: wrap;
}
.flex_r_a {
justify-content: space-around;
}
.flex_r_b {
justify-content: space-between;
}
.flex_r_c {
justify-content: center;
}
.flex_r_e {
justify-content: flex-end;
}
</style>
</head>
<body>
<div class="refresh flex flex_r_c">
<div class="blueball blueball_1"></div>
<div class="blueball blueball_2"></div>
<div class="blueball blueball_3"></div>
<div class="blueball blueball_4"></div>
</div>
</body>
</html>
网友评论