3

私は CSS に不慣れで、解決できない問題に直面しています。css3キーフレームを使ってアニメーションを作りました。このアニメーションは、誰かが画像をホバーするたびに画像の回転を変更するだけです。この画像をウェブサイトにリンクしたかったのですが、私のやり方ではアニメーションがまったく動きません。

<div class="tunein"><a href="http://www.google.com/">
<img src="https://www.google.com/images/srpr/logo3w.png"></a></div>

.tunein{    
    position: absolute; 
    top: 40%;
    left: 10%;    
    display: block;
    -webkit-transform:rotate(12deg);
    -moz-transform:rotate(12deg);
}

.tunein a:hover{
    animation: rotate 0.5s ease-out;
    -moz-animation:rotate 0.5s ease-out; 
    -webkit-animation:rotate 0.5s ease-out; 
}

あなたのためのjsフィドル： http://jsfiddle.net/9jMqc/

クラス タグを a 要素に追加すると、オフセットは劇的に変化しますが、アニメーションは機能します。

4

1 に答える 1

2

<a>イベントをリンクに移動することを提案するので、 http://jsfiddle.net/9jMqc/2/に従って移動します

.tunein a {
    display: block;
    -webkit-transform:rotate(12deg);
    -moz-transform:rotate(12deg);        
}

.tunein a:hover{
    animation: rotate 0.5s ease-out;
    -moz-animation:rotate 0.5s ease-out; 
    -webkit-animation:rotate 0.5s ease-out; 
}

display: block以前はおそらくリンクに が欠けていたと思います- 参考までに、CSS で特に宣言されていない限り、それがデフォルトであるため、 on<a>を使用する必要はありません。display: block<div></div>

于 2012-11-23T00:56:35.673 に答える