我該如何做一個HTML目標對象的CSS3微光動畫？

Question

在網頁中，有沒有辦法使用關鍵幀在目標對象上執行CSS3閃爍動畫，如DIV,A標記或BUTTON？我更關心目前的瀏覽器，而不是IE11以上的版本。

微光動畫將閃亮的條形物體以一定角度穿過物體並將其沿特定方向移動。它有助於吸引人們關注頁面上的某些內容。這對於在線廣告中的登錄頁面非常有用，以吸引客戶點擊購買。

在這種情況下，HTML目標對象會像加載頁面時一樣顯示。但是，在幾秒鐘之後，它會從您希望應用此效果的元素的可見溢出邊界之外的隱藏空間中的左側移入，並向右移動，直到它溢出HTML目標對象邊界並且離開邊界，只是有一個延遲，並再次出現。它可以位於目標對象的頂部，儘管我正在查找的動畫類型位於目標對象的背景中，並且亮白色。當在目標物體背景上行駛時，它應該是快速的，以便持續1秒或1.5秒。

Answer 1

您可以創建一個對角漸變背景，並將其從極端最左端滑動到極端最右端的一個關鍵幀定時器。將以下內容添加到您的CSS文件中，然後將「閃爍」類添加到您的HTML元素中。我使用關鍵幀中background-position-x屬性上的較大數字組合的動畫速度以及CSS類的animation屬性中的動畫速度（當前爲8s）進行播放。

@keyframes shimmerBackground { 
    0% {background-position:-5000px 0} 
    100% {background-position:5000px 0} 
} 

.shimmer 
{ 
background-image: -moz-linear-gradient(160deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0) 100%); 
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0)), color-stop(60%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0))); 
background-image: -webkit-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); 
background-image: -o-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); 
background-image: -ms-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); 
background-image: linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); 
background-repeat: repeat-y; 
background-position:-5000px 0; 
animation: shimmerBackground 8s linear infinite; 
}