0

私は少し問題に遭遇しました。リストアイテムの画像ホバー状態をカスタム作成したメニューリストがあります。メニュー項目（リスト項目のテキストの長さなど）を変更する必要があるまで、これは完全に正常に機能しました。何かが変わるたびに、戻ってすべての画像を作り直さなければなりません。

これが私が達成しようとしていることのいくつかの画像です：

ここに画像の説明を入力してください

ここに画像の説明を入力してください

基本的に、ホバーは赤い背景を追加し、その赤い領域の複製が約2度回転し、明るい色になります。:afterとを使用してCSSを介してこれを行うことは可能でしょうtransform: rotate()か？そうでない場合、単語の長さを変えてこの効果を達成するための良い方法は何でしょうか？

よろしくお願いします！

トレ

4

2 に答える 2

3

あなたが言うように、これは変換で簡単に行うことができます。ただし、各ボタンには 2 つの要素が必要です。1 つはテキスト用、もう 1 つは歪んだ背景用です。

<div class="menu-button">
    <div class="text">Screenings</div>
    <div class="hover-bg"></div>
</div>

そして、.hover-bgクラスを次のようにスタイルします。

#menu .menu-button:hover .hover-bg
{
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(220, 50, 50, 0.4);
    transform: rotate(2deg) scale(1.05, 1);
    transform-origin: center right;
}​

JSFiddle の例を次に示します。

これは私がトランジションを楽しんだ例です。怠け者だったので、Webkit、つまり Chrome と Webkit でのみ動作させるようにしました。

-webkit-ブラウザ間の互換性のために、ベンダー固有のプロパティ プレフィックス ( 、-moz-など)が必要になることに注意してください。

于 2012-08-13T20:46:33.630 に答える
1

これは純粋な CSS で実行できます ( 3 でさえありません)。

ホバーすると、傾斜した背景画像が表示され、数ピクセル左と上に配置され、背景色が追加されます。

背景色のため、画像の一部しか表示されません。

<div class="text">Screenings</div>

.text {
  color: #000;
  margin-left: 5px;/*to make room for the hover image */
  padding: 4px;
}
.text:hover {
  background: #900 url(tiltedimage.png) no-repeat -5px -5px;
  color: #fff;
}

これにより、解決策が示されます。

于 2012-08-13T21:56:15.160 に答える