loading加载

下载代码

html

css

分享到微信朋友圈

html

css

* {
  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("https://s3-us-west-2.amazonaws.com/s.cdpn.io/440564/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%;
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg