Heim > Artikel > Web-Frontend > Einfaches Beispiel für den CSS3-Filtereffekt

Einfaches Beispiel für den CSS3-Filtereffekt

高洛峰Original: 2017-03-04 10:41:291588Durchsuche

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.

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>

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

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

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

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

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

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

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

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detailliertes Beispiel für das Schreibformat im CSS-StilNächster Artikel：Detailliertes Beispiel für das Schreibformat im CSS-Stil

In Verbindung stehende Artikel

Mehr sehen