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

代码语言:html

所属分类:布局界面

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

代码标签: 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);
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0