CSS字体动画渐变效果

季春二九
经验教程
2023-07-16
168热度
0评论

这是一款个性新颖的css文字特效代码，css字体渐变效果，画面中的文字不仅呈现颜色的渐变效果且伴随炫酷的闪烁效果。

微信截图_20230716005042.png

{hide}
<!DOCTYPE html>

<meta charset="UTF-8">
<title>CSS字体动画渐变效果</title>
<style>
  body {
    background: rgb(197, 196, 196);
    margin: 0;
  }
  main {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text {
    background: url(https://i.giphy.com/media/3o6Ztb45EYezY9x9gQ/giphy.webp);
    background-size: contain;
    background-position: top left;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 10rem;
    font-weight: bold;
    font-family: sans-serif;
  }
</style>

<main>
  <div class="text">JICHUN29.CN</div>
</main>

{/hide}