Zusammenfassung verschiedener Bildeffekte, die mit CSS und CSS3 erzielt werden

Nach herkömmlichem Verständnis sollten die Auswirkungen der Bildverarbeitung die Werkzeuge des Designers sein, und selbst diese Dinge sollten Designsoftware wie PhotoShop zur Vervollständigung überlassen werden. Mit der Entwicklung der CSS-Technologie und dem Aufkommen von CSS3 wird jedoch die Kompatibilität der Browser großer Hersteller immer besser und es wird immer bequemer, die CSS-Technologie zum Verarbeiten und Erzielen verschiedener Bildeffekte zu verwenden. Verschiedene Eigenschaften in CSS und CSS3 helfen uns leicht dabei, verschiedene gewünschte Bildeffekte zu erzielen. Hier werden wir über die Verwendung von CSS und CSS3 sprechen, um verschiedene Bildeffekte zu erzielen.

Zuallererst können Sie kostenlose Kurse im Zusammenhang mit der chinesischen PHP-Website lernen

1 《 CSS-Bild im CSS3-Einführungs-Tutorial"Kapitelkurs

2. Sehen Sie sich den Bildrotationseffekt in „Han Shunpings neuestes CSS3-Video-Tutorial im Jahr 2016“ an. und 3D-Rotationseffekt von Bildern Kurse

CSS, CSS3 realisiert verschiedene Bildeffekte

1. Teilen Sie einen HTML+CSS-Bildvergrößerungs-Spezialeffektcode

So vergrößern Sie das Bild , unten Der Code führt Sie dazu, diesen Effekt zu erzielen

<style>
*
{
    margin:0px;
    padding:0px;
}
#pHead
{
    display: block;
    height: 220px;
    overflow: hidden;
    width: 350px;
}
#pHead:hover img
{
    transform: scale(1.3);
    transition: all 1s ease 0s;
    -webkit-transform: scale(1.3);
    -webkit-transform: all 1s ease 0s;
}
</style>

2 Im Frontend sind Anfänger möglicherweise nicht damit vertraut. Als nächstes werde ich eine Bildliste mit 3 Zeilen und 3 Spalten als Beispiel verwenden, um zwei häufig verwendete Bildschneidelösungen vorzustellen: Anzeige: Inline-Block-Layout, das im Allgemeinen sehr einfach ist. display:inline-block-Layout

,

ähnelt dem Float-Layout, außer dass wir float: left; durch display: inline-block;<🎜 ersetzen müssen >3. P+CSS-Bildlistenlayout (2)

In diesem Artikel wird davon ausgegangen, dass Sie meinen vorherigen Artikel P+CSS-Bildlistenlayout (1) bereits gelesen haben Implementieren Sie ein komplexeres Bildlistenlayout. Es gibt Lücken zwischen den Zeilen und Spalten der Bildliste. Wir verwenden einen Container p.content, um den Inhalt zu umschließen. Stellen Sie die Breite von .content auf 80 % des übergeordneten Containers ein und füllen Sie ihn um etwa 20 Pixel nach oben und unten aus.

4. CSS3-Bildumschaltung und Analyse wichtiger Attribute

Bildumschaltung: Wenn CSS3 nicht verwendet wird, wird im Allgemeinen JS zur gleichzeitigen Implementierung von Animationen verwendet Geben Sie die Breite und die linke Seite oder die Höhe und die Oberseite des Elements ein, um den Flip-Effekt zu simulieren, und ändern Sie den SRC- oder Z-Index zum entsprechenden Zeitpunkt, um einen Bildwechsel zu erreichen.

5. CSS3-Bildgleiteffekt

Verwandte Fragen und Antworten

.cr-container{
    width: 600px;
    height: 400px;
    position: relative;
    margin: 0 auto;
    border: 20px solid #fff;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.cr-container label{
    font-style: italic;
    width: 150px;
    height: 30px;
    cursor: pointer;
    color: #fff;
    line-height: 32px;
    font-size: 24px;
    float:left;
    position: relative;
    margin-top:350px;
    z-index: 1000;
}
.cr-container label:before{
    content:'';
    width: 34px;
    height: 34px;
    background: rgba(130,195,217,0.9);
    position: absolute;
    left: 50%;
    margin-left: -17px;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
    z-index:-1;
}

1 🎜>CSS3-Symbol2.

CSS-Bildzentrierungsproblem?

3. CSS3-Bildjitter[Verwandte Empfehlungen]

1.CSS-Bild zentriert: CSS-Bild Zentrierung nach oben, unten, links und rechts (horizontal und vertikal zentriert)

Das obige ist der detaillierte Inhalt vonZusammenfassung verschiedener Bildeffekte, die mit CSS und CSS3 erzielt werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!