3d svg置换波动文字动画效果
代码语言:html
所属分类:三维
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html, body { width: 100%; height: 100%; } body { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; background-color: black; color: white; font-family: 'Inter', sans-serif; font-style: normal; font-weight: 100 900; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; } svg { display: none; } .container { position: relative; width: 100%; HEIGHT: 100%; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; visibility: hidden; -webkit-filter: url(#displace); filter: url("#displace"); -webkit-perspective: 400px; perspective: 400px; overflow: visible; } .text-wrap { margin: auto; overflow: hidden; } .text-line { background: white; } .text-line:nth-of-type(even) { background: black; } .text-line:nth-of-type(even) .text { color: white; } .text { margin: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; font-size: 64px; line-height: 1.4; text-align: center; letter-spacing: -3px; font-weight: 700; white-space: nowrap; color: black; } </style> </head> <body translate="no"> <svg> <defs> <filter id="displace"> <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.007" numOctaves="1" result="turb" /> <feDisplacementMap id="displacement" in="SourceGraphic" in2="turb" scale="100" xChannelSelector="R" yChannelSelector="G" /> </filter> </defs> </svg> <div class="container"> <div class="text-wrap"> <div class="text-line"> <p class="text"><span class="temp">Bfwwiki </span></p> </div> </div> </div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.min.js"></script> <script type=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0