svg音乐人物动画

下载代码

html

css

分享到微信朋友圈

html

css

html, body, .scene {
  margin: 0;
  height: 100%;
  background-color: lightcoral;
  background-image: linear-gradient(
    to bottom,
    lightskyblue 70%,
    lightgray 70%,
    lightgray 71%,
    grey 71%
  );
  overflow: hidden;
  filter: url(#blur);
}

.slash-container {
  width: 100%;
  height: 100%;
  position: absolute;
  perspective: 100px;
}

#slash {
  width: 400px;
  bottom: 10%;
  left: 50%;
  transform: translate3d(-50%, 0, -10px);
  position: absolute;
}

.dust-container {
  width: 70%;
  height: 100%;
  bottom: calc(10% + 30px);
  left: calc(50% + 40px);
  transform: translateZ(-10px);
  position: absolute;
  overflow: hidden;
}

.dust {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  left: 0;
  bottom: -10px;
  position: absolute;
  background-color: lightgrey;
  transform: scale(1);
}

.shock {
  width: 400px;
  height: 400px;
  bottom: 15%;
  left: 53%;
  position: absolute;
  border: 3px solid rgb(254, 255, 222);
  border-radius: 50%;
  transform: translate(-50%, 0);
  opacity: 0;
  filter: url(#wave);
}

.thunder {
  width: 100%;
  height: 15px;
  padding: 50px;
  position: absolute;
  filter: url(#turbulence);
  overflow: hidden;
}

.thunder .bg {
  width: 100%;
  height: 100%;
  background-color: rgb(143, 244, 255);
  transform: translateX(-110%);
}

.thunder.one:nth-child(1) {
  top: 65%;
  left: 40%;
  transform: rotateZ(-135deg);
  transform-origin: top left;
}
.thunder.one:nth-child(2) {
  top: 50%;
  left: 55%;
  transform: rotateZ(-45deg);
  transform-origin: top left;
}
.thunder.one:nth-child(3) {
  top: 80%;
  left: 55%;
  transform: rotateZ(145deg);
  transform-origin: top left;
}
.thunder.one:nth-child(4) {
  top: 70%;
  left: 60%;
  transform: rotateZ(35deg);
  transform-origin: top left;
}

.thunder.two:nth-child(1) {
  top: 50%;
  left: 45%;
  transform: rotateZ(-120deg);
  transform-origin: top left;
}
.thunder.two:nth-child(2) {
  top: 60%;
  left: 55%;
  transform: rotateZ(-20deg);
  transform-origin: top left;
}
.thunder.two:nth-child(3) {
  top: 75%;
  left: 60%;
  transform: rotateZ(80deg);
  transform-origin: top left;
}
.thunder.two:nth-child(4) {
  top: 75%;
  left: 45%;
  transform: rotateZ(-200deg);
  transform-origin: top left;
}

JavaScript

// nothing makes sense here :) values handpicked by trial and error

(() => {
gsap.registerPlugin(MotionPathPlugin);
  
  const contraction = () => gsap.timeline()
  .to('#forearm-left', {
    keyframes: [{
      duration: 0.5,
      x: 5,
      y: -80,
    }, {
      duration: 0.25,
      x: 15,
      y: -90,
    }, {
      duration: 0.25,
      x: 16,
      y: -98,
    }
               ]
  }, 0)
  .to('#arm-left', {
    duration: 1,
    rotateZ: -40,
  }, 0)

const riff = () => gsap.timeline()
  .to('#forearm-left', {
    keyframes: [{
      duration: 0.05,
      x: -45,
      y: -55
    }, {
      duration: 0.1,
      x: -120,
      y: -68
    }
               ],
  }, 0)
  .to('#arm-left', {
    duration: 0.2,
    rotateZ: 30,
  }, 0)
  .to('.shock.one', {
    duration: 0.5,
    keyframes: [
      {opacity: 1, scale: 1.5,},
      {opacity: 0, scale: 2,}
    ]
  }, 0.1)
  .to('.scene', {
    duration: 0.1,
    motionPath: [{x: 10, rotationZ: 1,}, {x: -10, rotationZ: -1,}, {x: 0, rotationZ: 0,},],
  }, 0.1)
  .to('feGaussianBlur', {
    duration: 0.1,
    attr: {
      stdDeviation: 1,
    },
  }, 0.1)
  .to('feGaussianBlur', {
    duration: 0.1,
    attr: {
      stdDeviation: 0,
    },
  }, 0.2)

const thunderOne = () => gsap.timeline()
  .to('.thunder.one .bg', {
    duration: 1,
    x: '100%',
  }, 0)

const contractionTwo = () => gsap.timeline()
  .to('#forearm-left', {
    keyframes: [{
      duration: 0.1,
      x: -25,
      y: -70,
    }, {
      duration: 0.15,
      x: 16,
      y: -98,
    }
               ]
  }, 0)
  .to('#arm-left', {
    duration: 0.3,
    rotateZ: -40,
  }, 0)

const riffTwo = () => gsap.timeline()
  .to('#forearm-left', {
    keyframes: [{
      duration: 0.03,
      x: -50,
      y: -55
    }, {
      duration: 0.15,
      x: -125,
      y: -68
    }
               ],
  }, 0)
  .to('#arm-left', {
    duration: 0.2,
    rotateZ: 30,
  }, 0)
  .to('.shock.two', {
    duration: 0.5,
    keyframes: [
      {opacity: 1, scale: 1.5,},
      {opacity: 0, scale: 2,}
    ]
  }, 0.1)
  .to('.scene', {
    duration: 0.3,
    motionPath: [{x: 15, rotationZ: 1}, {x: -15,  rotationZ: -1}, {x: 0,  rotationZ: 0}],
  }, 0.1)
  .to('feGaussianBlur', {
    duration: 0.1,
    attr: {
      stdDeviation: 1,
    },
  }, 0.1)
  .to('feGaussianBlur', {
    duration: 0.1,
    attr: {
      stdDeviation: 0,
    },
  }, 0.2)

const thunderTwo = () => gsap.timeline()
  .to('.thunder.two .bg', {
    duration: 1,
    x: '100%',
  }, 0)

const contractionRight = () => gsap.timeline()
  .to('#hand-right', {
    duration: 0.5,
    x: 40,
    y: 10,
  }, 0)
  .to('#forearm-right', {
    duration: 0.5,
    x: 408,
    y: 120,
  }, 0)
  .to('#arm-right', {
    duration: 0.5,
    x: '+=20',
  }, 0)
  .to('#guitar', {
    duration: 0.5,
    x: -255,
    y: 0,
    rotationZ: 15,
  }, 0)

const zoom = () => gsap.timeline()
  .to('#slash, .dust-container', {
    duration: 1.5,
    z: 20,
  }, 0)

const restart = () => gsap.timeline()
  .to('#hand-right', {
    duration: 1.5,
    x: 0,
    y: 0,
  }, 0)
  .to('#arm-right', {
    duration: 1.5,
    x: '-=20',
  }, 0)
  .to('#forearm-right', {
    duration: 1.5,
    x: 380,
    y: 110,
  }, 0)
  .to('#arm-left', {
    duration: 1.5,
    rotate: 0,
  }, 0)
  .to('#forearm-left', {
    duration: 1.5,
    x: -58,
    y: -60,
  }, 0)
  .to('#guitar', {
    duration: 1.5,
    x: -285,
    y: 47,
    rotationZ: 0,
  }, 0)
  .to('#slash, .dust-container', {
    duration: 1.5,
    z: -10,
  }, 0)

gsap.timeline({
    repeat: -1,
  })
    .add(contraction())
    .add(contractionRight())
    .add(riff(), 1)
    .add(thunderOne(), 1.1)
    .add(contractionTwo(), 1.2)
    .add(riffTwo(), 1.5)
    .add(thunderTwo(), 1.6)
    .add(zoom(), 1)
    .add(restart())

gsap.to('.hair', {
    repeat: -1,
    yoyo: true,
    duration: 0.1,
    x: 5,
    y: -5,
  })

const dustParticles = document.getElementById('dust-particles');
  function spawn() {
    const newParticle = document.createElement('div');
    newParticle.classList.add('dust');

gsap.to(newParticle, {
      ease: 'linear',
      duration: 'random(1, 3)',
      scale: 'random(5, 10)',
      y: 'random(-10, -100)',
      left: '100%',
      onComplete: () => {
        dustParticles.removeChild(newParticle);
      }
    });

dustParticles.appendChild(newParticle);

gsap.delayedCall(0.1, spawn);
  }

spawn();
})();

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