css 文字闪烁

最新推荐文章于 2025-04-18 19:21:55 发布

像牛奶却不是牛奶

最新推荐文章于 2025-04-18 19:21:55 发布

阅读量468

点赞数 8

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/emmmmmmm__/article/details/135384685

版权

文章详细介绍了如何使用CSS的`@keyframes`和不同浏览器前缀实现一个名为`flicker`的动画效果，该动画在50%时达到最大不透明度，然后逐渐消失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    .flicker {
      color: #dd4814;
      animation: masked-animation 1.5s linear infinite;
      -webkit-animation: masked-animation 1.5s linear infinite;
      -moz-animation: masked-animation 1.5s linear infinite;
      -ms-animation: masked-animation 1.5s linear infinite;
      -o-animation: masked-animation 1.5s linear infinite;
    }
    @keyframes masked-animation {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 1;
      }
      50.01% {
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }
    @-webkit-keyframes masked-animation {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 1;
      }
      50.01% {
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }

    @-moz-keyframes masked-animation {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 1;
      }
      50.01% {
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }

    @-ms-keyframes masked-animation {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 1;
      }
      50.01% {
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }

    @-o-keyframes masked-animation {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 1;
      }
      50.01% {
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }