gsap+react实现网站底部发光流线动态波浪页脚效果代码
代码语言:html
所属分类:动画
代码描述:gsap+react实现网站底部发光流线动态波浪页脚效果代码
代码标签: gsap react 网站 底部 发光 流线 动态 波浪 页脚 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); html, body { width: 100%; height: 100%; overflow: hidden; background: #000; margin: 0; display: flex; flex-direction: column; justify-content: flex-end; font-family: 'Inter', sans-serif; } .container { position: relative; flex: 1; display: flex; flex-direction: column-reverse; overflow: hidden; } svg { width: 100%; height: auto; position: absolute; top: 0; left: 0; } .footer-container { display: flex; justify-content: space-between; align-items: stretch; max-height: 500px; overflow: hidden; background-color: rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 5px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); } .footer-text { display: flex; width: 100%; max-height: 500px; justify-content: space-between; overflow: hidden; } .footer-section { flex: 1; font-size: 18px; font-weight: bold; color: #FFF; text-align: center; padding: 20px; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; } .footer-section h2 { font-weight: 700; margin-bottom: 10px; } .footer-section p { font-weight: 400; color: #DDD; } .footer-section:hover { background-color: rgba(255, 255, 255, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .line, .line2, .line3 { filter: url(#glow); } .line1 { text-shadow: 0 0 8px rgba(0, 180, 255, 0.7); } .line2 { text-shadow: 0 0 10px rgba(0, 180, 255, 0.9); } .line3 { text-shadow: 0 0 12px rgba(0, 180, 255, 1); } </style> </head> <body translate="no"> <div id="root"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.7.18.13.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/DrawSVGPlugin3.min.js"></script> <script type="text/babel"> const { useEffect } = React; const DynamicSVGAnimation = () => { useEffect(() => { let i = 0; gsap.set('.line', { attr: { 'stroke': 'hsl(200, 100%, 95%)', 'stroke-width': 4, 'stroke-linecap': 'round' }, filter: 'url(#glow)' }); gsap.set('.line2', { attr: { 'stroke-width': 6 }, opacity: 0.6, filter: 'url(#glow)' }); gsap.set('.line3', { attr: { 'stroke-width': 9 }, opacity: 0.3, filter: 'url(#glow)' }); [].forEach.call(document.getElementsByClassName('line'), (el) => { gsap.timeline({ defaults: { duration: 1 }, repeat: -1, repeatDelay: (27 - i) / 50 }) .to(el, { duration: 2, attr: { 'stroke': 'hsl(200, 100%, 85%)', ease: 'power2.inOut' } }, 0) .fromTo(el, { drawSVG: 0 }, { drawSVG: '35% 70%', ease: 'sine.in' }, i / 50) .to(el, { drawSVG: '100% 100%', ease: 'sine.out' }, 1 + i / 50) .progress(i / 20); i++; }); }, []); return ( <svg viewBox="0 0 1200 500" fill="none"> <defs> <filter id="glow"> <feGaussianBlur stdDeviation="4" result="coloredBlur"/> <feMerge> <feMergeNode in="coloredBlur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <path className="line line3" d="M-10,348c15,17,24,43,68,47s97-43,183-12s165,73,283,49 s290-98,472-87c131.22,7.93,225.6,51.07,304,38"/> <path className="line line2" d="M-10,348c15,17,24,43,68,47s97-43,183-12s165,73,283,49 s290-98,472-87c131.22,7.93,225.6,51.07,304,38"/> <path className="line line1" d="M-10,348c15,17,24,43,68,47s97-43,183-12s165,73,283,49 s290-98,472-87c131.22,7.93,225.6,51.07,304,38"/> <path className="line line3" d="M-10,319c28-9,68.84,25.02,116,26c48,1,83.41-12.8,124-7 c42,6,84,45,161,59s144,12,263-36s234-86,371-62s216,52,279,62"/> <path className="line line2" d="M-10,319c28-9,68.84,25.02,116,26c48,1,83.41-12.8,124-7 c42,6,84,45,161,59s144,12,263-36s234-86,371-62s216,52,279,62"/> <path className="line line1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0