CSS3 filter(滤镜) 百度汶川地震页面的使用

filter（滤镜）在生活中的使用
今天是2018年5月12号，2008年汶川地震10年。特地去搜索了一下汶川地震。发现这个页面全部灰色的，突然想了一下，他是什么实现的。第一感觉是css3的filter滤镜效果做的。实时怎么确实也是的。
这里写图片描述

发现在这样的有单独内嵌的一段css代码，去掉就恢复彩色了。就是css3 滤镜代码。我单独拔下来了

.baike-app-view .memorial {
    filter:grayscale(100%);
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter:grayscale(1)
}

关于css3的filter 滤镜

这里写图片描述
还是要注意兼容性，现在的手机端基本全部支持没问题。但是ie确实还是有点坑爹。

语法

      elem {
        filter: none | <filter-function > [ <filter-function> ]* 
      }

其默认值是none，他不具备继承性，其中filter-function一个具有以下值可选

grayscale 灰度
sepia 深褐色（求专业指点翻译）
saturate饱和度 (默认值1 百分之百饱和)
hue-rotate 色相旋转
invert反色
opacity透明度
brightness亮度
contrast对比度
blur模糊
drop-shadow阴影

这些可选的值可以单个使用也可以组合使用
.img {
-webkit-filter:saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) invert(0.2) brightness(.9);
}

这里写图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>filter的使用</title>
    <style>
    img {
        width: 200px;
        margin: 10px;
    }

    .item1 .img2 {
        /* grayscale灰度 */
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
    }

    .item2 .img2 {
        /*深褐色（求专业指点翻译）*/
        filter: sepia(0.5);
        -webkit-filter: sepia(0.5);
    }

    .item3 .img2 {
        /* saturate饱和度 */
        filter: saturate(3);
        -webkit-filter: saturate(3);
    }

    .item4 .img2 {
        /* hue-rotate 色相旋转 */
        filter: hue-rotate(60deg);
        -webkit-filter: hue-rotate(60deg);
    }

    .item5 .img2 {
        /* invert反色 */
        filter: invert(1);
        -webkit-filter: invert(1);
    }

    .item6 .img2 {
        /*opacity透明度*/
        filter: opacity(0.8);
        -webkit-filter: opacity(0.8);
    }

    .item7 .img2 {
        /*brightness亮度*/
        filter: brightness(0.5);
        -webkit-filter: brightness(0.5);
    }

    .item8 .img2 {
        /* contrast对比度 */
        filter: contrast(2);
        -webkit-filter: contrast(2);
    }

    .item9 .img2 {
        /* blur模糊 */
        filter: blur(2px);
        -webkit-filter: blur(2px);
    }

    .item10 .img2 {
        /* drop-shadow阴影 */
        filter: drop-shadow(5px 5px 5px #ccc);
        -webkit-filter: drop-shadow(5px 5px 5px #ccc);
    }
    </style>
</head>

<body>
    <div class="item1"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2">
        <p>
            filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
        </p>
    </div>
    <div class="item2"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2">
        <p>
            filter: sepia(0.5); -webkit-filter: sepia(0.5);
        </p>
    </div>
    <div class="item3"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2">
        <p>
            filter: saturate(0.5); -webkit-filter: saturate(0.5);
        </p>
    </div>
    <div class="item4"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2">
        <p>
            filter: hue-rotate(0.5); -webkit-filter: hue-rotate(0.5);
        </p>
    </div>
    <div class="item5"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2">
        <p>
            filter: invert(0.5); -webkit-filter: invert(0.5);
        </p>
    </div>
    <div class="item6"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2">
        <p>
            filter: opacity(0.5); -webkit-filter: opacity(0.5);
        </p>
    </div>
    <div class="item7"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2">
        <p>
            filter: brightness(0.5); -webkit-filter: brightness(0.5);
        </p>
    </div>
    <div class="item8"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2">
        <p>
            filter: contrast(0.5); -webkit-filter: contrast(0.5);
        </p>
    </div>
    <div class="item9"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2">
        <p>
            filter: blur(0.5); -webkit-filter: blur(0.5);
        </p>
    </div>
    <div class="item10"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2">
        <p>
            filter: drop-shadow(0.5); -webkit-filter: drop-shadow(0.5);
        </p>
    </div>
</body>

</html>

其实个人觉得可以使用 fliter效果加上 canvas 前端也可以做到美图秀秀的功能。fliter 内部的实现是大学的线性代数和矩阵的知识，比如矩阵的乘法，置换等等。

CSS3 filter(滤镜) 百度汶川地震页面的使用

猜你喜欢