評論亮點css過渡效果

我試圖完成鏈接到另一個頁面上的目標元素時，目標被突出顯示，然後淡入到默認頁面顏色，又名白色的效果。評論亮點css過渡效果

的什麼我正在尋找一個簡單的例子是一樣的觀看堆棧溢出鏈接的評論時，如：CSS: highlighted text effect

當你第一次查看評論，它強調了顏色，然後過渡到白色。

我能夠使它從白色變成另一種顏色，但似乎無法做到相反，並且找不到任何直接幫助的資源。

從白到紅，我有：

:target { 
    border-radius: 3px; 
    background-color: red; 
    transition: background-color 1s linear; 
}

HTML：

，您可以到該對象的鏈接：

<div class="col-lg-12 title">Additional<a target="_blank" href="/insight#additional">(?)</a></div>

目標被鏈接到：

<div class="col-lg-12 section-header" id="additional"><h3>Required</h3></div>

我會喜歡做相反的事情（讓它從紅色到白色）。

任何幫助將非常感激，就像我說的，我一直在尋找一個解決方案，但他們只是沒有幫助。

謝謝！

來源

2016-12-30 Sej

我們展示的HTML碼。 – aavrug

修改爲顯示html – Sej

您能否提供一個可用的示例？ – aavrug

這是接近你所描述

效果

:target { 
 
    border-radius: 3px; 
 
    animation: highlight 1000ms ease-out; 
 
} 
 
@keyframes highlight { 
 
    0% { 
 
    background-color: red; 
 
    } 
 
    100 { 
 
    background-color: white; 
 
    } 
 
}

<div class="col-lg-12 section-header" id="additional"> 
 
    <h3>Required</h3> 
 
</div> 
 

 
<a href="#additional"> Click me </a>

來源

2016-12-30 06:42:34

啊謝謝你，這是我失蹤的關鍵幀百分比！ – Sej

這與我的回答有何不同？你從字面上做了同樣的事情，我建議。 – Ricky

區別非常明顯@Ricky我的代碼使它像'RED> WHITE'，而你的代碼執行這個'WHITE> RED> WHITE'它在去白色之前變爲紅色..我從紅色開始，注意這個> 0 ％'你是'100％' –

您可以使用CSS動畫，像這樣：

:target { 
 
    border-radius: 3px; 
 
    animation: highlight 500ms ease-out 2 alternate; 
 
} 
 
@keyframes highlight { 
 
    100% { 
 
    background-color: red; 
 
    } 
 
}

<div class="col-lg-12 section-header" id="additional"> 
 
    <h3>Required</h3> 
 
</div> 
 

 
<a href="#additional"> Click me </a>

來源

2016-12-30 05:21:06 Ricky

評論亮點css過渡效果

回答

相關問題