文单阅读

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>纯CSS3炫酷的文字背景动画</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
    @import url("https://fonts.googleapis.com/css?family=Titan+One");
:root {
  --h1-font-size: 10vmin;
  --primary-color: rgb(245, 102, 0);
  --secondary-color: rgb(230, 96, 0);
  --tiger-image: url(../img/tiger-uppercut.gif);
  --texture-image: url(https://media.giphy.com/media/wdfxqCQVGHDlC/giphy.gif);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--primary-color);
}

.text-wrapper {
  position: relative;
}

h1 {
  display: flex;
  flex-direction: column;
  font-family: 'Titan One', sans-serif;
  font-size: var(--h1-font-size);
  text-transform: uppercase;
  background: center/cover var(--secondary-color) var(--tiger-image);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
h1:last-child {
  position: absolute;
  top: 0;
  left: 0;
  background-image: var(--texture-image);
  mix-blend-mode: soft-light;
}
h1 span {
  font-size: calc(var(--h1-font-size) / 1.825);
}
</style>

</head>
<body>
  
<div class="text-wrapper">
  <h1>B站现在越来越不好混了<span>B站现在越来越不好混了</span></h1>
  <h1>B站现在越来越不好混了<span>B站现在越来越不好混了</span></h1>
</div>



</body>
</html>
纯CSS3炫酷的文字背景动画