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 */.........完整代码请登录后点击上方下载按钮下载查看