如何從觸發器中爲y元素觸發css動畫x

當我將鼠標懸停在某個鏈接上時，我想要對我的身體背景進行動畫處理，有人可以幫我解決這個問題。如何從觸發器中爲y元素觸發css動畫x

我有一個動畫「myfirst」改變背景顏色，

@keyframes myfirst 
{ 
from{background: black;} 
to{background: white;} 

} 

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
from{ background: black;} 
to{background: white;} 

}

現在，我已經說得那麼，當我懸停體動畫被觸發。

body:hover{ 
animation: myfirst 0.01s; 
animation-iteration-count:500; 
-webkit-animation: myfirst 0.01s; 
-webkit-animation-iteration-count:500; 
}

我想要一個鏈接觸發改變我的身體背景的動畫。

來源

2013-11-20 Agyey Arya

你不僅可以用CSS ...你不能用css選擇器引用父母 – DaniP

你可以在鏈接上添加一個點擊監聽器，並在js中添加一個包含動畫的類 – andrei

恐怕其他人對。這是一個層疊的樣式表 - 它滾下來，不起來。 – peterchon

正如其他人所說的，爲了在單擊元素時更改body，您需要有一個父級選擇器。由於CSS沒有父選擇能力，你將不得不使用一些JavaScript

// Set onclick function for the element you want 
document.getElementById('changeBG').onmouseover = function() { 
    document.body.style.animation = "myfirst 0.01s 500"; //Give the body the anim 
    // The above could also be done by adding a class with the animation 
    // properties on click 
};

Demo here

但是，如果只想當鏈接盤旋的背景閃爍，停止，否則，你可以使用另一個HTML元素（一種假的body）在純CSS中執行此操作。它需要的假體元素按照文檔流，像這樣

<a id='changeBG' href='#'>Change background</a> 
<div id='cover'></div>

併爲假體元件

#cover { 
    position:absolute; /* Don't affect other elements */ 
    top:0; left:0; /* Fill up the entire viewport */ 
    width:100%; 
    height:100%; 
    z-index:-1; /* Be placed behind all other elements */ 
}

你可以這樣使用兄弟選擇鏈接的CSS（我用+這是直接以下兄弟姐妹）和:hover，得到動畫的假體

#changeBG:hover + #cover { 
    -webkit-animation: myfirst 0.01s 500; 
    animation: myfirst 0.01s 500; 
}

Demo of that approach

來源

2013-11-20 17:31:37

如何從觸發器中爲y元素觸發css動畫x

回答

相關問題