TweenMax+ModifiersPlugin实现多彩svg粒子线条游动动画效果代码

代码语言:html

所属分类:动画

代码描述:TweenMax+ModifiersPlugin实现多彩svg粒子线条游动动画效果代码

代码标签: TweenMax ModifiersPlugin svg 多彩 粒子 线条 游动 动画

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

<!DOCTYPE html>

<html lang="en">

<head>

   
<meta charset="UTF-8">




   
<style>
        body
{
         
overflow: hidden;
       
}
       
        svg
{
         
position: absolute;
         
width: 400px;
         
height: 400px;
         
top: 50%;
         
left: 50%;
         
transform: translate(-50%, -50%);
       
}
       
        line
{
         
stroke-width: 2.5;
       
}
   
</style>



</head>

<body>
   
<svg></svg>


   
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
   
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ModifiersPlugin.js"></script>
   
<script>
        TweenLite.defaultEase = Linear.easeNone;
       
        var cx = 200;
        var cy = 200;
       
        var svgns = "http://www.w3.org/2000/svg";
        var root  = document.querySelector("svg");
        var twoPi = Math.PI * 2;
        var ease  = 0.35;
        var total = 25;
       
        var colors = ["#EA4335", "#FBBC05", "#34A853", "#4285F4"];
       
        colors.forEach(fu.........完整代码请登录后点击上方下载按钮下载查看

网友评论0