gsap+svg释放爱心表白动画效果代码-html代码-BFW代码库

gsap+svg释放爱心表白动画效果代码

代码语言：html

所属分类：表白

代码描述：gsap+svg释放爱心表白动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html, body {
        	height: 100%;
        }
        
        body {
        	background: #2c2c54;
        	display: grid;
        	place-items: center;
        }
        
        svg {
        	position: absolute;
        	top: 0;
        	left: 0;
        	width: 100%;
        	height: 100%;
        }
    </style>


</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" role="img" viewBox="0 0 300 300">
</svg>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.8.0.js"></script>
    <script>
     (function() {
  const svg = document.querySelector("svg");
  const settings = {
    animation: {
      duration: 7.5,
      circleCount: 10,
      heartCount: 8
    },
    circle: {
      x: 150,
      y: 150, 
      r: 150
    },
  }
  let layers = [];

  draw();
  animate();


  function draw() {
    for(let i = 0; i <= settings.animation.circleCount; i++) {
      let layer = document.createElementNS("http://www.w3.org/2000/svg", "g");
      let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");

      circle.setAttribute("cx", settings.circle.x);
      circle.setAttribute("cy", settings.circle.y);
      circle.setAttribute("r", settings.circle.r);

      svg.append(layer);
      layer.append(circle);

      const length = circle.getTotalLength();
      const lengthDelta = circle.getTotalLength() / settings.animation.heartCount;
      let hearts = [];
      let offset = lengthDelta * (i % 2) / 2;

      for(let j = 0; j < settings.animation.heartCount; j++) {
        let point = circle.getPointAtLength(offset + lengthDelta * j);
        let heart = document.createElementNS("http://www.w3.org/2000/svg",.........完整代码请登录后点击上方下载按钮下载查看