Code-Sharing für die Implementierung von CSS-Zoom-Animationen

Ich arbeite kürzlich an einer Anmeldeseite für ein Unternehmen. Ich hoffe, dass das Drittanbieter-Anmeldesymbol einen kreisförmigen Skalierungseffekt hat (das ursprüngliche Wort ist ein Welleneffekt -_-||). und NetEase News für den Effekt-Share-Button.

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zur einfachen Implementierung der CSS-Zirkularzoomanimation vor. Jetzt werde ich ihn mit Ihnen teilen und Ihnen hoffentlich eine Referenz geben Dir helfen.

Tencent News-Share-Button-Hover-Effekt (Nachrichtenseite):

NetEase News-Share-Button-Hover-Effekt (News-Seite):

Ich habe mir den Quellcode dieser beiden Seiten angesehen, hauptsächlich mit transform:scale() und Transition. Mein endgültiger Implementierungseffekt ist wie folgt:

Die Implementierungsidee wird im Allgemeinen von NetEase News nachgeahmt. Das Layout ist wie folgt:

<a href="" class="third-party third-party-weixin">
     <i></i>
     <span></span>
 </a>

Das äußere a-Tag wird für den Gesamtcontainer und den Sprung verwendet innere Ebene Das i-Tag verwendet die Pseudoelemente::before und ::after als Hintergrundfarbe bzw. Vordergrundfarbe. Diese beiden Pseudoelemente sind absolut positioniert, vertikal und horizontal zentriert, und ::after legt das Skalierungsattribut transform:scale fest (0) und das Übergangsanimationsattribut „transition: all .3s“ ist beim Schweben sichtbar: „after“ setzt das Skalierungsattribut „transform:scale(1)“ nicht -index, das folgende Element befindet sich oben und der Skalierungsanimationseffekt wird mit dem Übergangsanimationsattribut implementiert. Das

span-Tag wird zur Anzeige des Logos verwendet, das ein Bild oder eine Webschrift sein kann. Sofern es transparent ist, wird hier ein Bild verwendet. Das CSS (hier wird Sass verwendet) lautet wie folgt:

.third-party {
    position: relative;
    // 为了兼容firefox必须要变成block或inline-block
    display: inline-block;
    width: 48px;
    height: 48px;
    margin: {
        left: 6%;
        right: 6%;
    }
    &:hover {
        i {
            &::after {
                transform: scale(1);
            }
        }
    }
    span {
        // position: relative是为了兼容firefox和IE
        position: relative;
        display: block;
        width: 48px;
        height: 48px;
        background-size: 30px;
        background-position: center;
        background-repeat: no-repeat;
    }
    i {
        position: absolute;
        top: 0;
        left: 0;
        width: 48px;
        height: 48px;
        &::before {
            content: '';
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        &::after {
            content: '';
            transition: all .3s;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transform: scale(0);
        }
    }
    &.third-party-weixin {
        span {
            background-image: url(../images/login/weixin-64.png);
        }
        i {
            &::before {
                background-color: #20a839;
            }
            &::after {
                background-color: #30cc54;
            }
        }
    }
}

Auf diese Weise ist diese einfache kreisförmige Skalierungsanimation abgeschlossen.

Verwandte Empfehlungen:

AngularJS-Imitation des WeChat-Bildgesten-Skalierungscodes

jQuery implementiert die Mausradsteuerung der Bildskalierung

Detaillierte Lösung für das Skalierungsproblem der mobilen HTML5-Seite

Das obige ist der detaillierte Inhalt vonCode-Sharing für die Implementierung von CSS-Zoom-Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!