7

CSS3 之 filter 属性 | 月光中的污点

 3 years ago
source link: https://www.extlight.com/2021/03/18/CSS3-%E4%B9%8B-filter-%E5%B1%9E%E6%80%A7/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
CSS3 之 filter 属性
loading.jpg

『 CSS3 之 filter 属性 』

2021 年 03 月 18 日78 浏览

在编写前端页面的动画效果时，或多或少会用到 filter 属性，由于其属性值过多，故本篇用于整理和记录其相关资料。

filter属性定义了元素(通常是)的可视效果。

属性值如下：

属性值描述none默认值，没有效果。blur(px)给图像设置高斯模糊，则默认值是 0。brightness(%)给图片应用一种线性乘法，使其看起来更亮或更暗，默认值是 1。contrast(%)调整图像的对比度，默认值是 1。grayscale(%)将图像转换为灰度图像，默认值是 0。hue-rotate(deg)给图像应用色相旋转，默认值是 0deg。invert(%)反转输入图像，默认值是 0。opacity(%)转化图像的透明程度，默认值是 1。saturate(%)转换图像饱和度，默认值是 1。sepia(%)将图像转换为深褐色，默认值是 0。

注意：滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

三、演示代码

点击代码块下方运行按钮可查看属性效果：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            margin: 4rem auto;
            width: 100%;
            height: auto;
            text-align: center;
        }

.box {
            display: inline-block;
            margin: 1rem;
        }

.box ul {
            margin: 0;
            padding: 0;
            list-style: none;
            text-align: left;
        }

.box ul li {
            margin: .25rem 0;
            padding: .25rem;
            cursor: pointer;
        }

.box ul li:hover {
            background-color: #eee;
        }

ul li.active {
            background-color: #eee;
        }

.box img {
            width: 260px;
            height: 260px;
        }

</style>
</head>
<body>
    <div class="container">
        <h3>点击左侧属性显示效果</h3>
        <div class="box">
            <ul>
                <li data-p="blur(5px)">filter: blur(5px)</li>
                <li data-p="brightness(.5)">filter: brightness(.5)</li>
                <li data-p="contrast(.5)">filter: contrast(.5)</li>
                <li data-p="grayscale(1)">filter: grayscale(1)</li>
                <li data-p="hue-rotate(90deg)">filter: hue-rotate(90deg)</li>
                <li data-p="invert(.4)">filter: invert(.4)</li>
                <li data-p="opacity(.4)">filter: opacity(.4)</li>
                <li data-p="saturate(.5)">filter: saturate(.5)</li>
                <li data-p="sepia(.5)">filter: sepia(.5)</li>
            </ul>
        </div>
        <div class="box">
            <div class="origin">
                <img src="https://tva3.sinaimg.cn/large/87c01ec7gy1frmmmwb3anj21hc0u0b2a.jpg" alt="">
            </div>
            <div>原图</div>
        </div>
        <div class="box">
            <div id="filter">
                <img src="https://tva3.sinaimg.cn/large/87c01ec7gy1frmmmwb3anj21hc0u0b2a.jpg" alt="">
            </div>
            <div id="info">效果图</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script>
        $(function() {
                let $lis = $("li");
               $lis.on("click", function() {
                    $lis.removeClass("active");
                    let p = $(this).addClass("active").data("p");
                    $("#filter").css({"filter": p});
                    $("#info").text("filter: " + p);
               });
        });
    </script>
</body>
</html>
复制

四、参考资料

菜鸟教程


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK