svg+css实现响应式方框文字排版布局效果代码-html代码-BFW代码库

svg+css实现响应式方框文字排版布局效果代码

代码语言：html

代码描述：svg+css实现响应式方框文字排版布局效果代码

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

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

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

  
  
<style>
@import url(https://fonts.bunny.net/css?family=clicker-script:400|roboto:300,400,600,800);


.wrapper{
  --clr-primary: rgb(241, 245, 249);
  --clr-secondary: rgb(217, 119, 6);
  
  position: relative;
  align-self: center;  
  width: min(calc(100% - 4rem), 800px);
  padding: 1rem;
  border: 20px solid var(--clr-secondary);
}
svg{
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
  color: var(--clr-primary);
}
/* listen to them */
svg > text:nth-child(1){
  font-weight: 400;
  font-size: 1rem;
  translate: 73px 23px;
}
/* the */
svg > text:nth-child(2){
  font-weight: 300;
  font-size: 0.8rem;
  translate: 12px 51px;
  rotate: -90deg;
  color: var(--clr-secondary);
}
/* children */
svg > text:nth-child(3){
  font-weight: 800;
  font-size: 2rem;
  translate: 14px 50px;
}
/* of the */
svg > text:nth-child(4){
  font-weight: 300;
  font-size: 0.8rem;
  translate: 67px 63px;
}
/* night */
svg > text:nth-child(5){
  font-weight: 800;
  font-size: 1.8rem;
  translate: 100px 74px;
  color: var(--clr-secondary);
}
/* what */
svg > text:nth-child(6){
  font-weight: 300;
  font-size: 0.8rem;
  .........完整代码请登录后点击上方下载按钮下载查看