html 圆点加载效果,HTML5 CSS3很有创意的一个圆点LOGO加载动画

CSS

语言：

CSSSCSS

确定

* {

padding: 0;

margin: 0;

outline: 0;

border: 0;

box-sizing: border-box;

}

html,

body {

width: 100%;

height: 100%;

overflow: hidden;

}

body {

background: -webkit-linear-gradient(45deg, #6fc7b5 0%, #13bdce 20%, #0094d9 40%, #5a3694 60%, #ee4d74 80%, #f58c58 100%);

background: linear-gradient(45deg, #6fc7b5 0%, #13bdce 20%, #0094d9 40%, #5a3694 60%, #ee4d74 80%, #f58c58 100%);

background-size: 600%;

background-position: 0% 100%;

-webkit-animation: gradient 7.5s ease-in-out infinite;

animation: gradient 7.5s ease-in-out infinite;

position: absolute;

left: 0;

}

.loading {

width: 100%;

height: 100%;

}

.loading * {

position: fixed;

left: 50%;

top: 50%;

-webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg);

transform: translate3d(-50%, -50%, 0) rotate(0deg);

}

.loading .logo {

background-image: url("/uploads/1801/galleria-en.svg");

background-repeat: no-repeat;

background-position: center;

width: 180px;

height: 100%;

}

.loading .dots.animate .dot {

-webkit-animation: loading-block 2.5s ease-in-out 1;

animation: loading-block 2.5s ease-in-out 1;

}

.loading .dots.animate .dot:after {

-webkit-animation: loading-dot 2.5s ease-in-out 1;

animation: loading-dot 2.5s ease-in-out 1;

}

.loading .dots .dot {

width: 300px;

height: 300px;

}

.loading .dots .dot:after {

content: "";

display: inline-block;

width: 60px;

height: 60px;

background-color: #fff;

border-radius: 50%;

position: absolute;

-webkit-transform: scale(0.17);

transform: scale(0.17);

}

.loading .dots .dot:nth-child(1) {

top: 119px;

left: -209px;

-webkit-animation-delay: 0s;

animation-delay: 0s;

}

.loading .dots .dot:nth-child(1):after {

-webkit-transform-origin: top right;

transform-origin: top right;

top: 0;

right: 0;

-webkit-animation-delay: 0s;

animation-delay: 0s;

}

.loading .dots .dot:nth-child(2) {

top: -161px;

left: -194px;

-webkit-animation-delay: 0.25s;

animation-delay: 0.25s;

}

.loading .dots .dot:nth-child(2):after {

-webkit-transform-origin: bottom right;

transform-origin: bottom right;

bottom: 0;

right: 0;

-webkit-animation-delay: 0.25s;

animation-delay: 0.25s;

}

.loading .dots .dot:nth-child(3) {

top: -161px;

left: -101px;

-webkit-animation-delay: 0.5s;

animation-delay: 0.5s;

}

.loading .dots .dot:nth-child(3):after {

-webkit-transform-origin: bottom right;

transform-origin: bottom right;

bottom: 0;

right: 0;

-webkit-animation-delay: 0.5s;

animation-delay: 0.5s;

}

.loading .dots .dot:nth-child(4) {

top: 116px;

left: 200px;

-webkit-animation-delay: 0.75s;

animation-delay: 0.75s;

}

.loading .dots .dot:nth-child(4):after {

-webkit-transform-origin: top left;

transform-origin: top left;

top: 0;

left: 0;

-webkit-animation-delay: 0.75s;

animation-delay: 0.75s;

}

.loading .dots .dot:nth-child(5) {

top: -161px;

left: 214px;

-webkit-animation-delay: 1s;

animation-delay: 1s;

}

.loading .dots .dot:nth-child(5):after {

-webkit-transform-origin: bottom left;

transform-origin: bottom left;

bottom: 0;

left: 0;

-webkit-animation-delay: 1s;

animation-delay: 1s;

}

@-webkit-keyframes loading-block {

100% {

-webkit-transform: translate3d(-50%, -50%, 0) rotate(360deg);

transform: translate3d(-50%, -50%, 0) rotate(360deg);

}

}

@keyframes loading-block {

100% {

-webkit-transform: translate3d(-50%, -50%, 0) rotate(360deg);

transform: translate3d(-50%, -50%, 0) rotate(360deg);

}

}

@-webkit-keyframes loading-dot {

50% {

-webkit-transform: scale(1);

transform: scale(1);

}

}

@keyframes loading-dot {

50% {

-webkit-transform: scale(1);

transform: scale(1);

}

}

@-webkit-keyframes gradient {

50% {

background-position: 100% 0%;

}

}

@keyframes gradient {

50% {

background-position: 100% 0%;

}

}