You are here
CSS 或 JS 实现闪烁文字 闪动
用 Firefox 或者 Opera 的同学比较有眼福，可以看小站首页公告栏处，有一串红字https://twitter.com/wange1228 强劲而有力的闪烁着，很显眼吧，嗯哼，要的就是这效果。无奈，今天偶遇传说中的文囧，就只好把这小儿科的效果拿出来讲讲。
这个效果其实很简单，仅是一句 CSS 就可以搞定，那就是 text-decoration:blink; 不过很可惜，IE、Chrome 或 Safari 不支持 "blink" 属性值，所以只有在 Firefox 和 Opera 下支持这 CSS 实现在闪动效果。
我倒是找到一个各浏览器通用的文字闪烁方法，那就是 JS，不过仅为一个公告就占一段 JS，好像有点太奢侈了，不是我的作风，还是贴上来供大家参考下吧。
<script type = "text/javascript" >
function blinklink() {
if (!document.getElementById('blink').style.color) {
document.getElementById('blink').style.color = "red"
}
if (document.getElementById('blink').style.color == "red") {
document.getElementById('blink').style.color = "black"
} else {
document.getElementById('blink').style.color = "red"
}
timer = setTimeout("blinklink()", 100)
}
function stoptimer() {
clearTimeout(timer)
}
blinklink()
</script>
html的代码为
<div id="blink">
aaaaaaaaaaa
<br />aaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaa
</div>
来自 http://wange.im/blink-effect-with-css-or-js.html
function blinklink() {
if (!document.getElementById('blink').style.color) {
document.getElementById('blink').style.color = "red"
}
if (document.getElementById('blink').style.color == "red") {
document.getElementById('blink').style.color = "black"
} else {
document.getElementById('blink').style.color = "red"
}
timer = setTimeout("blinklink()", 100)
}
function stoptimer() {
clearTimeout(timer)
}
blinklink()
</script>
html的代码为
<div id="blink">
aaaaaaaaaaa
<br />aaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaa
</div>
来自 http://wange.im/blink-effect-with-css-or-js.html
普通分类: