div+css实现小球沿墙体曲线滑落动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现小球沿墙体曲线滑落动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

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

body {
  background-color: #aaa;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 200vh;
  overflow: hidden;
  
  * {
    transform-style: preserve-3d;
  }
}

.scene {
  --duration: 16s;
  position: relative;
  -webkit-animation: scene calc(var(--duration) * 2) infinite linear;
          animation: scene calc(var(--duration) * 2) infinite linear;
}

@-webkit-keyframes scene {
  from { transform: rotate(0deg) rotateX(30deg) rotate(360deg); }
  to { transform: rotate(360deg) rotateX(30deg) rotate(0deg); }
}

@keyframes scene {
  from { transform: rotate(0deg) rotateX(30deg) rotate(360deg); }
  to { transform: rotate(360deg) rotateX(30deg) rotate(0deg); }
}

.back {
  position: absolute;
  inset: -200vh -40vh;
  background-color: #f00;
  transform: translateZ(-8vh);
  background:
    linear-gradient(to right, #aaa, transparent, #aaa),
    repeating-linear-gradient(#ddd 0 1vh, transparent 0 9.375vh) 0 0 / 100% 100%,
    conic-gradient(from 270deg at 1vh 50%, #ddd 0 90deg, transparent 0) 2vh 0 / 18.75vh 18.75vh,
    conic-gradient(from 270deg at 1vh 50%, #ddd 0 90deg, transparent 0) 11.375vh 9.375vh / 18.75vh 18.75vh;
  -webkit-animation: sliderY var(--duration) infinite linear;
          animation: sliderY var(--duration) infinite linear;
}

.slider {
  --delay: calc(var(--duration) / -10 * var(--t));
  
  position: absolute;
  -webkit-animation: sliderY var(--duration) var(--delay) infinite linear;
          animation: sliderY var(--duration) var(--delay) infinite linear;
  
  i {
    --border-color: hsl(calc(var(--t) * 36) 75% calc(var(--i) * 5% + 25%));
    
    position: absolute;
    inset: -12vh -8vh;
    border-radius: 50%;
    border: 1vh solid;
    transform: translateZ(calc(var(--i) * 0.3vh + 1vh));
    
    &::after {
      content: '';
      position: absolute;
      inset: -1vh;
      border: inherit;
      border-radius: inherit;
      transform: translateZ(-3.5vh);
    }
  }
  &::after {
    --border-color: #000;

    content: '';
    position: absolute;
    inset: -12vh -8vh;
    border-radius: 50%;
    border: 1vh solid;
    border-color: transparent transparent #000 #000;
    transform: translateZ(-8vh);
    filter: blur(1vh);
  }
  
  &:nth-child(odd) {
    --translateX: 10vh;

    i, &::after {
      border-color: transparent var(--border-color) var(--border-color) transparent;
    }
  }
  &:nth-child(even) {
    --translateX: -10vh;
    
    i, &::after {
      border-color: transparent transparent var(--border-color) var(--border-color);
    }
  }
}

@-webkit-keyframes sliderY {
  from { translate: var(--translateX, 0) 93.75vh; }
  to { translate: var(--translateX, 0) -93.75vh; }
}

@keyframes sliderY {
  from { translate: var(--translateX, 0) 93.75vh; }
  to { translate: var(--translateX, 0) -93.75vh; }
}

.ball {
  position: absolute;
  -webkit-animation:
    ballX calc(var(--duration) / 5) infinite ease-in-out,
    ballY calc(var(--duration) / 10) calc(var(--duration) * -9.975) infinite;
          animation:
    ballX calc(var(--duration) / 5) infinite ease-in-out,
    ballY calc(var(--duration) / 10) calc(var(--duration) * -9.975) infinite;
  
  &::before {
    content: '';
    position: absolute;
    inset: -2vh;
    border-radius: 50%;
    background-color: #0007;
    transform: translateZ(-8vh);
    filter: blur(1vh);
  }
}

@-webkit-keyframes ballX {
  0%, 100% { translate: 16vh; }
  50% { translate: -16vh; }
}

@keyframes ballX {
  0%, 100% { translate: 16vh; }
  50% { translate: -16vh; }
}

@-webkit-keyframes ballY {
  0%, 100%{ transform: translateY(5vh); -webkit-animation-timing-function: cubic-bezier(.3,.0,.58,1); animation-timing-function: cubic-bezier(.3,.0,.58,1); }
  36% { transform: translateY(-5vh); -webkit-animation-timing-function: cubic-bezier(.42,0,.7,1); animation-timing-function: cubic-bezier(.42,0,.7,1); }
}

@keyframes ballY {
  0%, 100%{ transform: translateY(5vh); -webkit-animation-timing-function: cubic-bezier(.3,.0,.58,1); animation-timing-function: cubic-bezier(.3,.0,.58,1); }
  36% { transform: translateY(-5vh); -webkit-animation-timing-function: cubic-bezier(.42,0,.7,1); animation-timing-function: cubic-bezier(.42,0,.7,1); }
}

.innerBall {
  position: absolute;
  inset: -2vh;
  border-radius: 50%;
  .........完整代码请登录后点击上方下载按钮下载查看