訪問鏈接后如何停止超鏈接上的 CSS 動畫？

Question

我正在嘗試使用 CSS 動畫使超鏈接閃爍，直到它被訪問。 但是，我當前的代碼不起作用 - 即使在單擊后它仍繼續閃爍。

如何使鏈接在訪問后停止閃爍？

我的CSS：

blink {
    -webkit-animation: 0.5s linear infinite condemned_blink_effect; 
    animation: 1.5s linear infinite condemned_blink_effect;
}

@-webkit-keyframes condemned_blink_effect { 
    0% {
        visibility: hidden;
    }

    50% {
        visibility: hidden;
    }

    100% {
        visibility: visible;
    }
}

@keyframes condemned_blink_effect {
    0% {
        visibility: hidden;
    }

    50% {
        visibility: hidden;
    }

    100% {
        visibility: visible;
    }
}

blink:visited{
    -webkit-animation: none;
    animation: none;
}

我生成鏈接 HTML 的 PHP 代碼是：

echo "<td width='150'><a href='dispdata.php?id=" . $dataReturn->dataID . "'><blink>View </a><blink></td> "; 

Answer 1

<blink>元素從來都不是 HTML 標准的一部分，而是在某個時候添加到 Netscape 版本中的一個笑話。 現代瀏覽器根本不支持這個元素，因為每個人都同意閃爍的元素很煩人。 在此處查看更多詳細信息。

您仍然可以像嘗試的那樣通過 CSS 產生閃爍效果，但是您的選擇器不正確。 :visited只能應用於鏈接（ <a>元素），但你寫了blink:visited 。 那是行不通的，因為這意味着“選擇所有也訪問過<a>元素的<blink>元素”。 一個元素不能同時存在，因此選擇器永遠不會工作。

最后，由於潛在的安全風險，可以在:visited選擇器上設置的樣式是有限的。 人們可能會濫用此選擇器來竊取用戶的瀏覽歷史記錄。 在此處查看更多詳細信息。 如果您想讓特定鏈接在新選項卡中打開頁面，然后停止閃爍，則需要 JavaScript。

例如，您可以使用blinking CSS 類使鏈接閃爍，然后在單擊元素時從元素中刪除該類。 在此代碼中，我將閃爍效果放在嵌套的<span>元素上，否則當鏈接被動畫隱藏時，您將無法單擊該鏈接。

同樣，這不是我建議使用的東西，因為它會惹惱您的用戶。

 function stopBlinking(e) { e.currentTarget.classList.remove("blinking"); } const blinking = document.querySelectorAll(".blinking"); for (link of blinking) { link.addEventListener("click", stopBlinking); }

 .blinking span { -webkit-animation: 0.5s linear infinite condemned_blink_effect; animation: 1.5s linear infinite condemned_blink_effect; } @-webkit-keyframes condemned_blink_effect { 0% { visibility: hidden; } 50% { visibility: hidden; } 100% { visibility: visible; } } @keyframes condemned_blink_effect { 0% { visibility: hidden; } 50% { visibility: hidden; } 100% { visibility: visible; } }

 <a href="#" class="blinking"><span>Sample link</span></a><br> <a href="#" class="blinking"><span>Sample link</span></a><br> <a href="#" class="blinking"><span>Sample link</span></a>