svg 心动画

下载代码

html

css

分享到微信朋友圈

html

css

BODY {
  background: #000;
}

.svg-fulscreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(200px);
}

.heart__fill-circle {
  transform-origin: 400px 300px;
  -webkit-animation: rotation 17s infinite alternate;
          animation: rotation 17s infinite alternate;
}
.heart__fill-circle:nth-child(6n+1) {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}
.heart__fill-circle:nth-child(6n+2) {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.heart__fill-circle:nth-child(6n+3) {
  -webkit-animation-delay: -2.5s;
          animation-delay: -2.5s;
}
.heart__fill-circle:nth-child(6n+4) {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.heart__fill-circle:nth-child(6n+5) {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}

@-webkit-keyframes rotation {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }

JavaScript

var requestAnimationFrame = window.requestAnimationFrame
    || window.mozRequestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.msRequestAnimationFrame;

const circlesGroup = document.querySelector('.heart__fill-circles-group');
  const circlesElems = document.querySelectorAll('.heart__mask-circle');
  const circles = [];
  const groupAnimatedClass = 'heart__fill-circles-group--animated';

const pathLength = 350;
  const maxSteps = 80;
  const maxR = 50;
  const rStep = maxR / maxSteps;

const Circle = function({elem, direction, delay}) {
    this.elem = elem;
    this.direction = direction;
    this.delay = delay;

this.resetValues();
  };

Circle.prototype.resetValues = function() {
    const angleDeg = Math.round(Math.random() * 360);
    const angleRad = angleDeg * Math.PI/180;

this.x = pathLength * Math.sin(angleRad); // c * sin(B)
    this.y = pathLength * Math.cos(angleRad); // c * cos(B)
    this.xStep = this.x / maxSteps;
    this.yStep = this.y / maxSteps;
    this.currentStep = maxSteps / 4.5;
  };

Circle.prototype.changeProp = function() {
    let x = this.xStep * this.currentStep;
    let y = this.yStep * this.currentStep;

if(this.direction === 1) {
      // right top
      y *= -1;
    }
    else if(this.direction === 2) {
      // right bottom
      // make nothing
    }
    else if(this.direction === 3) {
      // left bottom
      x *= -1;
    }
    else if(this.direction === 4) {
      // left top
      x *= -1;
      y *= -1;
    }

this.currentStep++;

this.elem.setAttribute('transform', `translate(${x}, ${y})`);
    this.elem.setAttribute('r', (Math.abs(maxSteps - this.currentStep)) * rStep);

if(this.currentStep >= maxSteps) {
      this.resetValues();
    }

requestAnimationFrame(() => {
      this.changeProp();
    });
  };

function setInitial() {
    circles.forEach(circle => {
      circle.elem.setAttribute('transform', `translate(0, 0)`);
      circle.elem.setAttribute('r', maxR);
    })
  };

const runAnimation = () => {
    circles.forEach((circle, i) => {
      setTimeout(() => {
        circle.resetValues();
        circle.changeProp();
      }, circle.delay);
    })
  };

const prepareCircles = () => {
    circlesElems.forEach((elem, i) => {
      const direction = Math.floor(Math.random() * 4) + 1;
      const circle = new Circle({
        elem,
        direction,
        delay: i * 100
      });

circles.push(circle);
    });
  }

// ------------------------------

prepareCircles();
  requestAnimationFrame(runAnimation);

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