CSS3滤镜系统（filter）

最新推荐文章于 2022-12-30 09:45:01 发布

安和同学

最新推荐文章于 2022-12-30 09:45:01 发布

阅读量263

点赞数 1

分类专栏：日常小记文章标签： css3 滤镜系统 filter

本文链接：https://blog.csdn.net/amdd9582/article/details/86646908

版权

日常小记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

拉走代码看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <style>
    *{
        padding: 0;
        margin: 0;
    }
    body{
        width: 100vw;
        height: 100vh;
    }
    .filter{
        float: left;
        width: 45vw;
        height: 40vh;
        margin: 0.5vh 1.5vw;
        cursor: pointer;
        border-radius: 5px;
        border: 1vw solid #272727;
        transition: .5s all;
        background: url(http://zmdd95.com/images/2.jpg) no-repeat center center;
    }
    .filter h3{
        font: bold 45px/36vh "微软雅黑";
        text-align: center;
    }
    .blur:hover{
        filter: blur(4px);
    }
   .brightness:hover{
        filter: brightness(0.30);
    }
   .contrast:hover{
        filter: contrast(180%);
    }
   .grayscale:hover{
        filter: grayscale(100%);
    }
   .invert:hover{
        filter: invert(100%);
    }
   .opacity:hover{
        filter: opacity(50%);
    }
   .saturate:hover{
        filter: saturate(7);
    }
   .sepia:hover{
        filter: sepia(100%);
    }
   .shadow:hover{
        filter: drop-shadow(8px 8px 10px #f25);
    }
   .hue-rotate:hover{
        filter: hue-rotate(200deg);
   }
    </style>
</head>
<body>
<div class="container">
   <div class="filter blur">
      <h3>blur(高斯模糊)</h3>
    </div>
   <div class="filter brightness">
      <h3>brightness(亮度)</h3>
    </div>
   <div class="filter contrast">
      <h3>contrast(对比度)</h3>
    </div>
   <div class="filter grayscale">
      <h3>grayscale(灰度图像)</h3>
    </div>
   <div class="filter invert">
      <h3>invert(反转输入图像)</h3>
    </div>
   <div class="filter opacity">
      <h3>opacity(透明度)</h3>
    </div>
   <div class="filter saturate">
      <h3>saturate(饱和度)</h3>
    </div>
   <div class="filter sepia">
      <h3>sepia(深褐色)</h3>
    </div>
   <div class="filter shadow">
      <h3>shadow(阴影)</h3>
    </div>
   <div class="filter hue-rotate">
      <h3>hue-rotate(色相反转)</h3>
    </div>
</div>
</body>
</html>

安和同学

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3滤镜系统（filter）

拉走代码看效果&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;style&gt; *{ padding: 0; margin: 0; } body{ width
复制链接

扫一扫