Implémentation d'effets visuels CSS3

Cette fois, je vais vous présenter l'implémentation des effets spéciaux visuels CSS3. Quelles sont les précautions pour réaliser les effets spéciaux visuels CSS3. Ce qui suit est un cas pratique, jetons un coup d'oeil.

1. Ombre unilatérale

1. Application de l'attribut box-shadow, format : h-shadow v-shadow flou propagation couleur de l'attribut introduction h- sahdow : La position de l'ombre horizontale, les valeurs négatives sont autorisées

①v-shadow : La position de l'ombre verticale, les valeurs négatives sont autorisées

②blur : Distance de flou

③spread : La taille de l'ombre, La distance d'expansion peut être un nombre négatif

④color : la couleur de l'ombre

⑤inset/outset : ombre interne ou externe

2. La distance d'expansion de l'ombre est valable pour les quatre côtés et ne peut pas être utilisée seule. S'applique à un seul côté.

3. box-shadow prend en charge les paramètres de plusieurs ensembles de valeurs pour prendre effet en même temps

Exemple de code :

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

2, Projection irrégulière

1. La forme générée par le rayon de bordure est bonne avec la projection, mais si des pseudo-éléments et une décoration translucide sont ajoutés, la performance des ombres sera très pauvre, comme indiqué ci-dessous. Il y aura toujours des problèmes.

① image translucide, image d'arrière-plan ou border-image

② élément définit une bordure en pointillés, pointillée ou translucide, mais pas d'arrière-plan (ou arrière-plan- clip n'est pas border-box)

③Les petits coins à l'intérieur de l'élément sont générés à l'aide de pseudo-éléments

④La forme générée par clip-path

Solution : Utiliser drop -ombre de svg à réaliser

Exemple de code :

.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. Effet chromosomique

1 . En fonction de l'implémentation du filtre, appliquez les valeurs pertinentes de l'attribut de filtre pour ajuster la saturation, la luminosité et d'autres valeurs de l'image

2. , rôle : réaliser le contenu et l'arrière-plan des éléments. Et les éléments suivants sont "mixtes"

3. Implémentation de base du mode de mélange d'arrière-plan, fonction : réaliser le mélange de la couleur d'arrière-plan et de l'image d'arrière-plan, de l'image d'arrière-plan et de l'image.

Exemples de trois situations 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. Effet verre dépoli

Principe principal de mise en œuvre : l'arrière-plan du pseudo-élément de contenu est la même image que l'arrière-plan sous-jacent ; et ajoutez un filtre : filtre de flou flou. Notez que le flou ne peut pas être appliqué à l'arrière-plan sous-jacent, ni à l'arrière-plan d'un élément (cela rendra l'élément lui-même flou, rendant le texte invisible), et ne peut être utilisé que sur des pseudo-éléments. .

Le code est le suivant :

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;
}

Description du code : 1. Les pseudo-éléments body et wrap appliquent la même image d'arrière-plan

2 , le background-attachment de wrap est défini sur fixe, de sorte que l'image d'arrière-plan ne bouge pas avec le défilement

3. Le pseudo-élément wrap est défini sur un positionnement absolu, et le niveau d'index z est seulement supérieur à l'arrière-plan

4. Utilisez le flou pour définir la taille du flou du pseudo-élément d'enveloppement

5. Utilisez des valeurs de marge négatives pour augmenter le. width et utilisez overflow:hidden pour que l'élément parent masque le débordement, rendant l'arrière-plan flou plus réaliste.

5. Effet de coin

Étapes de mise en œuvre

1. Tout d'abord, utilisez un dégradé linéaire pour obtenir l'effet de coupe de coin 2, puis utilisez. Linear-gradinet pour le générer Un triangle et définir sa position, sa largeur et sa hauteur

Le code est le suivant :

.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;
    }

Note

1. 100% 0/2em 2em positionne la position, la largeur et la hauteur de l'élément d'arrière-plan, en particulier la largeur et la hauteur de 2em sont la largeur normale de l'élément d'arrière-plan.

2. Le 1,4em dans le deuxième dégradé linéaire est mesuré le long de l'axe du dégradé, qui est la distance entre l'axe du dégradé et le bord supérieur de l'élément. le bord supérieur droit

3. vers le bas gauche signifie que le dégradé commence à partir du coin inférieur gauche

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. , veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Explication graphique et textuelle détaillée de float en CSS

Quatre méthodes de masquage en html+css

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!