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/.........完整代码请登录后点击上方下载按钮下载查看