当前位置：首页 > 技术博客 > CSS > 很有意境的日式字体背景

很有意境的日式字体背景

4年前 (2021-10-07)CSS809

日式风格的字体背景，颜色很漂亮，很有意境，很多小伙伴都在苦苦寻觅，今天它来啦，具体效果可以打开预览查看，个人非常喜欢，小编也是费了好大力气才找到的。

<html >
<head>
  <meta charset="UTF-8">
  <title>liuzhixi.cn</title>
  <link href="https://fonts.googleapis.com/css?family=Trocchi|Anton" rel="stylesheet"> 
<style>
body {  
    margin: 0;
    padding: 0;
  --purple-brown: #231f20;
  --egg-shell: #e8e4d2;
  --dark-peach: #e26961; 
  --dots-gap: 10px;
} 
.bg {
  background: inherit;
  min-height: 100vh;
  padding: 25vh 0 1.5rem;
  transition: background 0s 1s, color 0.6s;
}  
.bio {
  background: var(--purple-brown);
}

.bio h1 {
  background-color: var(--dark-peach);
}
 
h1 {
  font-family: "Anton", sans-serif;
  text-align: center;
  margin: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000), color-stop(0.5, #000), color-stop(1, transparent));
  transition: background-position 1s, background-color 1s;
  text-align: center;
  font-size: calc(18vw + 1rem);
  font-weight: 400;
  line-height: 1;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/tw-o.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/tw6-o.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/tw5-o.png");
  background-size: 45vw auto, 45vw auto, 30vw auto;
  background-repeat: repeat-x;
  background-position: 0px 15%, 200px 25%, -50px 2vw;
}
</style>

</head>
<body> 
  <div class="bg bio">
      <h1>liuzhixi.cn</h1>
  </div>  
 
</body>
</html>