彩虹小径（使用DOM元素）

下载代码

html

css

分享到微信朋友圈

html

css

@import url("https://fonts.googleapis.com/css?family=Paytone+One");
body, html {
  background: #060a19;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Paytone One;
}

p {
  color: #fff;
  background: #000;
  mix-blend-mode: lighten;
  font-size: 30px;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 100px;
  -moz-animation: filterHue2 2s linear infinite;
  -webkit-animation: filterHue2 2s linear infinite;
  animation: filterHue2 2s linear infinite;
}
p::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #e23b4a;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIzOTY2YyIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjZmFhYTU0Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNlMjNiNGEiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2RiMDc2OCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM2MDY3MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #23966c), color-stop(25%, #faaa54), color-stop(50%, #e23b4a), color-stop(75%, #db0768), color-stop(100%, #360670));
  background: -moz-linear-gradient(left, #23966c, #faaa54, #e23b4a, #db0768, #360670);
  background: -webkit-linear-gradient(left, #23966c, #faaa54, #e23b4a, #db0768, #360670);
  background: linear-gradient(to right, #23966c, #faaa54, #e23b4a, #db0768, #360670);
  pointer-events: none;
  mix-blend-mode: multiply;
}

.loader-container {
  width: 100px;
  height: 100px;
  position: absolute;
  -moz-animation: scaleUp 0.5s linear;
  -webkit-animation: scaleUp 0.5s linear;
  animation: scaleUp 0.5s linear;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
}
.loader-container .loader {
  background: #ff0c0c;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9Ii0wLjAzOTYxNCIgeTE9IjAuOTUyNzkiIHgyPSIxLjAzOTYxNCIgeTI9IjAuMDQ3MjEiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZjBjMGMiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMWQ0MDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background: -moz-linear-gradient(40deg, #ff0c0c, #21d400);
  background: -webkit-linear-gradient(40deg, #ff0c0c, #21d400);
  background: linear-gradient(50deg, #ff0c0c, #21d400);
  border-radius: 10px;
  -webkit-filter: hue-rotate(0deg);
  filter: hue-rotate(0deg);
  animation: filterHue 2.5s linear infinite;
  height: 100%;
  width: 100%;
  transform: rotate(0deg);
}
.loader-container .loader::after {
  content: '';
  position: absolute;
  height: 80px;
  width: 80px;
  left: 10px;
  top: 10px;
  border-radius: 100%;
}

@-webkit-keyframes $animationName {
  50% {
    -webkit-filter: hue-rotate(1000deg);
    filter: hue-rotate(1000deg);
  }
  100% {
    -webkit-filter: hue-rotate(2000deg);
    filter: hue-rotate(2000deg);
  }
}
@-moz-keyframes filterHue2 {
  50% {
    -webkit-filter: hue-rotate(1000deg);
    filter: hue-rotate(1000deg);
  }
  100% {
    -webkit-filter: hue-rotate(2000deg);
    filter: hue-rotate(2000deg);
  }
}
@-ms-keyframes filterHue2 {
  50% {
    -webkit-filter: hue-rotate(1000deg);
    filter: hue-rotate(1000deg);
  }
  100% {
    -webkit-filter: hue-rotate(2000deg);
    filter: hue-rotate(2000deg);
  }
}
@keyframes filterHue2 {
  50% {
    -webkit-filter: hue-rotate(1000deg);
    filter: hue-rotate(1000deg);
  }
  100% {
    -webkit-filter: hue-rotate(2000deg);
    filter: hue-rotate(2000deg);
  }
}
@-webkit-keyframes $animationName {
  50% {
    -webkit-filter: hue-rotate(1000deg);
    filter: hue-rotate(1000deg);
  }
  100% {
    -webkit-filter: hue-rotate(2000deg);
    filter: hue-rotate(2000deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes filterHue {
  50% {
    -webkit-filter: hue-rotate(1000deg);
    filter: hue-rotate(1000deg);
  }
  100% {
    -webkit-filter: hue-rotate(2000deg);
    filter: hue-rotate(2000deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes filterHue {
  50% {
    -webkit-filter: hue-rotate(1000deg);
    filter: hue-rotate(1000deg);
  }
  100% {
    -webkit-filter: hue-rotate(2000deg);
    filter: hue-rotate(2000deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes filterHue {
  50% {
    -webkit-filter: hue-rotate(1000deg);
    filter: hue-rotate(1000deg);
  }
  100% {
    -webkit-filter: hue-rotate(2000deg);
    filter: hue-rotate(2000deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes $animationName {
  50% {
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(0.25);
    -ms-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
  }
}
@-moz-keyframes scaleUp {
  50% {
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(0.25);
    -ms-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
  }
}
@-ms-keyframes scaleUp {
  50% {
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(0.25);
    -ms-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
  }
}
@keyframes scaleUp {
  50% {
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(0.25);
    -ms-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
  }
}
@supports (-ms-ime-align: auto) {
  p {
    color: #21d400;
    background: transparent;
    mix-blend-mode: lighten;
    font-size: 30px;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 100px;
    -moz-animation: filterHue2 2s linear infinite;
    -webkit-animation: filterHue2 2s linear infinite;
    animation: filterHue2 2s linear infinite;
  }

p::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  p {
    color: #ff447c;
    background: transparent;
    mix-blend-mode: lighten;
    font-size: 30px;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 100px;
    -moz-animation: filterHue2 2s linear infinite;
    -webkit-animation: filterHue2 2s linear infinite;
    animation: filterHue2 2s linear infinite;
  }

p::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
  }

.loader {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9Ii0wLjAzOTYxNCIgeTE9IjAuOTUyNzkiIHgyPSIxLjAzOTYxNCIgeTI9IjAuMDQ3MjEiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmMDAwNTAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMzgwZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=') !important;
    background: -moz-linear-gradient(40deg, #f00050, #2380ff) !important;
    background: -webkit-linear-gradient(40deg, #f00050, #2380ff) !important;
    background: linear-gradient(50deg, #f00050, #2380ff) !important;
  }
}

JavaScript

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