Einfaches Beispiel für den CSS3-Filtereffekt-CSS-Tutorial-php.cn

Einfaches Beispiel für den CSS3-Filtereffekt

高洛峰

Freigeben： 2017-03-04 10:41:29

Original

1624 Leute haben es durchsucht

Der folgende Editor zeigt Ihnen ein einfaches Beispiel für den CSS3-Filtereffekt. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Editor, um einen Blick darauf zu werfen.

Einfaches Beispiel für den CSS3-Filtereffekt

Das Bild oben zeigt den Filtereffekt der neuen Funktionen von CSS3, nachdem wir das gelernt haben Schönheit und Schönheit, wird es nicht möglich sein, Fotos mit Code perfekt zu verschönern ~~

Okay, lasst uns zuerst den weißen Rahmen hinter dem Foto implementieren,

<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="Einfaches Beispiel für den CSS3-Filtereffekt" >
<p>灰色滤镜</p>
</p>
<BR>
</body>

Nach dem Login kopieren

Setzen Sie das Weiß ein. Nachdem der Hintergrundrahmen geschrieben ist, ist es Zeit, den Filter anzuwenden

Zuerst machen wir das erste Foto, künstlerisches Schwarzweiß

#p1 img{   

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

Nach dem Login kopieren

Das zweite Foto, Ähm...alte Fotos.

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

Nach dem Login kopieren

Das dritte Foto, umgekehrte Farbe? Ich bin mir auch nicht sicher, welche Farbe es hat

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

Nach dem Login kopieren

Das vierte Foto scheint mit einer Schicht weißen Nebels bedeckt zu sein

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

Nach dem Login kopieren

Außerdem gibt es ein Foto, das nicht im Rendering angezeigt wird, aber der Code für den Unschärfeeffekt lautet wie folgt

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

Nach dem Login kopieren

Okay, ich habe die Freigabe meines Filters abgeschlossen Der nächste Schritt besteht darin, zu dem schönen Bild zu gehen

Das obige einfache Beispiel für den Filtereffekt von CSS3 ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass dies jeder tun wird Unterstützen Sie die chinesische PHP-Website.

Weitere einfache Beispiele für CSS3-Filtereffekte und verwandte Artikel finden Sie auf der chinesischen PHP-Website!