76 lines
1.4 KiB
CSS
76 lines
1.4 KiB
CSS
*{
|
||
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%;
|
||
background-color: white;
|
||
/* 设置对比度 */
|
||
filter: contrast(10);
|
||
}
|
||
.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;
|
||
}
|
||
} |