Maison > Article > interface Web > Explication détaillée de l'exemple de code pour créer un effet de verre dépoli avec CSS3
Explication détaillée de l'exemple de code pour créer un effet de verre dépoli avec CSS3
- 黄舟original
- 2017-06-04 11:34:222697parcourir
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 :
<.>
<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> 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);
}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 :
É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 :
:beforeAvant 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 Le pseudo élément de p :overflow: hidden; position: relative;
p::before{
content: '';
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;
}
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!