Implementierung von visuellen CSS3-Effekten

Dieses Mal werde ich Ihnen die Implementierung visueller CSS3-Spezialeffekte vorstellen. Was sind die Vorsichtsmaßnahmen für die Realisierung visueller CSS3-Spezialeffekte? Das Folgende ist ein praktischer Fall.

1. Einseitiger Schatten

1. Anwendung des Box-Shadow-Attributs, Format: h-shadow v-shadow spread color inset-Attributwert-Einführung h- sahdow: Die Position des horizontalen Schattens, negative Werte sind erlaubt

①v-shadow: Die Position des vertikalen Schattens, negative Werte sind erlaubt

②blur: Unschärfeabstand

③Spread: Die Größe des Schattens, Ausdehnungsabstand, kann negativ sein

④Color: Die Farbe des Schattens

⑤inset/outset: interner oder externer Schatten

2. Der Ausdehnungsabstand des Schattens gilt für alle vier Seiten und kann nicht alleine verwendet werden. Gilt für eine Seite.

3. Box-Shadow unterstützt Einstellungen für die gleichzeitige Wirksamkeit mehrerer Wertesätze

Beispielcode:

.wrap{
            width: 200px;
            height: 120px;
            background: yellowgreen;
            box-shadow: 2px 0px 4px -2px black,
                        -2px 0px 4px -2px black;
        }

2, Unregelmäßige Projektion

1. Die durch den Randradius erzeugte Form eignet sich gut für die Projektion, aber wenn Pseudoelemente und durchscheinende Dekorationen hinzugefügt werden, ist die Schattenleistung sehr gut schlecht, wie unten gezeigt. Es wird immer Probleme geben.

① durchscheinendes Bild, Hintergrundbild oder Randbild

②-Element legt einen gepunkteten, gepunkteten oder durchscheinenden Rand fest, aber keinen Hintergrund (oder Hintergrund- Clip ist kein Rahmenfeld)

③Die kleinen Ecken innerhalb des Elements werden mithilfe von Pseudoelementen generiert

④Die durch Clip-Pfad generierte Form

Lösung: Drop verwenden -Schatten von SVG, um

Beispielcode zu erreichen:

.wrap{
            width: 200px;
            height: 120px;
            border: 6px dotted yellowgreen;
            --box-shadow: 0px 0px 4px 0px black;
            -webkit-filter: drop-shadow(2px 0px 2px rgba(0,0,0,1))
        }

3. Chromosomeneffekt

1 . Basierend auf der Filterimplementierung wenden Sie die relevanten Werte des Filterattributs an, um die Sättigung, Helligkeit und andere Werte des Bildes anzupassen

2. Implementierung basierend auf dem Min-Blend-Modus , Rolle: Elementinhalt und Hintergrund realisieren Und die folgenden Elemente werden „gemischt“

3. Grundlegende Implementierung des Hintergrundmischmodus, Funktion: Realisieren der Mischung von Hintergrundfarbe und Hintergrundbild, Hintergrundbild und Bild

Beispiele für drei Situationen Code:

.wrap1{
            width: 200px;
            height: 120px;
            overflow: hidden;
        }
        .wrap1 > img{
            max-height: 100%;
            max-width: 100%;
            -webkit-filter: sepia(1) saturate(4) hue-rotate(150deg);
        }
        .wrap2{
            width: 200px;
            height: 120px;
            background: hsl(335, 100%, 50%);
            overflow: hidden;
        }
        .wrap2 > img{
            height: 100%;
            width: 100%;
            mix-blend-mode: luminosity;
        }
        .wrap3{
            width: 200px;
            height: 120px;
            background-size: cover;
            background-color: hsl(335, 100%, 50%);
            background-image: url("../img/cat.png"); 
            background-blend-mode: luminosity;
        }

4. Milchglaseffekt

Hauptimplementierungsprinzip : Der Hintergrund des Pseudoelements des Inhalts ist das gleiche Bild wie der zugrunde liegende Hintergrund. ;Und Filter hinzufügen:Unschärfe-Unschärfefilter. Beachten Sie, dass Unschärfe weder auf den darunter liegenden Hintergrund noch auf den Hintergrund des Elements angewendet werden kann (dies führt dazu, dass das Element selbst unscharf wird und der Text unsichtbar wird) und nur auf Pseudoelemente angewendet werden kann .

Der Code lautet wie folgt:

body{
    background: url("../img/cat.png") no-repeat;
    background-size: cover;
}
.wrap{
    position: relative;
    width: 500px;
    margin: 0px auto;
    padding: 10px;
    line-height: 1.5;
    background: hsla(0, 0%, 100%, .3);
    overflow: hidden;
}
.wrap::before{
    content: '';
    background: url("../img/cat.png") 0/cover fixed;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    filter: blur(20px);
    z-index: -1;
    margin: -30px;
}

Codebeschreibung: 1. Sowohl Body- als auch Wrap-Pseudoelemente wenden dasselbe Hintergrundbild an

2, Wraps Hintergrundanhang ist auf „Fest“ eingestellt, sodass sich das Hintergrundbild beim Scrollen nicht bewegt

3. Das Wrap-Pseudoelement ist auf absolute Positionierung eingestellt, und die Z-Index-Ebene ist nur höher als der Hintergrund

4 Verwenden Sie Unschärfe, um die Unschärfegröße des Wrap-Pseudoelements festzulegen

5 width und verwenden Sie overflow:hidden für das übergeordnete Element, um den Überlauf auszublenden, wodurch der unscharfe Hintergrund realistischer wird.

5. Eckeneffekt

Implementierungsschritte

1. Verwenden Sie zuerst den linearen Farbverlauf, um den Eckenschneideffekt 2 zu erzielen, und verwenden Sie dann linear -gradinet, um ein Dreieck zu generieren und seine Position, Breite und Höhe festzulegen

Der Code lautet wie folgt:

.wrap{
        background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .4) 0) no-repeat 100% 0/2em 2em,
        linear-gradient(-135deg, transparent 1.4em, #58a 0);
        width: 200px;
        height: 120px;
    }

Hinweis

1. 100 % 0/2em 2em positioniert die Position, Breite und Höhe des Hintergrundelements, insbesondere sind Breite und Höhe von 2em die normale Breite des Hintergrundelements.

2. Die 1,4em im zweiten linearen Gradienten werden entlang der Gradientenachse gemessen. Dies ist der Abstand von der Gradientenachse zur Oberkante des Elements der obere rechte Rand

3. Nach links unten bedeutet, dass der Farbverlauf in der unteren linken Ecke beginnt

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Grafik- und Texterklärung von Float in CSS

Vier Versteckmethoden in HTML+CSS

Das obige ist der detaillierte Inhalt vonImplementierung von visuellen CSS3-Effekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!