美文网首页
44、闪烁动画

44、闪烁动画

作者: Elevens_regret | 来源:发表于2017-06-27 09:52 被阅读0次

    使用CSS动画中的animation-direction属性,可以规定在奇数或偶数或全周期逆向执行动画,并且会同时反转调速函数。利用反转效果可以实现闪烁效果,闪烁效果的本质是透明度的变化。

    <div class="tip">提示文字</div>
    
    .tip{
        animation: .5s blink 6 alternate;
    }
    @keyframes blink {
        to {
            color:transparent;
        }
    }
    

    使用steps()函数可以实现硬切换的闪烁,但需要对动画的关键帧进行修改。

    .tip{
        animation: 1s blink 3 steps-start;
    }
    @keyframes blink {
        50% {
            color:transparent;
        }
    }
    

    相关文章

      网友评论

          本文标题:44、闪烁动画

          本文链接:https://www.haomeiwen.com/subject/lybscxtx.html