css3的过滤效果的简单示例-tutorial css-php.cn

css3的过滤效果的简单示例

高洛峰

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

asal

1624 orang telah melayarinya

下面小编就为大家带来一篇css3的过滤效果简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

css3的过滤效果的简单示例

上面的图片就是css3新特性的滤镜效果，学会了这些那么我们这群爱美爱帅的大web是不是就可以完美的用代码实现照片美化了捏~~

好，咱们先把照片后面的白框实现，

<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">
<p>灰色滤镜</p>
</p>
<BR>
</body>

Salin selepas log masuk

把白色的背景框写好之后，接下来就该到滤镜了

首先来第一张，艺术的黑白色

#p1 img{   

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

Salin selepas log masuk

第二张照片，额...老照片.

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

Salin selepas log masuk

第三张照片，反色？我也不太清楚啥颜色

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

Salin selepas log masuk

第四张照片，仿佛罩了一层白雾

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

Salin selepas log masuk

还有一张照片的效果图上没有，是模糊效果代码如下

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

Salin selepas log masuk

好了，我的滤镜分享完毕，接下来美图去了

以上这篇css3的过滤效果简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多css3的过滤效果的简单示例相关文章请关注PHP中文网！

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

css3的过滤效果的简单示例