用HTML5+css 讓字閃爍

雖然本人很討厭網頁字會閃來閃去...但 ...嗯...

小時候剛寫網頁 就是烘培機很流行那時..會co很多js  然後有的就是會讓字閃不拉機

後來知道了css  然後有個屬性「text-decoration:blink; 」 可以讓字閃

but blink這招 幾乎沒browser支援了

然後js  我是完全懶的去看


然後就查到了新用法

在網頁中：

<p class="blink">這行字會閃 !!!</p>

css部份：

.blink {
    animation-duration: 1s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes blink {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}


這樣的效果太smooth....

所以可以再改成：
@keyframes blink {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    81% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}



EZ 吧~

參考來源：http://fredericiana.com/2012/11/04/html5-blink-tag/