div+css布局实现文字逐个位移效果代码-html代码-BFW代码库

div+css布局实现文字逐个位移效果代码

代码语言：html

代码描述：div+css布局实现文字逐个位移效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@charset "UTF-8";
html, body {
  display: grid;
}

html {
  min-height: 100%;
}

svg[width="0"][height="0"] {
  position: fixed;
}

body {
  background:  #323232;
  background-blend-mode: hard-light;
  mix-blend-mode: difference;
  /* set here because of Safari bug... sigh 
   * 🪲 https://bugs.webkit.org/show_bug.cgi?id=267185 */
  font: 900 5em/1.25 ubuntu mono, consolas, monospace, sans-serif;
}

p {
  place-self: start center;
  position: relative;
  margin: 0;
  padding: 0.25lh;
  max-width: 25ch;
  color: blue;
  background: linear-gradient(0deg, #0f0 2px, #0000 0) 0 1px/1% 1lh content-box padding-box;
  isolation: isolate;
  filter: url(#offset);
  /* pseudo is only needed because of Firefox & Safari bugs
   * 🪲 https://bugzilla.mozilla.org/show_bug.cgi?id=1481498 
   * 🪲 https://bugs.webkit.org/show_bug.cgi?id=267129
   */
}
p::after {
  position: absolute;
  inset: 0;
  padding: inherit;
  /* these backgrounds create the displacement map */
  /* cicada principle with conic gradients */
  background: conic-gradient(#690000 0% 25%, #a60000 0% 50%, #9e0000 0% 75%, #940000 0% 100%), conic-gradient(#660000 0% 25%, #b00000 0% 50%, maroon 0% 75%, #c20000 0% 100%), conic-gradient(#690000 0% 25%, #9c0000 0% 50%, maroon 0% 75%, #470000 0% 100%), conic-gradient(#750000 0% 25%, #5c0000 0% 50%, #420000 0% 75%, #4a0000 0% 100%), conic-gradient(#660000 0% 25%, #cc0000 0% 50%, #6b0000 0% 75%, #590000 0% 100%), conic-gradient(#a30000 0% 25%, #4f0000 0% 50%, #4a0000 0% 75%, #a10000 0% 100%);
  background-origin: content-box;
  backgro.........完整代码请登录后点击上方下载按钮下载查看