Exemple simple d'effet de filtrage CSS3-tutoriel CSS-php.cn

Exemple simple d'effet de filtrage CSS3

高洛峰

Libérer： 2017-03-04 10:41:29

original

1622 Les gens l'ont consulté

L'éditeur suivant vous apportera un exemple simple d'effet de filtrage CSS3. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil.

Exemple simple deffet de filtrage CSS3

L'image ci-dessus est l'effet de filtre des nouvelles fonctionnalités de CSS3. Après avoir appris cela, nous, les grands webphiles qui aiment. beauté et beauté, ne sera-t-il pas possible d'embellir parfaitement les photos avec du code ~~

D'accord, implémentons d'abord le cadre blanc derrière la photo,

<style>
#p1{   

　　　　　　　　　　/*给p定义宽高和颜色*/   


　　　　　　　　　　width: 200px;   
　　　　　　　　　　height: 250px;   
　　　　　　　　　　background: white;    

　　　　　　　　　/* 内填充距离照片为15px ，文字居中*/   
　　　　　　　　　　padding: 15px;   

　　　　　　　　　　text-align: center;   

　　　　　　/*　　把白色背景旋转-10deg  */   

　　　　　　　　　　-webkit-transform: rotate(-10deg);   

　　　　　　/*给背景一个阴影的效果*/   
　　　　　　　　　　box-shadow: 4px 4px 4px #666;   
　　　　　　　　　　float: left;   
　　　　　　　　　　}   



</style>
<BR>
<body><BR>
<p id="p1">
<img  src="img/001V28Mwty6Fww02IiNad&690.jpg" alt="Exemple simple d'effet de filtrage CSS3" >
<p>灰色滤镜</p>
</p>
<BR>
</body>

Copier après la connexion

Mettez le blanc Une fois le cadre d'arrière-plan écrit, il est temps d'appliquer le filtre

Prenons d'abord la première photo, artistique en noir et blanc

#p1 img{   

/*把p1里面的图片百分百，等同于相对于在p1里面百分比放大填充*/   
width: 100%;　　　　　　　   
/*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/　   
-webkit-filter: grayscale(1); 　　}

Copier après la connexion

La deuxième photo, Euh... vieilles photos.

#p1 img{   
            width: 100%;   
            -webkit-filter: sepia(1);   
        }

Copier après la connexion

La troisième photo, couleur inversée ? Je ne sais pas non plus de quelle couleur il s'agit

#p1 img{   
            width: 100%;   
            -webkit-filter: hue-rotate(200deg);   
        }

Copier après la connexion

La quatrième photo semble être recouverte d'une couche de brouillard blanc

#p1 img{   
            width: 100%;   
            -webkit-filter: opacity(0.5);   
        }

Copier après la connexion

Il y a aussi une photo qui n'est pas affichée dans le rendu, mais le code de l'effet de flou est le suivant

#p4 img{   
            width: 100%;   
            -webkit-filter: opacity(0.5);   
        }

Copier après la connexion

D'accord, j'ai fini de partager mon filtre, et le la prochaine étape est d'aller à la belle image

L'exemple simple ci-dessus de l'effet de filtrage de CSS3 est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère aussi que tout le monde le fera. prend en charge le site Web PHP chinois.

Pour des exemples plus simples d'effets de filtrage CSS3 et des articles connexes, veuillez faire attention au site Web PHP chinois !