JavaScript|你不知道的CSS属性-Filter(滤镜)

欢迎点击「算法与编程之美」↑关注我们!

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

问题描述

当在拍照、p图时,有一个东西必不可少那就是滤镜,适当地运用滤镜可以使图片更加的赏心悦目,而作为网页的美化技术来说,CSS同样也具有滤镜的属性。CSS 3 Filter属性就提供了相当于滤镜的模糊和改变元素颜色的功能,使图像产生更加绚丽多彩的效果。接下来就来学习一下CSS3的Filter属性。

具体内容

1滤镜属性简介

CSS滤镜的语法:

filter: none | blur() | brightness() |  contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() |  opacity() | saturate() | sepia() | url();

CSS滤镜参数的含义如下表:

参数名称

效果

blur()

设置图片的高斯模糊效果

brightness()

设置图片的明暗度效果

contrast()

设置图片的对比度

grayscale()

将图片转化为灰度图像

drop-shadow()

设置图片的一个阴影效果

hue-rotate()

给图片应对色相旋转

invert()

反转输入图像

opacity()

转化图像的透明程度

saturate()

转化图像的饱和度

sepia()

将图像转化为深褐色

2 基本滤镜效果

接下来给大家介绍几个实用的滤镜效果语法。

2.1 高斯模糊(blur)滤镜

blur滤镜用于设置图片的高斯模糊效果。blur滤镜的语法格式如下:

filter : blur (px)

其中px的值越大,图像就越模糊。

示例:

<!DOCTYPE html>

<html>

       <head>

              <meta  charset="UTF-8">

              <title>高斯模糊</title>

              <style  type="text/css">

                     img{

                            width:  20%;

                            height:  auto;

                     }

                     .blur{

                            -webkit-filter:  blur(4px);

                            filter:  blur(4px);

                     }

              </style>

       </head>

       <body>

              原图:

              <img  src="img/xiaozhan.jpg" alt="原图"  >

              高斯模糊:

              <img  src="img/xiaozhan.jpg" alt="高斯模糊">

       </body>

</html>

效果:

图1.1 高斯模糊效果图

2.2 明暗度(brightness)滤镜

brightness滤镜用于设置图片的明暗度效果。brightness滤镜的语法如下:

filter : brightness (%)

当参数设置为0%时,图像会变成全黑;当参数为100%时图像无变化;当参数超过100%时图像会比原来还要亮。

示例:

<!DOCTYPE html>

<html>

       <head>

              <meta  charset="UTF-8">

              <title>高斯模糊</title>

              <style  type="text/css">

                     img{

                            width:  20%;

                            height:  auto;

                     }

                     .a{

                            -webkit-filter:  brightness(150%);

                            filter: brightness(150%);

                     }

                     .b{

                            -webkit-filter:  brightness(30%);

                            filter:  brightness(30%);

                     }

              </style>

       </head>

       <body>

              原图:

              <img  src="img/xiaozhan.jpg" alt="原图"  >

         图像变亮:

         <img src="img/xiaozhan.jpg"  alt="图像变亮">

         图像变暗:

         <img src="img/xiaozhan.jpg"  alt="图像变暗">

       </body>

</html>

效果:

图2.2 明暗度滤镜效果图

2.3  对比度滤镜

contrast滤镜用于设置图像的对比度效果。其语法格式如下:

filter : contrast (%)

当参数设置为0%时,图像会变成全黑;当参数为100%时图像无变化。

示例:

<!DOCTYPE html>

<html>

       <head>

              <meta  charset="UTF-8">

              <title>高斯模糊</title>

              <style  type="text/css">

                     img{

                            width:  20%;

                            height:  auto;

                     }

                     .a{

                            -webkit-filter:  contrast(150%);

                            filter:  contrast(150%);

                     }

                     .b{

                            -webkit-filter:  contrast(30%);

                            filter:  contrast(30%);

                     }

              </style>

       </head>

       <body>

              原图:

              <img  src="img/xiaozhan.jpg" alt="原图"  >

         图像变亮:

         <img src="img/xiaozhan.jpg"  alt="图像变亮">

         图像变暗:

         <img src="img/xiaozhan.jpg"  alt="图像变暗">

       </body>

</html>

效果:

图2.3 对比度滤镜效果

2.4  阴影(drop-shadow)滤镜

drop-shadow滤镜用于设置图像的阴影效果,使元素内容在页面上产生投影,从而实现立体的效果,其语法格式如下:

arrayObject.length;

示例:

<!DOCTYPE html>

<html>

       <head>

              <meta  charset="UTF-8">

              <title>高斯模糊</title>

              <style  type="text/css">

                     img{

                            width:  20%;

                            height:  auto;

                     }

                     .a{

                            -webkit-filter:  drop-shadow(15px 15px 20px grey);

                            filter:  drop-shadow(15px 15px 20px grey);

                     }

                     .b{

                            -webkit-filter:  drop-shadow(30px 30px 10px blue);

                            filter:  drop-shadow(30px 30px 10px blue);

                     }

              </style>

       </head>

       <body>

              原图:

              <img  src="img/xiaozhan.jpg" alt="原图"  >

                    灰色阴影:

         <img src="img/xiaozhan.jpg"  alt="灰色阴影">

                   蓝色阴影:

         <img src="img/xiaozhan.jpg"  alt="蓝色阴影">

       </body>

</html>

效果:

图2.4 阴影滤镜效果

3 复合滤镜效果的使用

上面主要是介绍了一些基础的单个滤镜的效果,而综合的使用滤镜效果可以产生一些奇特的动画效果。接下来就来制作一个电闪雷鸣的动画效果吧,在此次的例子里面主要使用了明暗度滤镜、对比度滤镜和深褐色滤镜。

示例:

<!DOCTYPE html>

<html>

       <head>

              <meta  charset="UTF-8">

              <title>动态效果</title>

              <style>

                     body  {

                            text-align:  center;

                     }

                     img  {

                            max-width:  100%;

                            width:1000px;

                     }

                     img  {

                            -webkit-animation:  haunted 4s infinite;

                            animation:  haunted 4s infinite;

                     }

                     @keyframes  haunted{

                            0%  {

                                   -webkit-filter:  brightness(20%);

                                   filter:  brightness(20%);

                            }

                            45% {

                                   -webkit-filter:  brightness(20%);

                                   filter:  brightness(20%);

                            }

                            50%  {

                                   -webkit-filter:  sepia(1) contrast(2) brightness(200%);

                                   filter:  sepia(1) contrast(2) brightness(200%);

                            }

                            60%  {

                                   -webkit-filter:  sepia(1) contrast(2) brightness(200%);

                                   filter:  sepia(1) contrast(2) brightness(200%);

                            }

                            65%  {

                                   -webkit-filter:  brightness(20%);

                                   filter:  brightness(20%);

                            }

                            95%  {

                                   -webkit-filter:  brightness(20%);

                                   filter:  brightness(20%);

                            }

                            95%  {

                                   -webkit-filter:  brightness(400%);

                                   filter:  brightness(400%);

                            }

                     }

              </style>

       </head>

       <body>

              <img  src="../img/shandian.jpg"/>

       </body>

</html>

效果:

图3.1 动态效果过程1

图3.2 动态效果过程2

图3.3 动态效果过程3

在上述代码中通过运用@keyframes来规定动画的规则。通过在不同时间点运用不同的滤镜来造成图片动态的效果。

结语

CSS3的滤镜的强大属性可以使图片更加美观,同时运用动画设置图片的复合滤镜也可以使图片动起来。虽然属性的效果可能比不上PS,但是运用的好的话也可以在节约很多空间下和P图的时间,在网页的制作上,可以把一张图片变成多张图片。

END

编  辑   |   王楠岚

责  编   |   杨金月

 where2go 团队


   

微信号:算法与编程之美          

长按识别二维码关注我们!

温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!

发布了720 篇原创文章 · 获赞 57 · 访问量 10万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览