Visuelle Effekte der CSS3-Anwendung mit neuen Funktionen

In diesem Artikel werden die visuellen Effekte der neuen Funktionen von CSS3 vorgestellt, darunter einseitige Schatten, unregelmäßige Projektionen, Chromosomeneffekte, Milchglaseffekte und Eckeffekte. Die spezifische Implementierung ist wie folgt:

1 , Einseitiger Schatten

1. Anwendung des Box-Shadow-Attributs, Format: H-Shadow-V-Shadow-Unschärfe-Spread-Farbeinschub-Attributwert-Einführung h-sahdow: Position von horizontaler Schatten, negative Werte 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

④Farbe: Die Farbe des Schattens

⑤inset/outset: Interner oder äußerer Schatten

2. Der Ausdehnungsabstand von Der Schatten gilt für alle vier Seiten und kann nicht nur auf eine Seite angewendet werden.

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. Für Formen, die durch den Randradius generiert werden, ist die Projektion gut, aber wenn es sich um Pseudoelemente handelt und durchscheinende werden hinzugefügt. Die Dekoration und die Schattenleistung sind sehr schlecht, und in den folgenden Situationen treten Probleme auf.

① Halbtransparentes Bild, Hintergrundbild oder Randbild

② Das Element legt einen gepunkteten, gepunkteten oder durchscheinenden Rand fest, hat aber keinen Hintergrund (oder Hintergrundclip ist kein Randbild). box Wann)

③ Es gibt kleine Ecken innerhalb des Elements, die mithilfe von Pseudoelementen generiert werden

④ Die durch Clip-Path generierte Form

Lösung: Verwenden Sie den Schlagschatten von SVG, um

Beispielcode:

.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 🎜>

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

2 . Implementierung basierend auf dem Min-Blending-Modus, Rolle: Elementinhalt und Hintergrund realisieren Farbe 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 Inhalts-Pseudoelements ist derselbe wie das Bild des darunter liegenden Hintergrunds. Filter hinzufügen: Unschärfefilter. Beachten Sie, dass Unschärfe weder auf den darunter liegenden Hintergrund noch auf den Hintergrund eines 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 Körper als auch Wrap-Pseudoelemente Wenden Sie dasselbe Hintergrundbild an

2. Stellen Sie den Hintergrundanhang von Wrap auf „Fest“ ein, damit sich das Hintergrundbild nicht mit dem Scrollen bewegt

3. Legen Sie das Wrap-Pseudo fest -Element zur absoluten Positionierung und Z-Index Die Ebene ist nur höher als der Hintergrund

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

5 Werte erhöhen die Breite und verwenden overflow:hidden für das übergeordnete Element, um den Überlauf auszublenden und den Hintergrund realistischer zu machen.

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

100 % 0/2em 2em ist die Positionierung der Position, Breite und Höhe des Hintergrundelements, insbesondere die Breite und Höhe von 2em 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 Farbverlaufsachse zum oberen rechten Rand.

3. Der Farbverlauf beginnt in der unteren linken Ecke.

Das Obige ist der gesamte Inhalt dieses Artikels Hilfreich für das Lernen aller. Ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Weitere Artikel zu den visuellen Effekten neuer CSS3-Funktionen finden Sie auf der chinesischen PHP-Website!