svg心动画

下载代码

html

css

分享到微信朋友圈

html

css

BODY {
  background: #000;
}

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

.heart__fill-circle {
  -webkit-transform-origin: 400px 300px;
          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: -.5s;
          animation-delay: -.5s;
}
.heart__fill-circle:nth-child(6n + 5) {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}

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

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

JavaScript

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

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

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

var Circle = function Circle(_ref) {var elem = _ref.elem,direction = _ref.direction,delay = _ref.delay;
  this.elem = elem;
  this.direction = direction;
  this.delay = delay;

this.resetValues();
};

Circle.prototype.resetValues = function () {
  var angleDeg = Math.round(Math.random() * 360);
  var 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 () {var _this = this;
  var x = this.xStep * this.currentStep;
  var 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(function () {
    _this.changeProp();
  });
};

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

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

circles.push(circle);
  });
};

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

prepareCircles();
requestAnimationFrame(runAnimation);

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