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;
  translate: 45px 76px;
}
/* music */
svg > text:nth-child(7){
  font-weight: 400;
  font-size: 1.64rem;
  translate: 45px 97px;
/*  font-style: italic;*/
}
/* they make */
svg > text:nth-child(8){
  font-weight: 300;
  font-size: 0.8rem;
  translate: 126px 86px;
}
/* Dracula by Bram Stoker */
svg > text:nth-child(9){
  font-weight: 300;
  font-size: 0.2rem;
  translate: 158px 92px;
  color: var(--clr-secondary);
}
.wrapper > img{
  position: absolute;
  left: -28px;
  bottom: -29.5%;
  width: 50%;
  z-index: 1;
/*  opacity: .6;*/
  clip-path: polygon(28px 0, 100% 0%, 100% 100%, 40% 100%, 40% 50.4%, 28px 50.4%);
}


/* general styling not relevant for this demo */
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --clr-bg: #222;
  --clr-primary: #f5f5f5;
  --clr-secondary: #075985; 
}

html {
  background-color: var(--clr-bg);
  font-family: system-ui;
}

body {
  min-height: 100svh;
  display: flex;
  place-content: center;
  color: var(--clr-primary);
  padding: 1rem;
}

body::after {
  content: "";
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 32px;
  height: 32px;
  background-size: cover;
  background-image: url('data:image/svg+xml,<svg id="logo" xmlns="http://www.w3.o.........完整代码请登录后点击上方下载按钮下载查看