html 纯css设置转圈,使用纯CSS3实现的响应式转圈加载动画

CSS

语言：

CSSSCSS

确定

* {

margin: 0;

padding: 0;

}

.background {

position: absolute;

top: 0;

left: 0;

width: 100vw;

height: 100vh;

background: #ebefec;

z-index: 0;

color: black;

font-size: 5vmin;

font-family: 'Open Sans', sans-serif;

font-weight: bold;

text-transform: uppercase;

letter-spacing: 3vmin;

transition: .5s;

}

.background span {

background: #ebefec;

padding-left: 0;

margin-left: auto;

margin-right: auto;

width: 80vmin;

display: block;

margin-top: 18.6vmin;

}

.background span:before {

text-align: center;

display: inline-block;

width: 46vmin;

content: 'light ';

}

.background_marge_title {

position: absolute;

background: black;

width: 100vw;

height: 0.5vh;

top: 22.1vmin;

z-index: -1;

}

.loader:hover + .background span:before {

content: 'dark ';

}

.loader:hover,

.loader:hover + .background {

cursor: pointer;

filter: invert(100%);

transition: .5s;

}

.loader {

z-index: 1;

position: absolute;

top: 58%;

left: 50.2%;

transition: .5s;

}

.load_base {

position: absolute;

background: black;

}

.load1,

.load2 {

width: 20vmin;

height: 20vmin;

left: calc(50% - 1.25vmin - 10vmin);

top: calc(50% - 1.25vmin - 10vmin);

}

.load1 {

animation: load1 2s ease infinite;

}

.load2 {

background: transparent;

animation: load2 2s ease infinite;

}

.out_loader {

width: 18vmin;

height: 18vmin;

left: calc(50% - 9vmin);

top: calc(50% - 9vmin);

background: #ebefec;

animation: load1 2s ease infinite;

}

.in_loader {

width: 3vmin;

height: 3vmin;

border: 0.3vmin solid black;

border-radius: 100vmin;

background: #ebefec;

}

.in_loader1 {

animation: in_load1 2s ease infinite;

}

.in_loader2 {

animation: in_load2 2s ease infinite;

}

.in_loader3 {

animation: in_load3 2s ease infinite;

}

.in_loader4 {

animation: in_load4 2s ease infinite;

}

@keyframes load1 {

0% {

transform: rotate(0deg);

border-radius: 2vmin;

}

60% {

transform: rotate(360deg);

border-radius: 10vmin;

}

80% {

transform: rotate(360deg);

border-radius: 7vmin;

}

90% {

transform: rotate(360deg);

border-radius: 3.5vmin;

}

100% {

transform: rotate(360deg);

border-radius: 2vmin;

}

}

@keyframes load2 {

0% {

transform: rotate(0deg);

}

60% {

transform: rotate(-360deg);

}

100% {

transform: rotate(-360deg);

}

}

@keyframes in_load1 {

0% {

opacity: 0;

top: calc(50% - 1.25vmin);

left: calc(50% - 1.25vmin);

}

25% {

opacity: 0;

}

35% {

opacity: 1;

}

60% {

top: calc(-50% - 1.25vmin);

left: calc(50% - 1.25vmin);

}

68% {

opacity: 1;

}

72% {

opacity: 0;

}

100% {

opacity: 0;

top: calc(50% - 1.25vmin);

left: calc(50% - 1.25vmin);

}

}

@keyframes in_load2 {

0% {

opacity: 0;

top: calc(50% - 1.25vmin);

left: calc(50% - 1.25vmin);

}

25% {

opacity: 0;

}

35% {

opacity: 1;

}

70% {

top: calc(50% - 1.25vmin);

left: calc(150% - 1.25vmin);

}

76% {

opacity: 1;

}

80% {

opacity: 0;

}

100% {

opacity: 0;

top: calc(50% - 1.25vmin);

left: calc(50% - 1.25vmin);

}

}

@keyframes in_load3 {

0% {

opacity: 0;

top: calc(50% - 1.25vmin);

left: calc(50% - 1.25vmin);

}

25% {

opacity: 0;

}

35% {

opacity: 1;

}

80% {

top: calc(150% - 1.25vmin);

left: calc(50% - 1.25vmin);

}

84% {

opacity: 1;

}

88% {

opacity: 0;

}

100% {

opacity: 0;

top: calc(50% - 1.25vmin);

left: calc(50% - 1.25vmin);

}

}

@keyframes in_load4 {

0% {

opacity: 0;

top: calc(50% - 1.25vmin);

left: calc(50% - 1.25vmin);

}

25% {

opacity: 0;

}

35% {

opacity: 1;

}

90% {

top: calc(50% - 1.25vmin);

left: calc(-50% - 1.25vmin);

}

91% {

opacity: 1;

}

95% {

opacity: 0;

}

100% {

opacity: 0;

top: calc(50% - 1.25vmin);

left: calc(50% - 1.25vmin);

}

}