SVG 动画

下载代码

html

css

js

分享到微信朋友圈

X

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<h2>Hello you :)</h2>
		<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
			<filter id="f4" x="-50%" y="-50%" width="200%" height="200%">
				<feOffset result="offOut" in="SourceGraphic" dx="0" dy="20" />
				<feGaussianBlur result="blurOut" in="offOut" stdDeviation="7" />
				<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
			</filter>
			<path filter="url(#f4)" class="redPath" id="redPath4" d="M100 250 L 200 100 L 300 300 L 400 150" />
			<path filter="url(#f4)" class="greenPath" id="greenPath4" d="M100 250 L 200 100 L 300 300 L 400 150" />
			<path filter="url(#f4)" class="bluePath" id="bluePath4" d="M100 250 L 200 100 L 300 300 L 400 150" />
			<path filter="url(#f4)" class="whitePath" id="whitePath4" d="M100 250 L 200 100 L 300 300 L 400 150" />

<g id="circle14" class="circle">
				<circle filter="url(#f4)" cx="200" cy="100" r="25" />
				<circle filter="url(#f4)" cx="230" cy="40" r="1" />
				<path filter="url(#f4)" class="redPath" d="M160 50 L 165 50 L 160 55 L 160 50" />
				<path filter="url(#f4)" class="greenPath" d="M260 150 L 165 150 L 160 155 L 160 150" />
			</g>
			<g id="circle24" class="circle">
				<circle filter="url(#f4)" cx="330" cy="330" r="1" />
				<circle filter="url(#f4)" cx="300" cy="300" r="35" />
			</g>
		</svg>

css

JavaScript

paths(4);
circles(4);

function paths(nb) {
  movePath('whitePath' + nb, 0);
  movePath('bluePath' + nb, 0.1);
  movePath('greenPath' + nb, 0.2);
  movePath('redPath' + nb, 0.3);
}
function movePath(id, delay) {
  const ease = [Power3.easeIn, Power3.easeOut];
  var tl = new TimelineLite({
    paused: false,
    onComplete: function() {
      this.restart();
    }
  });
  const path = document.getElementById(id);
  tl.add(
    TweenLite.set(path, {
      strokeDashoffset: '0',
      strokeDasharray: '1,800'
    })
  );
  tl.add(
    TweenLite.to(path, delay, {
      strokeDashoffset: '0',
      strokeDasharray: '1,800'
    })
  );
  tl.add(
    TweenLite.to(path, 1, {
      strokeDashoffset: '-250',
      strokeDasharray: '200,800',
      ease: ease[0]
    })
  );
  tl.add(
    TweenLite.to(path, 1 - delay, {
      strokeDashoffset: '-580',
      strokeDasharray: '1,800',
      ease: ease[1]
    })
  );
  tl.add(
    TweenLite.to(path, 1 + delay, {
      strokeDashoffset: '-250',
      strokeDasharray: '100,800',
      ease: ease[0]
    })
  );
  tl.add(
    TweenLite.to(path, 1 - delay, {
      strokeDashoffset: '-0',
      strokeDasharray: '1,800',
      ease: ease[1]
    })
  );
}

function circles(nb) {
  moveCircle1('circle1' + nb);
  moveCircle2('circle2' + nb);
}

function moveCircle1(id) {
  var tl = new TimelineLite({
    paused: false,
    onComplete: function() {
      this.restart();
    }
  });
  const circle1 = document.getElementById(id);
  tl.add(
    TweenLite.set(circle1, {
      transform: 'scale(0.5) translate(0px, 0px)',
      opacity: 0
    })
  );
  tl.add(
    TweenLite.to(circle1, 0.85, {
      transform: 'scale(1) translate(0px, 0px)',
      opacity: 0
    })
  );
  tl.add(
    TweenLite.to(circle1, 0.05, {
      //BOOM
      transform: 'scale(1.4) translate(-14px, -20px)',
      opacity: 1,
      animation: 'colorSwitch 2s'
    })
  );
  tl.add(
    TweenLite.to(circle1, 1.1, {
      transform: 'scale(1.6) translate(-16px, -25px)',
      opacity: 0
    })
  );
  tl.add(
    TweenLite.to(circle1, 1.1, {
      transform: 'scale(1)',
      opacity: 0
    })
  );
  tl.add(
    TweenLite.to(circle1, 0.1, {
      //BOOM
      transform: 'scale(1.4) translate(-14px, -20px)',
      opacity: 1,
      animation: 'colorSwitch 1.2s'
    })
  );
  tl.add(
    TweenLite.to(circle1, 0.8, {
      transform: 'scale(1.6) translate(-16px, -20px)',
      opacity: 0
    })
  );
}
function moveCircle2(id) {
  var tl = new TimelineLite({
    paused: false,
    onComplete: function() {
      this.restart();
    }
  });
  const circle1 = document.getElementById(id);
  tl.add(
    TweenLite.set(circle1, {
      transform: 'scale(0) translate(150px, 150px)',
      opacity: 0
    })
  );
  tl.add(
    TweenLite.to(circle1, 1.1, {
      transform: 'scale(0.5) translate(20px, 20px)',
      opacity: 0
    })
  );
  tl.add(
    TweenLite.to(circle1, 0.1, {
      //BOOM
      transform: 'scale(1.4) translate(-10px, -10px)',
      opacity: 1,
      animation: 'colorSwitch 2s'
    })
  );
  tl.add(
    TweenLite.to(circle1, 0.8, {
      transform: 'scale(1.6) translate(-10px, -10px)',
      opacity: 0
    })
  );
  tl.add(
    TweenLite.to(circle1, 0.8, {
      transform: 'scale(0.5) translate(20px, 20px)',
      opacity: 0
    })
  );
  tl.add(
    TweenLite.to(circle1, 0.1, {
      //BOOM
      transform: 'scale(1.4) translate(-10px, -10px)',
      opacity: 1,
      animation: 'colorSwitch 1.2s'
    })
  );
  tl.add(
    TweenLite.to(circle1, 1.1, {
      transform: 'scale(1.6) translate(-10px, -10px)',
      opacity: 0
    })
  );
}

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

<!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG 动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号