0

HTMLとCSSだけを使用して、カーソルを合わせるとどの方向にもドロップアウトする画像を作成しようとしています。

それがどのように見えるか：

  • カーソルを合わせない：画像の一部が表示されます
  • ホバー：画像の残りのセクションがスライドアウトします（CSSで指定された方向に）

私が試したこと：

aは、特定の高さで切り取られ、ホバー時にcssアニメーションを使用してスライドアウトするa<div>を保持しますbackground-image

<html>
<body>
<style>
    @-webkit-keyframes resize {
        0% {
        }
        100% {
            height: 446px;
        }
    }

    #pic {
        height: 85px;
        width: 500px;
        background-image: url(http://images5.fanpop.com/image/photos/31400000/Cow-cows-31450227-500-446.jpg);
    }

    #pic:hover {
        -webkit-animation-name: resize;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-delay: 0.5s;
        -webkit-animation-direction: normal;
        -webkit-animation-fill-mode: forwards;
    }
</style>
<div id="pic"></div>
<p class="center">Hover over me</p>
</body>
</html>

このアプローチの問題は、これが他のコンテンツを私が望まない邪魔にならないように移動させることです。このアプローチは、画像を左または右または上にスライドさせたい場合にも機能しません。

助言がありますか？

4

1 に答える 1

2

私はあなたのコードをフィドルに置き、あなたのためにいくつかの例を考え出しました：

私は一日中このように続けることができました、これは本当に楽しいです...

コンテンツがプッシュされないようにするための鍵は、画像の位置を絶対にすることです。これにより、ドキュメントのフローからそれが持ち上げられます。次に、方向は、位置とバックラウンド位置の値をいじくり回すだけの問題になります。

お役に立てれば！

于 2012-08-21T17:30:44.247 に答える