替代<blink>
<blink>
标记从来不是官方的标准,现在已经被所有的浏览器完全抛弃了。
有没有符合标准的文字闪烁方式?
不,那里没有。 维基百科有一个很好的文章,并提供了一个使用JavaScript和CSS的替代scheme: http : //en.wikipedia.org/wiki/Blink_element
在HTML中闪烁的替代,只要尝试这一个。 它工作正常。
.blink_text { animation:1s blinker linear infinite; -webkit-animation:1s blinker linear infinite; -moz-animation:1s blinker linear infinite; color: red; } @-moz-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } }
<span class="blink_text">India's Largest portal is Meetcity.in</span>
不,没有HTML。 为什么开发人员为了取消对十年以上未实现的元素的支持,有一个很好的理由。
这就是说…你可以使用CSSanimation来模拟它 ,但是如果我是你的话,我不会冒这个被滥用的CSSanimation。
blink
元素正在被浏览器所抛弃:Firefox支持到22版本,而Opera则支持到12版本。
提到的第一个草案规范草案HTML5 CR将其声明为“过时”,但在规则中描述了“预期渲染”(在渲染部分)
blink { text-decoration: blink; }
并build议使用CSS来replace该元素。 在CSS和JavaScript中实际上有几种模拟blink
方法,但是提到的规则是最直接的: text-decoration
blink
值被定义为专门为blink
元素提供一个CSS对应物。 但是,似乎对blink
元素的支持是有限的。
如果您真的希望以跨浏览器的方式使内容闪烁,则可以使用例如简单的JavaScript代码,将内容以不可见的方式更改为可见等。 为了获得更好的结果,你可以使用CSSanimation,而浏览器的支持有限。
请尝试这一个,我保证它会工作
<script type="text/javascript"> function blink() { var blinks = document.getElementsByTagName('blink'); for (var i = blinks.length - 1; i >= 0; i--) { var s = blinks[i]; s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible'; } window.setTimeout(blink, 1000); } if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false); else if (window.addEventListener) window.addEventListener("load", blink, false); else if (window.attachEvent) window.attachEvent("onload", blink); else window.onload = blink;
然后把这个如下:
<blink><center> Your text here </blink></div>
如果您希望重新启用闪烁标记以供自己浏览,则可以安装以下简单的Chrome扩展程序: https : //github.com/etlovett/Blink-Tag-Enabler-Chrome-Extension 。 它只是使用setInterval隐藏和显示每个页面上的所有<blink>标签。
一个小的JavaScript片段模仿眨眼,甚至没有需要的CSS
<span id="lastDateBlinker"> Last Date for Participation : 30th July 2014 </span> <script type="text/javascript"> function blinkLastDateSpan() { if ($("#lastDateBlinker").css("visibility").toUpperCase() == "HIDDEN") { $("#lastDateBlinker").css("visibility", "visible"); setTimeout(blinkLastDateSpan, 200); } else { $("#lastDateBlinker").css("visibility", "hidden"); setTimeout(blinkLastDateSpan, 200); } } blinkLastDateSpan(); </script>
这是一个适合您需要的networking组件: blink-element 。
您可以简单地将您的内容包装在<blink-element>
。
<blink-element> <!-- Blinking content goes here --> </blink-element>
这里有一些代码将替代闪烁标记
<p id="blink">This text will blink!</p> <script> var blacktime = 1000; var whitetime = 1000; //These can be as long as you desire in milliseconds setTimeout(whiteFunc,blacktime); function whiteFunc(){ document.getElementById("blink").style.color = "white"; setTimeout(blackFunc,whitetime); } function blackFunc(){ document.getElementById("blink").style.color = "black"; setTimeout(whiteFunc,blacktime); } </script>