svg+css文字排版布局艺术效果代码-html代码-BFW代码库

svg+css文字排版布局艺术效果代码

代码语言：html

代码描述：svg+css文字排版布局艺术效果代码

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

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

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

  
  
  
  
<style>
*{
  box-sizing: border-box;
}
body{
  background-color: black;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-family: system-ui;
}
.wall-of-text{
  --clr: white;
  --clr-2: rgb(239, 68, 68);
  
  border: 14px solid rgba(148 163 184 / .5);
  width: min(calc(100% - 2rem), 600px);
  padding: 2rem;
  outline: 1px solid rgba(255 255 255 / .5);
  outline-offset: -14px;
}
svg {
  width: 100%;
  height: auto;
  
}
svg > text{
  color: var(--clr);
  translate: var(--x,-50%) var(--y,-50%);
  font-size: var(--f-size, 2rem);
  font-weight: var(--f-weight,400);
  text-transform: var(--t);
}
#word-1 { /* Every */
  --clr: var(--clr-2);
  --f-weight: 800;
  --f-size: 4rem;
  --x: 10px;
  --y: 50px;
  --t: uppercase;
}

#word-2 { /* line */
  --x: 36px;
  --y: 93px;
  --f-size: 3.5rem;
  --f-weight: 300;
  --t: uppercase;
}

#word-3 { /* of */
  --x: 157px;
  --y: 70px;
  --f-size: 2rem;
  --f-weight: 300
}
#word-4 { /* code */
  --x: 190px;
  --y: 100px;
  --f-size: 6.4rem;
  --f-weight: 600
}
#word-5 { /* brings */
  --x: 6px;
  --y: 138px;
  --f-size: 2rem;
  --f-weight: 300
}
#word-6 { /* you */
  --x: 80px;
  --y: 142px;
  --f-size: 4rem;
  --f-weight: 600;
  --t: uppercase;
  --clr: var(--clr-2);
}
#word-7 { /* closer */
  --x: 225px;
  --y: 140px;
  --f-size: 2rem;
  --f-weight: 300
}
#word-8 { /* to */
  --x: 316px;
  --y: 140px;
  --f-size: 2rem;
  --f-weight: 300
}
#word-9 { /* launching */
  --x: 161px;
  --y: 180px;
  --f-size: 4rem;
  --f-weight: 300
}
#word-10 { /* your */
  --x: 50px;
  --y: 194px;
  --f-size: 2.5rem;
  --f-weight: 300;
}
#word-11 { /* vision */
  --x: 126px;
  --y: 240px;
  --f-size: 5rem;
  --f-weight: 600;
  --t: uppercase;
  --clr: var(--clr-2);
}
#word-12 { /* stay */
  --x: 112px;
  --y: 300px;
  --f-size: 3rem;
  --f-weight: 300;
}
#word-13 { /* focused */
  --x: 61px;
  --y: 345px;
  --f-size: 5rem;
}
#word-14 { /* build */
  --x: 2px;
  --y: 378px;
  --f-size: 2.6rem;
  --f-weight: 300;
  --t: uppercase;
}
#word-14:first-letter{
  font-size: 5rem;
}
#word-15 { /* smarter */
  --x: 130px;
  --y: 378px;
  --f-size: 2.6rem;
  --.........完整代码请登录后点击上方下载按钮下载查看