0

CSS とトランジションに問題があります。スムーズなトランジション (スライドする場所) または瞬間的なトランジション (スムーズなフェード効果にしたい) のいずれかを行うことができます。

私のソリューションは、純粋な html/css でなければなりません。（javascript/jqueryなどをいじりたくない）

実際の例は私のウェブサイトにあります。(最終結果を中央のアイコンの遷移にしたいのですが、段階的です)

画像にはスプライトを使用しています。

現在のソースは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:32px;display:block;}

#home{left:0px;width:32px;}
#home a{background:url('http://www.aeonsplice.com/testicons.png') 0 0;}
#home a:hover{background: url('http://www.aeonsplice.com/testicons.png') 0 32px;-webkit-transition:0.5s;}

#prev{left:32px;width:32px;}
#prev a{background:url('http://www.aeonsplice.com/testicons.png') 32px 0;}
#prev a:hover{background: url('http://www.aeonsplice.com/testicons.png') 32px 32px;-webkit-transition:0.5s fade;}

#next{left:64px;width:32px;}
#next a{background:url('http://www.aeonsplice.com/testicons.png') 64px 0;}
#next a:hover{background: url('http://www.aeonsplice.com/testicons.png') 64px 32px;-webkit-transition:0.5s linear;}
</style>
</head>

<body>
<ul id="navlist">
  <li id="home"><a href="#"></a></li>
  <li id="prev"><a href="#"></a></li>
  <li id="next"><a href="#"></a></li>
</ul>
</body>
</html>
4

3 に答える 3

0

まず、フェードは定義済みのイージング関数ではないため、#next のような標準のイージングを使用する必要があります。また、次のように#prev でトランジションを設定する必要があります。

#prev a{
    background:url('http://www.aeonsplice.com/testicons.png') 32px 0;
    -webkit-transition: all 0.5s;
}
#prev a:hover{
    background: url('http://www.aeonsplice.com/testicons.png') 32px 32px;
}

マークアップに追加せずに 2 つの画像を簡単にフェードするには...背景を別の画像 (つまり、testicons-hover.png) に変更するだけです...トランジションをサポートするすべてのブラウザーが画像をクロス フェードすることがわかっている限り。

于 2013-07-24T04:15:08.113 に答える