A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 gz_xudada 于 2018-2-9 09:52 编辑

浅谈CSS3 Filter10种特效()
继续我们上次的学习,5种效果,
今天我们先学习继续学习后面5种效果.
1.1. filter取值1.1.1. opacity透明度
opacity的作用是改变图片的透明度
语法:
.opacity{
    -webkit-filter:opacity(.2);
}
取值:
  • 默认值100%;
  • 0~1或者0~100%;
  • 如果用小数的时候,可以省略0,比如0.5可以写成.5
1.1.2. brightness亮度
brightness的作用是改变图片的亮度
语法:
.brightness{
    -webkit-filter:brightness(.5);
}
取值:
  • 默认值100%;
  • 0~1或者0~100%;
  • 如果用小数的时候,可以省略0,比如0.5可以写成.5
1.1.3. contrast对比度
contrast的作用是改变图片的对比度
.contrast{
    -webkit-filter:contrast(2);
}
默认值:
  • 值是0%的话,图像会全黑。
  • 值是100%,图像不变。
  • 值可以超过100%,意味着会运用更低的对比。
  • 若没有设置值,默认是1,也就是100%
1.1.4. blur模糊
给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊
语法:
.blur{
    -webkit-filter:blur(3px);
}
取值:
  • 如果没有设定值,则默认是0
  • 这个参数可设置css长度值,但不接受百分比值。
1.1.5. drop-shadow阴影
drop-shadow的效果类似于box-shadow,作用是给图片加阴影效果
语法:
.drop-shadow{
    -webkit-filter:drop-shadow(5px 5px 5px #ccc);
}
取值:
参数如下:
  • <offset-x> <offset-y> (必须)
            这是设置阴影偏移量的两个 <length>. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位.
           如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>,会有模糊效果).
  • <blur-radius> (可选)
           这是第三个code><length>. 值越大,越模糊,则阴影会变得更大更淡.不允许负值 若未设定,默认是0 (则阴影的边界很锐利).
  • <spread-radius> (可选)
          这是第四个 <length>. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小).
注意: Webkit, 以及一些其他浏览器 不支持第四个长度,如果加了也不会渲染。

  • <color> (可选)
         查看 <color>该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)Trident (Internet Explorer)中, 会应用colorcolor属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。
1.1.6. 通过多个filter,实现自定义效果
以上所列出的就是CSS3 Filter能够实现的10种效果,当然,如果你需要什么样的效果还得自己设定。
例如:
.custom{
-webkit-filter:saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) invert(0.2) brightness(.9);
}
1.1.7. 测试代码与效果





1 个回复

倒序浏览
我来占层楼啊  
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马