gsap svg实现视觉差异滚动效果
代码语言:html
所属分类:视觉差异
代码描述:gsap svg实现视觉差异滚动效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap'); * { margin: 0; padding: 0; } body, html { width: 100%; height: 100%; background: #ddd; font-family: 'Montserrat', sans-serif; font-size: 99px; text-align: center; } div { position: absolute; } </style> </head> <body> <div class="scrollDist"></div> <div class="main"> <svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"> <mask id="m"> <g class="cloud1"> <rect fill="#fff" width="100%" height="801" y="799" /> <image xlink:href="http://repo.bfw.wiki/bfwrepo/image/5edc7411d8b67.png" width="1200" height="800" /> </g> </mask> <image class="sky" xlink:href="http://repo.bfw.wiki/bfwrepo/image/5edc742622ed4.png" width="1200" height="590" /> <image class="mountBg" xlink:href="http://repo.bfw.wiki/bfwrepo/image/5edc744472b40.png" width="1200" height="800" /> <image class="mountMg" xlink:href="http://repo.bfw.wiki/bfwrepo/image/5edc745b0b86d.png" width="1200" height="800" /> <image class="cloud2" xlink:href="http://repo.bfw.wiki/bfwrepo/image/5edc746d6bfd5.png" width="1200" height="800" /> <image class="mountFg" xlink:href="http://repo.bfw.wiki/bfwrepo/image/5edc74858df66.png" width="1200" height="800" /> <image class="cloud1" xlink:href="http://repo.bfw.wiki/bfwrepo/image/5edc749c72e14.png" width="1200" height="800" /> <image class="cloud3" xlink:href="http://repo.bfw.wiki/bfwrepo/image/5edc74a6acb34.png" width="1200" height="800" /> <text fill="#fff" x="350" y="200">EXPLORE</text> <polyline class="arrow" fill="#fff" points="599,250 599,289 590,279 590,282 600,292 610,282 610,279 601,289 601,250" /> <g mask="url(#m)"> <rect fill="#fff" width="100%" height="100%&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0