대안
<blink>태그는 공식 표준 적이 없어, 지금은 완전히 모든 브라우저에 의해 포기한다.
텍스트를 깜박이게하는 표준 준수 방법이 있습니까?
아니 없어. Wikipedia에는 이에 대한 멋진 기사가 있으며 JavaScript 및 CSS를 사용하는 대안을 제공합니다. http://en.wikipedia.org/wiki/Blink_element
.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</span>아니요, HTML에는 없습니다. 개발자가 10 년 이상 구현되지 않은 요소에 대한 지원을 제거하기로 선택한 이유가 있습니다.
즉 ... CSS 애니메이션을 사용하여 에뮬레이트 할 수 있지만, 내가 당신이라면 이런 방식으로 남용되어 CSS 애니메이션이 도끼 될 위험이 없습니다. :)
이 blink요소는 브라우저에서 버려집니다. Firefox는 버전 22까지 지원하고 Opera는 버전 12까지 지원했습니다.
을 언급하는 첫 번째 초안 사양 인 HTML5 CR blink은이를 '구식'으로 선언하지만 ( 렌더링 섹션에서) 규칙으로 '예상 렌더링'을 설명합니다.
blink { text-decoration: blink; }
CSS를 사용하여 요소를 대체 할 것을 권장합니다. 이 모방의 몇 가지 다른 방법 실제로 blinkCSS와 자바 스크립트,하지만 언급 된 규칙은 가장 간단한 하나입니다 값 blink에 대한 text-decoration에 CSS 대응 제공하기 위해 특별히 정의 된 blink요소를. 그러나 이에 대한 지원은 blink요소 만큼 제한적인 것으로 보입니다 .
브라우저 간 방식으로 콘텐츠를 깜박이게 만들고 싶다면 예를 들어 콘텐츠를 보이지 않게 변경하거나 시간에 맞춰 다시 표시하는 등의 간단한 JavaScript 코드를 사용할 수 있습니다. 더 나은 결과를 얻으려면 브라우저 지원이 다소 제한되어있는 CSS 애니메이션을 사용할 수 있습니다.
이것을 시도하십시오 그리고 나는 그것이 작동 할 것이라는 것을 보증합니다
<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>
HTML 및 CSS로만 텍스트 깜박임
<span class="blinking">I am blinking!!!</span>
그리고 이제 CSS 코드
.blinking{
animation:blinkingText 0.8s infinite;
}
@keyframes blinkingText{
0%{ color: #000; }
49%{ color: transparent; }
50%{ color: transparent; }
99%{ color:transparent; }
100%{ color: #000; }
}
자신의 브라우징을 위해 깜박임 태그를 다시 사용하려는 경우 내가 작성한 다음 간단한 Chrome 확장 프로그램을 설치할 수 있습니다. https://github.com/etlovett/Blink-Tag-Enabler-Chrome-Extension . setInterval을 사용하여 모든 페이지의 모든 <blink> 태그를 숨기고 표시합니다.
깜박임을 모방하는 작은 자바 스크립트 스 니펫, 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>
아래 솔루션은 여러 요소에 동시에 적용될 수 있고 요소가 더 이상 페이지에 존재하지 않을 때 오류를 트리거하지 않기 때문에 흥미 롭습니다. 비결은 깜박임의 영향을 받고 싶은 요소를 반환해야하는 함수를 매개 변수로 전달하는 것이 호출된다는 것입니다. 그런 다음이 기능은 깜박일 때마다 다시 호출됩니다. 아래 HTML 파일 :
<!doctype>
<html>
<head>
<style>
.blink {color: red}
</style>
</head>
<body>
<h1>Blink test</h1>
<p>
Brazil elected President <span class="blink">Bolsonaro</span> because he
was the only candidate who did not promise <span class="blink">free things</span>
to the population. Previous politicians created an image that would
bring many benefits, but in the end, the state has been getting more and
more <span class="blink">burdened</span>. Brazil voted for the
realistic idea that <span class="blink">there is no free lunch</span>.
</p>
</body>
<script>
var blink =
{
interval_in_miliseconds:
400,
on:
true,
function_wich_returns_the_elements:
[],
activate:
function(function_wich_returns_the_elements)
{
this.function_wich_returns_the_elements = function_wich_returns_the_elements;
setInterval(blink.change, blink.interval_in_miliseconds);
},
change:
function()
{
blink.on = !blink.on;
var i, elements = [];
for (i in blink.function_wich_returns_the_elements)
{
elements = elements.concat(blink.function_wich_returns_the_elements[i]());
}
for (i in elements)
{
if (elements[i])
{
elements[i].style.opacity = blink.on ? 1 : .2;
}
}
}
};
blink.activate
(
[
function()
{
var
i,
node_collection = document.getElementsByClassName('blink'),
elements = [];
for (i = 0; i < node_collection.length; i++)
{
elements.push(node_collection[i]);
}
return elements;
}
]
);
</script>
</html>
JavaScript의 setInterval기능 을 활용할 수 있습니다 .
const spanEl = document.querySelector('#spanEl');
var interval = setInterval(function() {
spanEl.style.visibility = spanEl.style.visibility === "hidden" ? 'visible' : 'hidden';
}, 250);<span id="spanEl">This text will blink!</span>이것을 사용할 수 있습니다
@keyframes blinkingText
{
0%{ opacity: 1; }
40%{ opacity: 0; }
60%{ opacity: 0; }
100%{ opacity: 1; }
}
.blinking
{
animation:blinkingText 2s reverse infinite;
}
다음은 깜박임 태그를 대체 할 코드입니다.
<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>
다음은 필요에 맞는 웹 구성 요소입니다. blink-element .
콘텐츠를 <blink-element>.
<blink-element>
<!-- Blinking content goes here -->
</blink-element>
참고 URL : https://stackoverflow.com/questions/18105152/alternative-for-blink
'IT TIP' 카테고리의 다른 글
| csv-dataset를 R로 가져 왔지만 값은 요인이됩니다. (0) | 2020.12.07 |
|---|---|
| MongoDB를 사용한 단위 테스트 (0) | 2020.12.07 |
| RecyclerView에서 항목 제거시 애니메이션이 없습니다. (0) | 2020.12.07 |
| Gerrit에서 주어진 패치 세트를 git-pull하는 방법은 무엇입니까? (0) | 2020.12.07 |
| v2.4에서 / [post-id]가 더 이상 사용되지 않으므로 개별 게시물을 검색하려면 어떻게해야합니까? (0) | 2020.12.07 |