gsap实现图形粒子变换动画效果代码

代码语言:html

所属分类:粒子

代码描述:gsap实现图形粒子变换动画效果代码

代码标签: 粒子 变换 动画 效果

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

<html lang="en">
<head>

   
<meta charset="UTF-8">



   
<style>
:root {
       
--width: 600;
       
--height: 500;
       
--background: #87CE01;
   
}

        html
, body {
           
width: 100%;
           
height: 100%;
           
padding: 0;
           
margin: 0;
           
color: white;
           
font-family: sans-serif;
       
}

        body
{
           
display: flex;
           
justify-content: center;
           
align-items: center;
           
background-color: var(--background);
           
position: relative;
       
}

       
#container canvas {
           
width: calc(var(--width) *1px);
           
height: calc(var(--height) *1px);
       
}

       
.gsap-3-logo {
           
width: 100px;
           
position: fixed;
           
bottom: 8px;
           
right: 60px;
           
z-index: 100;
       
}
   
</style>




   
<style>
       
.sg {
           
width: 35px;
           
height: 35px;
           
position: fixed;
           
bottom: 10px;
           
right: 10px;
       
}

       
.sg .eye {
           
-webkit-transform: translateX(0px);
           
transform: translateX(0px);
       
}

       
.sg:hover .eye {
           
-webkit-transition: -webkit-transform 0.3s ease;
           
transition: -webkit-transform 0.3s ease;
           
transition: transform 0.3s ease;
           
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
           
-webkit-transform: translateX(12px);
           
transform: translateX(12px);
       
}
   
</style>
</head>

<body>
   
<div id="container">
       
<canvas width="750" height="625" style="touch-action: none; cursor: inherit;"></canvas>
   
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.3.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MotionPathPlugin.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/PixiPlugin3.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.5.1.5.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ScrubGSAPTimeline.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi-filters.js"></script>


   
<script >
        function _defineProperty(obj, key, value) {
            if (key in obj) {
                Object.define.........完整代码请登录后点击上方下载按钮下载查看

网友评论0