css文字闪烁效果

最新推荐文章于 2024-08-20 13:54:32 发布

素味平生

最新推荐文章于 2024-08-20 13:54:32 发布

阅读量9.6k

点赞数 8

分类专栏：前端文章标签：前端 css animation

本文链接：https://blog.csdn.net/qq_40701522/article/details/87190934

版权

前端专栏收录该内容

42 篇文章 1 订阅

订阅专栏

使用css3的animation就可以实现

<p class="arktitle">Ark</p>

 .arktitle {
            font-size: 36px;
            font-weight: bold;
            line-height: 280px;
            background: linear-gradient(to right, red, blue);
            -webkit-background-clip: text;
            color: transparent;
            animation: blink 2s linear infinite;
            -webkit-animation: blink 2s linear infinite;
            -moz-animation: blink 2s linear infinite;
            -ms-animation: blink 2s linear infinite;
            -o-animation: blink 2s linear infinite;
          }
 @keyframes blink{
            0%{opacity: 1;}
            50%{opacity: 0.5;}
            100%{opacity: 0.8;}
          }
          @-webkit-keyframes blink {
            0% { opacity: 1; }
            50%{ opacity: 0.5;}
            100% { opacity: 0.8; }
          }
          @-moz-keyframes blink {
            0% { opacity: 1; }
            50%{ opacity: 0.5; }
            100% { opacity: 0.8; }
          }
          @-ms-keyframes blink {
            0% { opacity: 1; }
            50%{ opacity: 0.5; }
            100% { opacity: 0.8;}
          }
          @-o-keyframes blink {
            0% { opacity: 1; }
            50%{ opacity: 0.5; }
            100% { opacity: 0.8; }
          }