css彩色圆点融合loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css彩色圆点融合loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background: #ffffff;
}
.dots {
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
filter: url(#goo);
}
.dot {
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
}
.dot:before {
content: "";
width: 35px;
height: 35px;
border-radius: 50px;
background: #FBD301;
position: absolute;
left: 50%;
transform: translateY(0) rotate(0deg);
margin-left: -17.5px;
margin-top: -17.5px;
}
@-webkit-keyframes dot-move {
0% {
transform: translateY(0);
}
18%, 22% {
transform: translateY(-70px);
}
40%, 100% {
transform: translateY(0);
}
}
@keyframes dot-move {
0% {
transform: translateY(0);
}
18%, 22% {
transform: translateY(-70px);
}
40%, 100% {
transform: translateY(0);
}
}
@-webkit-keyframes dot-colors {
0% {
background-color: #FBD301;
}
25% {
background-color: #FF3270;
}
50% {
background-color: #208BF1;
}
75% {
background-color: #AFE102;
}
100% {
background-color: #FBD301;
}
}
@keyframes dot-colors {
0% {
background-color: #FBD301;
}
25% {
background-color: #FF3270;
}
50% {
background-color: #208BF1;
}
75% {
background-color: #AFE102;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0