zoukankan      html  css  js  c++  java
  • [css filter]filter在界面实现滤镜效果

      最近逛当当,发现当当尾品会的首页推荐最底端的商品链接是灰色的图片,然后鼠标hover之后就会变成正常的彩色

      肯定不是通过img来改变的,然后直接看了一下源码,其实是用的filter属性 _(:з」∠)_又涨姿势了

      然后在网上看了些东西,算是明白了一点了

      filter属性:

        不知道怎么回事W3S上找了一下,没找到

        然后自己看了一下定义,其实就是滤镜

        好像是CSS3中新添加的属性值,可以实现在前端界面对网页色度、亮度、灰度、模糊度等等的直接调节

        具体使用方法就是 .class{

                filter:(........);  //......里面是filter的参数,不同参数的使用方法不一样

            }

        

        咳咳,李尼玛同学的聪明才智,直接在百度首页上添加的filter属性,然后截图如下:代码也就不写了

        

    【反色】:就是黑色变白色,蓝色变红色之类的...

        

    【色彩饱和度】

         

    【灰度】这个是最常用的,像那种因为某些原因而要全网站灰色调,还有一些hover特效都是用这个属性做的

        

    【亮度】

        

    【透明度】

        

    【影子 shadow】这个也比较常用  不过里面的参数比较多,各个参数也没太分清,应该就是控制影子宽度或者方向用的

        

    【色相反转度】

        

        嗯,就是这样,直接用属性更改变色度,虽然没有PS的直接效果好,但是通过简单的代码实现已经很赞了

        最近在看些响应式布局的书,之前一直会写响应式,用metro或者是bootstrap,这回一看哦,原来是这么个原理,现在的感觉就是豁然开朗,感觉好爽,哈哈哈

        

                                                                        OurEDA  李明夕

  • 相关阅读:
    内存管理
    git学习思维导图
    shell编程 条件判断式----利用 case ..... esac 判断
    shell编程 条件判断式----利用 if .... then ----多重
    shell编程 Shell script 的默认变量($0, $1...)
    VxWorks实验六 基于优先级的抢占式调度及实验的源程序和实验步骤
    Linux下FTP用户的使用配置
    Linux 下 FTP虚拟用户的使用配置
    Linux 常用命令
    实验一 用户界面与Shell命令
  • 原文地址:https://www.cnblogs.com/limingxi/p/3434363.html
Copyright © 2011-2022 走看看