CSS 制作烟雾效果文字

宾克斯的美酒丶

已于 2022-08-16 13:40:47 修改

阅读量447

点赞数

文章标签： css html 前端

于 2022-08-14 15:48:46 首次发布

本文链接：https://blog.csdn.net/PLF_1994/article/details/126332269

版权

CSS 制作烟雾字体

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        background-color: #000;
        color: transparent;
      }
      span {
        display: block;
        float: left;
        text-shadow: 0 0 0 #fff;
        animation: smoky 4s;
      }
      span:nth-child(1) {
        animation-delay: 2s;
      }
      span:nth-child(2) {
        animation-delay: 2.2s;
      }
      span:nth-child(3) {
        animation-delay: 2.4s;
      }
      span:nth-child(4) {
        animation-delay: 2.8s;
      }
      @keyframes smoky {
        60% {
          text-shadow: 0 0 40px #fff;
        }
        100% {
          text-shadow: 0 0 20px #fff;
          opacity: 0;
          transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skew(70deg) scale(1.5);
        }
      }
    </style>
  </head>
  <body>
    <div>
      <span>每天</span>
      <span>一个</span>
      <span>小</span>
      <span>技巧</span>
    </div>
  </body>
  <script>
  </script>
</html>