文本填充效果 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="try.css">
    <title>Document</title>
</head>
<body>
    <h1 data-text="DaXiangCai">DaXiangCai</h1>
</body>
</html>
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body
{
  display: flex;
  background: #eafdff;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  flex-wrap: wrap;
}
h1
{
  position: relative;
  font-size: 14vw;
  color: #eafdff;
  -webkit-text-stroke: 5px green;
}
h1::before
{
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  color: pink;
  -webkit-text-stroke: 0px green;
  border-right: 5px solid;
  overflow: hidden;
  animation: animate 6s linear infinite;
  /* 文本不允许出现空格  */
}
@keyframes animate
{
  0%,100%
  {
    width: 0;
  }
  70%,90%
  {
    width: 100%;
  }
}

 

posted @ 2022-12-30 20:50  树叶本子  阅读(34)  评论(0)    收藏  举报