阅读 1008

纯CSS实现文字闪烁效果

这是我参与8月更文挑战的第4天,活动详情查看:8月更文挑战

刚刚学习了CSS动画,想着做什么酷炫的效果,先做一个CSS文字闪烁效果吧。

文字闪烁是一个做PPT常用的方式,可以吸引关注点,从而达到加重概念的效果。

animation属性

css的animation是css动画的关键。文档介绍了animation包括6个属性:

animation:                      //含义与默认值
    animation-name,            // 动画名称: none
    animation-duration,         // 动画持续事件:0s,该值必须修改为非0值,否则动画不会播放。
    animation-timing-function, // 状态变化速度:ease, 即逐渐放慢
    animation-delay,           // 动画初始播放的延迟时间:0s
    animation-iteration-count, // 动画在结束前运行的次数: 1, 若为infinite则表示持续播放
    animation-direction,       // 动画是否反向播放: normal,具体含义可参考阮一峰博客。
    animation-fill-mode,       // 执行之前和之后如何将样式应用于其目标:none
    animation-play-state        // 是否运行或者暂停: running
复制代码

闪烁实现方式

实现方式也很简单,基本思路可以通过不断修改字体大小来实现:

<!DOCTYPE html>

<body>
    <div class="scale">
        中国加油!奥运健儿加油!
    </div>
</body>
<style>
    .scale {
        width: 100%;
        height: 100%;
        z-index: 0;
        font-size: 50px;
        color: black;
        animation: scale 1s infinite;
        -webkit-animation: scale 1s infinite;
    }

    
/* 定义keyframe动画,命名为blink */
@keyframes scale{
  0%{font-size: 50px;}
  100%{font-size: 100px;} 
}

@-webkit-keyframes scale{
  0%{font-size: 50px;}
  100%{font-size: 100px;} 
}
</style>

</html>
复制代码

具体效果如下图所示:

(用的截屏软件是ScreenToGif,好像是个开源软件:

其Github地址:github.com/NickeManari…

image.png

ae7699cd-4e3a-4826-8809-1cee517749b4.gif

其中发现比较奇怪的地方是,如果我严格按照animation的定义写满所有的属性,反而无效,只提供三个属性却有效。不知道有没有大佬知道是为什么?

文章分类
前端
文章标签