gsap+svg实现变色蠕虫蠕动动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap+svg实现变色蠕虫蠕动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #121314; overflow: hidden; text-align:center; display: flex; align-items: center; justify-content: center; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } svg { width: 100%; height: 100%; visibility: hidden; } circle { mix-blend-mode: multiply; } </style> </head> <body > <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -8" result="cm" /> <feBlend /> </filter> <filter id="plastic" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-1000%" y="-1000%" width="3000%" height="3000%"> <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/> <feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.75" specularExponent="218" result="specOut" lighting-color="white"> <fePointLight x="5000" y="10000" z="20000"/> </feSpecularLighting> <feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" /> </filter> <linearGradient id="grad" x1="150" y1="200" x2="450" y2="200" gradientUnits="userSpaceOnUse"> </linearGradient> <circle cx=0 cy=0 class="dot" r="2" fill="url(#grad)"/> </defs> <g filter="url(#plastic)"> <rect width="100%" height="100%" fill="none" /> <g id="container" filter="url(#goo)"></g></g> </svg> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Draggable3.min.js"></script> <script > let select = s => document.querySelector(s), selectAll = s => document.querySelectorAll(s), mainSVG = select('#mainSVG'), container = select('#container'), maxDots = 200, allShapesArr = [], allNewDots = [], colorArray = ['#FDEC61','#6CFE80','#60ADF6','#6A5CF3','#ED4DC5', '#FF525F','#F99A5C', '#FDEC61'] .........完整代码请登录后点击上方下载按钮下载查看
网友评论0