*{
  padding: 0;
  margin: 0;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

p{
  font-size: 90px;
  font-weight: 700;
  font-family: '思源黑体 CN';
  background-image:
    linear-gradient(90deg,
    #673ab7,
    #e91e63);
  background-clip: text;
  -webkit-background-clip: text;
  /* 这次的这句和以往不一样 */
  /* 以往是考虑低版本浏览器 */
  /* 这次就连最新版Chrome和Safari都需要 */
  /* 注意是background-clip: text;需要 */
  /* 如果是： content-box啊之类的就没这么苛刻的 */
  /* -webkit-text-fill-color: transparent; */
  color: transparent;
  /* 这个属性的-webkit-前缀也比较特殊 */
  /* 寻常的-webkit-表示的是Chrome和Safari的私有属性 */
  /* 但是它却声明了所有的（除了那位浏览器） */
  background-image:
  linear-gradient(90deg, 
    rgb(255, 167, 69),
    rgb(254, 134, 159),
    rgb(239, 122, 200),
    rgb(160, 131, 237),
    rgb(67, 174, 255),
    rgb(160, 131, 237),
    rgb(239, 122, 200),
    rgb(254, 134, 159),
    rgb(255, 167, 69));
  background-size: 200%;
}

p{
  -webkit-animation: streamer 2s linear infinite;
          animation: streamer 2s linear infinite;
}

@-webkit-keyframes streamer {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 200%;
  }
}

@keyframes streamer {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 200%;
  }
}


/* @media screen and (max-width: 1050px) {
  p{
    font-size: 66px;
  }
}
@media screen and (max-width: 765px) {
  p{
    font-size: 22px;
  }
} */