前端花式转圈圈一些css小样式
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes k-loadingA{
50% {
height:40px;
/* background: tomato; */
}
100%{
height: 15px;
/* background: skyblue; */
}
}
@keyframes k-loadingB{
50% {
width:40px;
/* background: tomato; */
}
100%{
width: 15px;
/* background: skyblue; */
}
}
@keyframes k-loadingC{
50% {
transform: translateY(-10px);
}
100%{
transform: translateY(0px);
}
}
@keyframes k-loadingD{
0% {
transform: translateY(0px);
opacity: 1;
}
30%{
transform: translateY(0px);
opacity: .3;
}
50%{
transform: translateY(-10px);
opacity: .8;
}
70%{
transform: translateY(3px);
opacity: .8;
}
85%{
transform: translateY(-3px);
}
100%{
transform: translateY(0px);
opacity: 1;
}
}
@keyframes k-loadingE{
0%{
transform: translateX(-200px);
opacity: 0;
}
50%{
transform: translateX(0px);
opacity: .8;
}
100%{
transform: translateX(200px);
opacity: 0;
}
}
@keyframes k-loadingF{
0%{
transform: rotate(120deg);
}
50%{
transform: rotate(240deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes k-loadingG{
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes k-loadingI{
100%{
transform: rotate(360deg);
}
}
@-webkit-keyframes circle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading_a{
width: 100px;
height: 100px;
background: pink;
/* display: flex;
justify-content: space-around;
align-items: center; */
text-align: center;
}
.loading_f,.loading_g,.loading_h,.loading_i{
width: 150px;
height: 150px;
text-align: center;
background: pink;
padding-top: 20px;
margin-top: 20px;
}
.loading_b,.loading_c,.loading_d,.loading_e{
width: 400px;
height: 100px;
background: hotpink;
text-align: center;
margin-top: 30px;
overflow: hidden;
}
.loader {
width: 400px;
height: 100px;
text-align: center;
background: #F44336;
margin-top: 30px;
padding-top: 20px;
overflow: hidden;
}
.k_line{
display: inline-block;
width: 15px;
height: 15px;
border-radius: 15px;
background: skyblue;
margin-top: 30px;
}
.k_lineA_1{
animation: k-loadingA 1.2s 0s infinite;
}
.k_lineA_2{
animation: k-loadingA 1.2s 0.3s infinite;
}
.k_lineA_3{
animation: k-loadingA 1.2s 0.6s infinite;
}
.k_lineA_4{
animation: k-loadingA 1.2s 0.9s infinite;
}
.k_lineB_1{
animation: k-loadingB 1.5s 0s infinite;
}
.k_lineB_2{
animation: k-loadingB 1.5s 0.3s infinite;
}
.k_lineB_3{
animation: k-loadingB 1.5s 0.6s infinite;
}
.k_lineB_4{
animation: k-loadingB 1.5s 0.9s infinite;
}
.k_lineB_5{
animation: k-loadingB 1.5s 1.2s infinite;
}
.k_lineC_1{
animation: k-loadingC 0.5s 0.1s infinite;
}
.k_lineC_2{
animation: k-loadingC 0.5s 0.1s infinite;
}
.k_lineC_3{
animation: k-loadingC 0.5s 0.2s infinite;
}
.k_lineC_4{
animation: k-loadingC 0.5s 0.3s infinite;
}
.k_lineC_5{
animation: k-loadingC 0.5s 0.4s infinite;
}
.k_lineD_1{
animation: k-loadingD 1s 0.5s infinite;
}
.k_lineD_2{
animation: k-loadingD 1s 0.6s infinite;
}
.k_lineD_3{
animation: k-loadingD 1s 0.7s infinite;
}
.k_lineD_4{
animation: k-loadingD 1s 0.8s infinite;
}
.k_lineD_5{
animation: k-loadingD 1s 0.9s infinite;
}
.k_lineE_1{
opacity: 0;
animation: k-loadingE 2s 1.35s infinite;
}
.k_lineE_2{
opacity: 0;
animation: k-loadingE 2s 1.3s infinite;
}
.k_lineE_3{
opacity: 0;
animation: k-loadingE 2s 1.25s infinite;
}
.k_lineE_4{
opacity: 0;
animation: k-loadingE 2s 1.2s infinite;
}
.k_lineE_5{
opacity: 0;
animation: k-loadingE 2s 1.15s infinite;
}
.k_ring_1{
width: 15px;
height: 15px;
margin: 0 auto;
padding: 15px;
border: 6px dashed #000000;
border-radius: 50%;
animation:k-loadingF 1s 0s linear infinite;
}
.k_ring_2{
width: 50px;
height: 50px;
position: relative;
border:4px solid purple;
border-radius: 50%;
animation:k-loadingG 1s 0s linear infinite;
}
.ring2_content1{
position:absolute;
top:-4px;
left: -1px;
width: 16px;
height:16px;
border-radius: 100%;
background: #F44336;
}
.ring2_content2{
position:absolute;
top:-4px;
right: -1px;
width: 16px;
height:16px;
border-radius: 100%;
background: green;
}
.ring2_content3{
position:absolute;
bottom:-4px;
left: -1px;
width: 16px;
height:16px;
border-radius: 100%;
background: yellowgreen;
}
.ring2_content4{
position:absolute;
bottom:-4px;
right: -1px;
width: 16px;
height:16px;
border-radius: 100%;
background: red;
}
.k_ring_i{
display: inline-block;
margin-bottom: 1.5rem;
height: 4rem;
width: 4rem;
border: 0.4rem solid transparent;
border-top-color: blue;
border-left-color: blue;
border-bottom-color: blue;
animation: circle 1.5s infinite linear;
-webkit-animation: circle 1.5s infinite linear; /* Safari 和 Chrome */
border-radius: 50%;
}
.dot {
width: 24px;
height: 24px;
background: rgb(5, 189, 245);
border-radius: 100%;
display: inline-block;
animation: slide 1s infinite;
}
.dot:nth-child(1) {
animation-delay: 0.1s;
background: #5ff09b;
}
.dot:nth-child(2) {
animation-delay: 0.2s;
background: #10f4fc;
}
.dot:nth-child(3) {
animation-delay: 0.3s;
background: pink;
}
.dot:nth-child(4) {
animation-delay: 0.4s;
background: #b5f505;
}
.dot:nth-child(5) {
animation-delay: 0.5s;
background: #8f85ee;
}
@keyframes slide {
0% {
transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(2.5);
}
100% {
transform: scale(1);
}
}
.loader1{
width: 150px;
height: 150px;
text-align: center;
background: goldenrod;
margin-top: 30px;
padding-top: 50px;
overflow: hidden;
}
@keyframes circlechange2 {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes circlechange1 {
0% {
transform: scale(1.2);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
.bigCircle{
width: 50px;
height: 50px;
background: rgba(255,255,255,0.5);
padding: 20px;
border-radius: 50%;
margin: 0 auto;
animation: circlechange1 1s infinite;
}
.smallCircle{
width: 30px;
height: 30px;
background: #fff;
opacity: .7;
z-index: 2;
border-radius: 50%;
margin: 0 auto;
margin-top: 10px;
animation: circlechange2 1s infinite;
}
@keyframes circleleft {
0% {
transform: rotate(360deg);
}
100% {
transform: scale(0deg);
}
}
.loader2{
width: 150px;
height: 150px;
text-align: center;
background: goldenrod;
margin-top: 30px;
padding-top: 50px;
overflow: hidden;
}
.loader2_fu{
position: relative;
width: 100px;
height:100px;
border-radius: 50%;
border:6px solid rgba(255,255,255,0.5);
border-left-color:rgba(255,255,255,1);
margin: 0 auto;
animation: circleleft 1s linear infinite;
}
@keyframes sijiao1 {
0%{
transform: translate3d(0,0,0);
}
50%{
transform: translate3d(-200%,-200%,0);
}
100%{
transform: translate3d(0,0,0);
}
}
@keyframes sijiao2 {
0%{
transform: translate3d(0,0,0);
}
50%{
transform: translate3d(200%,-200%,0);
}
100%{
transform: translate3d(0,0,0);
}
}
@keyframes sijiao3 {
0%{
transform: translate3d(0,0,0);
}
50%{
transform: translate3d(-200%,200%,0);
}
100%{
transform: translate3d(0,0,0);
}
}
@keyframes sijiao4 {
0%{
transform: translate3d(0,0,0);
}
50%{
transform: translate3d(200%,200%,0);
}
100%{
transform: translate3d(0,0,0);
}
}
.loader3{
width: 200px;
height: 115px;
text-align: center;
background: rgb(32, 181, 218);
margin-top: 30px;
padding-top: 85px;
}
.loader3_fu{
margin: 0 auto;
width: 60px;
height: 60px;
text-align: center;
position: relative;
}
.sijiao{
position: absolute;
width: 30px;
height:30px;
border-radius: 50%;
}
.jiao1{
background: rgb(251, 255, 0);
top: -25%;
left: -25%;
animation: sijiao4 1.5s infinite;
}
.jiao2{
background: rgb(255, 102, 0);
bottom: -25%;
left: -25%;
animation: sijiao2 1.5s infinite;
}
.jiao3{
background: rgb(0, 255, 0);
right:-25%;
top: -25%;
animation: sijiao3 1.5s infinite;
}
.jiao4{
background: rgb(212, 0, 255);
bottom: -25%;
right: -25%;
animation: sijiao1 1.5s infinite;
}
</style>
</head>
<body>
<div class="loading_a">
A
<div class="k_line k_lineA_1"></div>
<div class="k_line k_lineA_2"></div>
<div class="k_line k_lineA_3"></div>
<div class="k_line k_lineA_4"></div>
</div>
<div class="loading_b">
B
<div class="k_line k_lineB_1"></div>
<div class="k_line k_lineB_2"></div>
<div class="k_line k_lineB_3"></div>
<div class="k_line k_lineB_4"></div>
<div class="k_line k_lineB_5"></div>
</div>
<div class="loading_c">
C
<div class="k_line k_lineC_1"></div>
<div class="k_line k_lineC_2"></div>
<div class="k_line k_lineC_3"></div>
<div class="k_line k_lineC_4"></div>
<div class="k_line k_lineC_5"></div>
</div>
<div class="loading_d">
D
<div class="k_line k_lineD_1"></div>
<div class="k_line k_lineD_2"></div>
<div class="k_line k_lineD_3"></div>
<div class="k_line k_lineD_4"></div>
<div class="k_line k_lineD_5"></div>
</div>
<div class="loader3">
<div class="loader3_fu">
<div class="sijiao jiao1"></div>
<div class="sijiao jiao2"></div>
<div class="sijiao jiao3"></div>
<div class="sijiao jiao4"></div>
</div>
</div>
<div class="loading_e">
E
<div class="k_line k_lineE_1"></div>
<div class="k_line k_lineE_2"></div>
<div class="k_line k_lineE_3"></div>
<div class="k_line k_lineE_4"></div>
<div class="k_line k_lineE_5"></div>
</div>
<div class="loading_f">
F
<div class="k_ring_1"></div>
</div>
<div class="loading_g">
G
<div class="k_ring_2">
<div class="ring2_content1">
</div>
</div>
</div>
<div class="loading_h">
H
<div class="k_ring_2">
<div class="ring2_content1">
</div>
<div class="ring2_content2">
</div>
<div class="ring2_content3">
</div>
<div class="ring2_content4">
</div>
</div>
</div>
<div class="loader2">
<div class="loader2_fu">
</div>
</div>
<div class="loading_i">
I
<div class="k_ring_i"></div>
</div>
<div class="loader">
dot
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="loader1">
<div class="bigCircle">
<div class="smallCircle">
</div>
</div>
</div>
</body>
</html>
标签：transform,转圈圈,width,animation,css,background,infinite,height,花式 来源： https://www.cnblogs.com/dajingdehuayuan/p/14954450.html