gsap实现深海生物游动动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap实现深海生物游动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background-color: #181d26; background-image: radial-gradient(circle at top right, #2b3342, #181d26 40%); font-family: "Raleway", sans-serif; } .container { width: 100%; height: 100vh; display: grid; place-items: center; overflow: hidden; } svg { width: 400px; height: 200px; } svg polyline { fill: none; stroke: url(#linear); stroke-width: 4; stroke-linecap: round; } svg path { stroke: #ff0077; stroke-width: 1; } .squids { width: 1000px; height: 1600px; position: relative; transform: rotateZ(-30deg) translate(100px, -300px); will-change: transform; } .main-squid { width: min-content; position: absolute; top: 30%; left: 50%; z-index: 5; transform: translate(-50%, -60%) rotateZ(60deg); transform-origin: "50% 50%"; will-change: transform; } .title { position: absolute; bottom: 25%; left: 5%; z-index: 10; text-transform: uppercase; } .title p, .title h4 { color: #dadada; font-weight: 300; } .title p:nth-child(2) { color: #ff0077; font-size: 1.2rem; margin-bottom: 10px; } .squid-item { width: min-content; position: absolute; transform: rotateZ(-90deg); will-change: transform; } @keyframes bkg { from { background-position: top; } to { background-position: bottom; } } </style> </head> <body > <div class="container" id="app"> <div class="murk"></div> <div class="squids"> <div class="squid-item" v-for="s in 8" :key="s"> <squid></squid> </div> </div> <div class="main-squid"> <squid></squid> </div> </div> <template id="squid"> <svg viewBox="0 0 400 200" ref="squid"> <defs> <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="20%" stop-color="#181D26" stop-opacity="1%" /> <stop offset="100%" stop-color="#ff0077" stop-opacity="100%" /> </linearGradient> <filter id="glow"> <fegaussianblur class="blur" result="coloredBlur" stddeviation="1"></fegaussianblur> <femerge> <femergenode in="coloredBlur"></femergenode> <femergenode in="coloredBlur"></femergenode> <femergenode in="coloredBlur"></femergenode> <femergenode in="SourceGraphic"></femergenode> </femerge> </filter> <radialGradient cx="40%" r="50%" id="pattern"> <stop offset="6%" stop-color="#FF0077" /> <stop offset="30%" stop-color="#181D26" /> <stop offset="100%" stop-color="#FF0077" /> </radialGradient> </defs> <g> <polyline id="tentacle" ref="tentacle" v-for="t in 6" :key="t" /> <!-- <polyline id="tentacle" ref="tentacle".........完整代码请登录后点击上方下载按钮下载查看
网友评论0