Explication détaillée de l'exemple de code pour créer un effet de verre dépoli avec CSS3-tutoriel CSS-php.cn

Explication détaillée de l'exemple de code pour créer un effet de verre dépoli avec CSS3

黄舟

Libérer： 2017-06-04 11:34:22

original

2748 Les gens l'ont consulté

Faisant une pause dans mon emploi du temps chargé, j’ai récemment regardé beaucoup d’effets sympas. Il existe de nombreux plug-ins basés sur jquery, mais la compatibilité de nombreux plug-ins n'est pas très bonne, donc les plug-ins natifs sont la voie à suivre. Dans la vie quotidienne, le verre dépoli n’est plus courant. Non, voici le verre dépoli :

Haha, passons aux choses sérieuses. Voyons d'abord l'effet final :

<.>

Bon, d'accord, commençons nos étapes :

Étape 1 : Construction de base de la page :

Je mets une grande image de fond sur le corps, puis la partie médiane est un p, le code html est le suivant :

<body>
<p >
    iPhone 7 dramatically improves the most important aspects of the iPhone experience. It introduces advanced new camera systems. The best performance and battery life ever in an iPhone. Immersive stereo speakers. The brightest, most colorful iPhone display. Splash and water resistance.1 And it looks every bit as powerful as it is. This is iPhone 7.
</p>
</body>

Copier après la connexion

La majeure partie du texte consiste à développer le p pour rendre l'effet plus évident

Le code css est le suivant :

   body {
            min-height: 100vh;
            box-sizing: border-box;
            margin: 0;
            padding-top: calc(50vh - 6em);
            font: 150%/1.6 serif;
            background: url("http://www.jackzxl.net/wp-content/MyFile/2016/09/iphone.jpg") fixed 0 center;
            background-size: cover;
        }
        p {
            margin: 0 auto;
            padding: 1em;
            max-width: 30em;
            border-radius: 0.3em;
            box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
            0 .5em 1em rgba(0, 0, 0, 0.6);
            text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
            background: hsla(0,0%,100%,.3);
        }

Copier après la connexion

Regardez le code de style ci-dessus. Dans le corps, vh est la taille de la fenêtre d'affichage, 100 est 100 %, et l'arrière-plan est défini sur une position fixe, couvrant tout l'élément dans p, définissez la couleur d'arrière-plan ; au centre puis définissez son style de boîte ; puis Cela ressemble à ceci :

Le petit verre transparent brillant vient de sortir, alors commençons notre traitement du verre dépoli

Étape 2 : Paramètres du verre dépoli d'arrière-plan flou

En CSS, il existe le même paramètre de flou, qui est

filter : flou (20px) La valeur après

<🎜 ; > est la taille du flou. Plus la valeur est grande, plus il est flou, mais actuellement, seul le px est pris en charge, pas le pourcentage

Nous ne pouvons pas ajouter directement ce style à p, car cela le ferait ; même les sous-éléments sont flous. À ce stade, nous pouvons utiliser des pseudo-éléments , c'est-à-dire :

:before

Avant d'utiliser des pseudo-éléments, nous devons ajouter un positionnement relatif à p. . Puisque le flou des pseudo-éléments débordera de toute la boîte p, pour être beau et atmosphérique, nous devons ajouter

overflow

:hidden à p; >

Le pseudo élément de p :

À partir du code CSS ci-dessus, nous pouvons voir que le flou défini chevauche p et que l'image d'arrière-plan est la même que le corps. L'effet final est le suivant :

  overflow: hidden;
  position: relative;

Copier après la connexion

   p::before{
            content: &#39;&#39;;
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            z-index: -1;
            filter: blur(20px);
            margin: -20px;
            background: url("http://www.jackzxl.net/wp-content/MyFile/2016/09/iphone.jpg") fixed 0 center;
            background-size: cover;
        }

Copier après la connexion

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!