纯CSS制作炫酷的文字轮播效果-博客-技术-分享-免费顾熙博客

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字动画示例</title>
  <style>
    @import url("https://fonts.googleapis.com/css2?family=Protest+Revolution&display=swap");

    main {
      height: 100vh;
      background: #333;
      filter: contrast(30);
      position: relative;
    }

    .text {
      --text-node-count: 3;
      --single-duration: 1.2s;
      color: #fff;
      font-size: 8em;
      font-family: "Protest Revolution", sans-serif;
      font-weight: 400;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      letter-spacing: 4px;
      animation: ani calc(var(--text-node-count) * var(--single-duration)) infinite;
      animation-delay: calc(
        (var(--i) * var(--single-duration)) - var(--text-node-count) * var(--single-duration)
      );
    }

    @keyframes ani {
      0%, 100% {
        color: #fff;
        filter: blur(0);
        opacity: 1;
      }

      35%, 55% {
        filter: blur(35px);
        opacity: 0;
      }
    }
  </style>
</head>
<body>
   <main>
    <p class="text" style="--i:1">Where</p>
    <p class="text" style="--i:2">possible</p>
    <p class="text" style="--i:3">begins</p>
  </main>
</body>
</html>

来源：https://linux.do/t/topic/560383

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

文章版权声明 1 本网站名称：顾熙博客
2 本站永久网址：https://blog.s686.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ407177932进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

文章版权归作者所有，未经允许请勿转载。声明：下载本站资源即同意用户协议，本站程序只是提供给开发者学习研究。

THE END

未分类

纯CSS制作炫酷的文字轮播效果

感谢您的来访，获取更多精彩文章请收藏本站。

底部统计工具