CSS3 background-position des Bildes übergang

Möchte ich ein CSS3 hover-Effekt auf meine website-logo. Einfach, Recht? Gut es funktioniert, aber nicht so, wie ich es mir vorstelle.

Link zu meinem logo

Der oberen Hälfte ist es der reguläre Zustand und die untere Hälfte ist die :hover-Zustand.

Habe ich die standard-CSS für die änderung der background-position :hover, aber die CSS3-übergang verschiebt das Bild nach oben und unten mit der position. Stattdessen möchte ich es einfach nur fade in und out an die neue position.

Ist das möglich, beim arbeiten mit einem Bild und zwei Positionen oder muss ich zwei getrennte Bilder (was nicht passiert)?

Ich denke, zwei. CSS3 ist kein Ersatz für JS...
ich weiß nicht wirklich verstehen, was Sie versuchen zu erreichen, können Sie geben ein Beispiel (oder zumindest klären, ein bisschen mehr - wollen Sie Ihr image zu ändern, nur seine Obere Hälfte, oder Sie wollen Ihr Bild zu verblassen, und ein neues Bild einblenden)?
Ich machte eine Seite zu zeigen, meine situation. scferg.com/logoexamples.html
Sie müssen mindestens 2 Elemente. 1. überlagerungen 2nd. am 1.: wenn 1. der Deckkraft ändert sich zu 0 => 2. gezeigt wird mit "Fade". Sie können mit dem gleichen hintergrund(empfohlen) aus, und spielen Sie einfach mit background-Position.

InformationsquelleAutor Sean | 2011-04-22

  1. 10

    Brauchen Sie nicht zwei separate Bilder, aber Sie müssen zwei separate Elemente in die position Ihres Logos.

    Siehe live-version hier: http://jsfiddle.net/BdY79/

    .logo {
  width: 282px;
  height: 69px;
  background: #fff url(http://scferg.com/wp-content/themes/austere/images/logo.png) 0 -69px no-repeat;
  overflow: hidden;
}

.logo img {
  background-color: #fff;
  -webkit-transition: opacity 200ms ease;
  -moz-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
}

.logo img:hover {
  opacity: 0;
}

    In der Praxis, werden Sie wahrscheinlich wollen, verknüpfen Sie Ihr logo und Sie können den tag dazu, es gibt also keine extra-markup. Außerdem degradiert anmutig.

    InformationsquelleAutor methodofaction

  2. 7

    Diese nicht erwähnt, hintergrund, position, animation...

    .box {
    display:block;
    height:300px;
    width:300px;
    background:url('http://lorempixum.com/300/300') no-repeat;
    background-position:-300px;
    -webkit-transition:background-position 1s ease;
}

.box:hover{
    background-position:0px;
}

    Webkit-nur 🙁

    Via: http://jsfiddle.net/hfXSs/

    Mehr hier: http://css-tricks.com/parallax-background-css3/

    InformationsquelleAutor Foxinni

  3. 1

    Ja, es ist möglich, aber Sie können nicht verwenden Sie einen einfachen übergang müssen Sie eine CSS-animation mit 4 keyframes

    0%   - opacity 1
49%  - opacity 0
50%  - move to new position, opacity 0
100% - opacity 1

    InformationsquelleAutor Michael Mullany

  4. 0

    https://gordonlesti.com/css-background-transitions-with-image-sprites/

    <style>
    .example4 {
        background: url(sprite.png) 0px 0px no-repeat;
        position: relative;
        width: 200px;
        height: 200px;
    }
    .example4::after {
        content: "";
        background: url(sprite.png) -200px 0px no-repeat;
        opacity: 0;
        transition: opacity 0.5s;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .example4:hover::after {
        opacity: 1;
        transition: opacity 0.5s;
    }
</style>

<div class="example4"></div>

    InformationsquelleAutor X-NicON

Schreibe einen Kommentar