css打水漂动画

下载代码

html

css

分享到微信朋友圈

html

css

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-color: #246;
  min-height: 100vh;
  perspective: 100vw;
  perspective-origin: 50% calc(50% - 25vw);
  overflow: hidden;
}

.ripple {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}
.ripple:nth-child(1) {
  width: 250px;
  height: 250px;
  left: 14%;
  --rippleDelay: 1.8s;
}
.ripple:nth-child(2) {
  width: 200px;
  height: 200px;
  left: 50%;
  --rippleDelay: 0.81s;
}
.ripple:nth-child(3) {
  width: 150px;
  height: 150px;
  left: 86%;
  --rippleDelay: 2.82s;
}
.ripple > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 -10px 20px #020406, 0 10px 20px #020406 inset, 0 10px 20px #4684c1, 0 -10px 20px #4684c1 inset;
  transform: rotateX(90deg);
  -webkit-animation: ripple 3s infinite linear;
          animation: ripple 3s infinite linear;
}
.ripple > div:nth-child(even) {
  --ripAngle: 90deg;
}
.ripple > div:nth-child(odd) {
  --ripAngle: -90deg;
}
.ripple > div:nth-child(1) {
  -webkit-animation-delay: calc(0s - var(--rippleDelay));
          animation-delay: calc(0s - var(--rippleDelay));
}
.ripple > div:nth-child(2) {
  -webkit-animation-delay: calc(-0.15s - var(--rippleDelay));
          animation-delay: calc(-0.15s - var(--rippleDelay));
}
.ripple > div:nth-child(3) {
  -webkit-animation-delay: calc(-0.3s - var(--rippleDelay));
          animation-delay: calc(-0.3s - var(--rippleDelay));
}
.ripple > div:nth-child(4) {
  -webkit-animation-delay: calc(-0.45s - var(--rippleDelay));
          animation-delay: calc(-0.45s - var(--rippleDelay));
}
.ripple > div:nth-child(5) {
  -webkit-animation-delay: calc(-0.6s - var(--rippleDelay));
          animation-delay: calc(-0.6s - var(--rippleDelay));
}
.ripple > div:nth-child(6) {
  -webkit-animation-delay: calc(-0.75s - var(--rippleDelay));
          animation-delay: calc(-0.75s - var(--rippleDelay));
}
@-webkit-keyframes ripple {
  0% {
    transform: rotateX(var(--ripAngle)) scale(0);
    opacity: 1;
  }
  50%, 100% {
    transform: rotateX(var(--ripAngle)) scale(2);
    opacity: 0;
  }
}
@keyframes ripple {
  0% {
    transform: rotateX(var(--ripAngle)) scale(0);
    opacity: 1;
  }
  50%, 100% {
    transform: rotateX(var(--ripAngle)) scale(2);
    opacity: 0;
  }
}

.rockWrapper {
  position: absolute;
  bottom: 50%;
  transform: translateX(-50%);
  transform-style: preserve-3d;
  -webkit-animation: rockHeight 3s infinite linear;
          animation: rockHeight 3s infinite linear;
}
@-webkit-keyframes rockHeight {
  from {
    height: 120px;
    left: -4%;
  }
  to {
    height: 20px;
    left: 104%;
  }
}
@keyframes rockHeight {
  from {
    height: 120px;
    left: -4%;
  }
  to {
    height: 20px;
    left: 104%;
  }
}
.rockWrapper .rock {
  position: absolute;
  width: 50px;
  height: 25px;
  background-color: #fff;
  background-image: radial-gradient(100% 125% at top, #fff, #000);
  transform: translate(-50%, -90%);
  border-radius: 50%;
  -webkit-animation: rockBounce 0.5s infinite alternate ease-in;
          animation: rockBounce 0.5s infinite alternate ease-in;
}
@-webkit-keyframes rockBounce {
  from {
    top: 0%;
  }
  to {
    top: 100%;
  }
}
@keyframes rockBounce {
  from {
    top: 0%;
  }
  to {
    top: 100%;
  }
}
.rockWrapper .shadow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%) rotateX(90deg) scale(1);
  width: 250px;
  height: 250px;
  background-image: radial-gradient(#000, #0000 66%);
  -webkit-animation: rockShadow 0.5s infinite alternate ease-in;
          animation: rockShadow 0.5s infinite alternate ease-in;
}
@-webkit-keyframes rockShadow {
  from {
    transform: translate(-50%, 50%) rotateX(90deg) scale(1);
    opacity: 0.1;
  }
  to {
    transform: translate(-50%, 50%) rotateX(90deg) scale(0.3);
    opacity: 0.2;
  }
}
@keyframes rockShadow {
  from {
    transform: translate(-50%, 50%) rotateX(90deg) scale(1);
    opacity: 0.1;
  }
  to {
    transform: translate(-50%, 50%) rotateX(90deg) scale(0.3);
    opacity: 0.2;
  }
}

JavaScript

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