前端闪烁效果的两种实现方式这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战在阅读《CSS Secret》第

这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战

在阅读《CSS Secret》第44节“闪烁效果”中，作者这样说：

<blink>标签已经成为了这个行业的一枚文化印记，见证了那个“刀耕火种”的年代....这个标签一直饱受诟病，一个原因在于它违背了结构与样式分离准则....

从这段话我们能获取到2个关键点：

从前，前端行业“刀耕火种”的年代，有部分内容已经过时了，例如blink标签;
一个原则：结构与样式分离。

恩，虽然咱们是现代前端技术人员，“古代”的历史也还是要了解一下的。

`<blink>`标签

我们查阅了MDN文档关于<blink>的记载：

已废弃: 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。

警告: 不要使用这个元素，它已经被淘汰。闪烁字体不符合无障碍标准，CSS规范允许浏览器忽略闪烁值。

该元素不被支持，因而实现了HTMLUnknownElement 接口.

并且给出了一个大概是如果有效是什么样子的动画，如下图：

动画.gif

计算机不尝试怎么能说OK呢？我们尝试一下blink，代码如下：

<!DOCTYPE html>
<title>
    文字闪烁效果的CSS实现方式
</title>
<body>
    <blink>blink实现方式</blink>
</body>
</html>

实际效果是(以下是一个多帧的GIF图)：

动画.gif

闪烁的其他实现方式

既然<blink>不能用，那么是否有其他的实现方式呢？

visibility

我们仔细观看闪烁的样式效果，可以通过周期性的设置对应DOM的visibility为visible和hidden来实现：

<!DOCTYPE html>
<title>
    文字闪烁效果的CSS实现方式
</title>
<body>
    <div id="blink">blink实现方式</div>
</body>
<script>
    window.onload = function() {
        document.getElementById("blink").style.visibility ='hidden';
        setInterval(change, 100);
    }
    var visibility = true;
    function change() {
        document.getElementById("blink").style.visibility = visibility ? 'visible' : 'hidden';
        visibility = !visibility;
    }
</script>
<style>
    #blink {
        visibility: visible;
    }
</style>
</html>

效果如下所示：

动画.gif

CSS的方法是通过对颜色设置透明来实现的（这个方式也是《CSS Secret》书中的方式）

<style>
    .blink {
        animation: blink 1s infinite steps(1);
    }
    @keyframes blink {
        50% {
            color: transparent;
        }
    }
</style>

前端闪烁效果的两种实现方式

<blink>标签

闪烁的其他实现方式

visibility

`<blink>`标签