HTML5+CSS3實現(xiàn)黏性小球的loading動畫，主要通過 contrast 和 blur 兩個濾鏡搭配使用，進而實現(xiàn)小球來回穿梭的動畫，動畫過程伴隨著融球效果，如此精致細膩的動畫，用來做個loading，實在有點大材小用。
效果：
源碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>粘性球球</title>
<link rel="stylesheet" href="../css/12.css">
</head>
<body>
<div class="effect">
<div class="bigball"></div>
<div class="smallball"></div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to top,#537895,#09203f);
}
.effect{
position: relative;
width: 320px;
height: 320px;
border-radius: 50%;
/* 對比度 */
filter: contrast(10);
background-color: white;
}
.bigball,.smallball{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 10px;
border-radius: 50%;
/* 設置模糊度，配合上面的contrast來顯示圓球的粘性效果 */
filter: blur(5px);
}
.bigball{
width: 100px;
height: 100px;
background-color: black;
}
.smallball{
width: 60px;
height: 60px;
background-color: red;
/* 動畫：名稱 時長 infinite是無限次播放 */
animation: ball 3s infinite;
}
/* 接下來定義小球的動畫 */
@keyframes ball{
0%,100%{
left: 50px;
width: 60px;
height: 60px;
}
4%,54%{
width: 60px;
height: 60px;
}
10%,60%{
width: 50px;
height: 70px;
}
20%,70%{
width: 60px;
height: 60px;
}
34%,90%{
width: 70px;
height: 50px;
}
41%{
width: 60px;
height: 60px;
}
50%{
left: 270px;
width: 60px;
height: 60px;
}
}
