热门推荐

    [CSS3] css3 filter属性的使用简介

    百宝网 Lv.7 显示全部楼层 发表于 2021-8-19 19:47:50

    一、前言


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

    二、介绍


    filter属性定义了元素(通常是)的可视效果。
    属性值如下:
       
            
                [td]属性值[/td]
                [td]描述[/td]
            
       
       
            
                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)。

    三、演示代码

    1. <!DOCTYPE html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Document</title>
    6.     <style>
    7.         .container {
    8.             margin: 4rem auto;
    9.             width: 100%;
    10.             height: auto;
    11.             text-align: center;
    12.         }

    13.         .box {
    14.             display: inline-block;
    15.             margin: 1rem;
    16.         }

    17.         .box ul {
    18.             margin: 0;
    19.             padding: 0;
    20.             list-style: none;
    21.             text-align: left;
    22.         }

    23.         .box ul li {
    24.             margin: .25rem 0;
    25.             padding: .25rem;
    26.             cursor: pointer;
    27.         }

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

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

    34.        .box img {
    35.             width: 260px;
    36.             height: 260px;
    37.         }

    38.     </style>
    39. </head>
    40. <body>
    41.     <div class="container">
    42.         <h3>点击左侧属性显示效果</h3>
    43.         <div class="box">
    44.             <ul>
    45.                 <li data-p="blur(5px)">filter: blur(5px)</li>
    46.                 <li data-p="brightness(.5)">filter: brightness(.5)</li>
    47.                 <li data-p="contrast(.5)">filter: contrast(.5)</li>
    48.                 <li data-p="grayscale(1)">filter: grayscale(1)</li>
    49.                 <li data-p="hue-rotate(90deg)">filter: hue-rotate(90deg)</li>
    50.                 <li data-p="invert(.4)">filter: invert(.4)</li>
    51.                 <li data-p="opacity(.4)">filter: opacity(.4)</li>
    52.                 <li data-p="saturate(.5)">filter: saturate(.5)</li>
    53.                 <li data-p="sepia(.5)">filter: sepia(.5)</li>
    54.             </ul>
    55.         </div>
    56.         <div class="box">
    57.             <div class="origin">
    58.                 <img src="https://tva3.sinaimg.cn/large/87c01ec7gy1frmmmwb3anj21hc0u0b2a.jpg" alt="">
    59.             </div>
    60.             <div>原图</div>
    61.         </div>
    62.         <div class="box">
    63.             <div id="filter">
    64.                 <img src="https://tva3.sinaimg.cn/large/87c01ec7gy1frmmmwb3anj21hc0u0b2a.jpg" alt="">
    65.             </div>
    66.             <div id="info">效果图</div>
    67.         </div>
    68.     </div>
    69.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    70.     <script>
    71.         $(function() {
    72.                 let $lis = $("li");
    73.                $lis.on("click", function() {
    74.                     $lis.removeClass("active");
    75.                     let p = $(this).addClass("active").data("p");
    76.                     $("#filter").css({"filter": p});
    77.                     $("#info").text("filter: " + p);
    78.                });
    79.         });
    80.     </script>
    81. </body>
    82. </html>
    复制代码

    以上就是css3 filter属性的使用简介的详细内容,更多关于css3 filter属性的资料请关注百宝网其它相关文章!
    回复

    使用道具 举报

    发表回复

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

  • 返回顶部

  • 快速回复 返回顶部 返回列表