CSS滤镜介绍

马黑黑 发表于 2022-3-15 22:24

本帖最后由马黑黑于 2022-3-15 22:43 编辑 <br /><br /><style>
.tblBox {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
.tblBox td, .tblBox th {
border: 1px solid #ddd;
padding: 8px;
}
.tblBox tr:nth-child(even){background-color: #f2f2f2;}
.tblBox tr:hover {background-color: #ddd;}
.tblBox th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #4CAF50;
color: white;
}
</style>

<table class="tblBox">
<tbody><tr>
<th>滤镜</th>
<th>语法</th>
<th>参数</th>
<th>说明</th>
</tr>
<tr>
<td>高斯模糊</td>
<td>blur()</td>
<td>px</td>
<td>值越大模糊度越高</td>
</tr>
<tr>
<td>亮度</td>
<td>brightness()</td>
<td>x%</td>
<td>默认值100%。0%无亮度，>=100%为更亮</td>
</tr>
<tr>
<td>对比度</td>
<td>contrast()</td>
<td>x%</td>
<td>默认值100%，0%全黑，>=100%对比度更高</td>
</tr>
<tr>
<td>阴影</td>
<td>drop-shadow()</td>
<td>h v blur spread color</td>
<td>水平+垂直+模糊+扩散+颜色</td>
</tr>
<tr>
<td>灰度</td>
<td>grayscale()</td>
<td>x%</td>
<td>默认值0%，100%变成黑白</td>
</tr>
<tr>
<td>色相旋转</td>
<td>hue-rotate()</td>
<td>xdeg</td>
<td>默认值0deg，最大值360deg</td>
</tr>
<tr>
<td>颜色反转</td>
<td>invert()</td>
<td>x%</td>
<td>默认值0%，最大值100%</td>
</tr>
<tr>
<td>不透明度</td>
<td>opacity()</td>
<td>x%</td>
<td>默认值100%, 0%完全透明</td>
</tr>
<tr>
<td>饱和度</td>
<td>saturate()</td>
<td>x%</td>
<td>默认值100%，0%完全不饱和</td>
</tr>
<tr>
<td>棕褐色</td>
<td>sepia()</td>
<td>x%</td>
<td>默认值0%，100%完全变为棕褐色</td>
</tr>
</tbody></table>

马黑黑 发表于 2022-3-15 22:32

马黑黑 发表于 2022-3-15 22:33

上楼参考代码：

<style>

#filterBox { width: 760px; display: flex; flex-wrap: wrap; }
#filterBox img { margin: 10px; width: 360px; height: 360px; }
#filterBox img:hover { filter: initial; } /* 鼠标滑过返回滤镜默认值：原图样式 */
.pblur { filter: blur(2px); } /* 高斯模糊 */
.pbrightness { filter: brightness(120%); } /* 亮度调整*/
.pcontrast { filter: contrast(120%); } /* 对比度*/
.pgrayscale { filter: grayscale(100%); } /* 灰度 */
.phue-rotate { filter: hue-rotate(180deg); } /* 色相旋转单位有角度deg*/
.pinvert { filter: invert(100); } /* 颜色反转*/
.popacity { filter: opacity(50%); } /* 不透明度 */
.psaturate { filter: saturate(50%); } /* 饱和度 */
.psepia { filter: sepia(50%); } /* 棕褐色*/
.pdrop-shadow { filter: drop-shadow(2px 2px 4px #111); }

</style>

<div id="filterBox">
<img class="pblur" alt="" title=" blur(2px) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
<img class="pbrightness" alt="" title=" brightness(120%) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
<img class="pcontrast" alt="" title=" contrast(120%) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
<img class="pdrop-shadow" alt="" title=" drop-shadow(2px 2px 4px #111)" src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
<img class="pgrayscale" alt="" title=" grayscale(100%) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
<img class="phue-rotate" alt="" title=" hue-rotate(180deg) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
<img class="pinvert" alt="" title=" invert(100) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
<img class="popacity" alt="" title=" opacity(50%) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
<img class="psaturate" alt="" title=" saturate(50%) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
<img class="psepia" alt="" title=" sepia(50%) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
</div>

马黑黑 发表于 2022-3-15 22:45

CSS滤镜主要用于图片修饰，但也可以作用于其他可视元素及其元素所包含的内容（我们此前曾用来演示过文本效果）

红影发表于 2022-3-15 22:49

滤镜里有这么多变化的呢{:4_187:}

红影发表于 2022-3-15 22:57

阴影和不透明度比较熟悉，其他的不熟。

马黑黑 发表于 2022-3-15 23:03

本帖最后由马黑黑于 2022-3-15 23:12 编辑 <br /><br /><p>融合现象：<br><br></p>

<style>
#papaBox {
margin: 0 auto 10px;
width: 400px;
height: 200px;
background: #fff;
overflow: hidden;
position: relative;
filter: contrast(20);
}
#papaBox div {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
filter: blur(6px);
}
#ball1{
background: blue;
left: 0;
}
#ball2 {
background-color: red;
left:80px;
}
</style>

<div id="papaBox">
<div id="ball1"></div>
<div id="ball2"></div>
</div>

马黑黑 发表于 2022-3-15 23:06

<p>融合现象加入动画：<br><br></p>

<style>
.papa {
width: 400px;
height: 200px;
background: #fff;
overflow: hidden;
padding: 10px;
position: relative;
filter: contrast(20);
}
.papa div {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
filter: blur(6px);
}
.ball1{
background: black;
left: 0;
animation: move 2s infinite alternate;
}
.ball2 {
background-color: red;
left:120px;
}
@keyframes move{ 100%{ left:250px; } }
</style>

<div class="papa">
<div class="ball1"></div>
<div class="ball2"></div>
</div>

马黑黑 发表于 2022-3-15 23:08

本帖最后由马黑黑于 2022-3-15 23:13 编辑

7楼参考代码：
<style>
.papaBox {
   margin: 0 auto 10px;
   width: 400px;
   height: 200px;
   background: #fff;
   overflow: hidden;
   position: relative;
   filter: contrast(20);
}
.papaBox div {
   display: inline-block;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   position: absolute;
   filter: blur(6px);
}
#ball1{
   background: blue;
   left: 0;
}
#ball2 {
   background-color: red;
   left:80px;
}
</style>

<div id="papaBox">
   <div id="ball1"></div>
   <div id="ball2"></div>
</div>

马黑黑 发表于 2022-3-15 23:09

8楼参考代码：

<style>
.papa {
width: 400px;
height: 200px;
background: #fff;
overflow: hidden;
padding: 10px;
position: relative;
filter: contrast(20);
}
.papa div {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
filter: blur(6px);
}
.ball1{
background: black;
left: 0;
animation: move 2s infinite alternate;
}
.ball2 {
background-color: red;
left:120px;
}
@keyframes move{ 100%{ left:250px; } }
</style>

<div class="papa">
<div class="ball1"></div>
<div class="ball2"></div>
</div>

马黑黑 发表于 2022-3-15 23:09

红影发表于 2022-3-15 22:57
阴影和不透明度比较熟悉，其他的不熟。

常用的滤镜基本就这些了

红影发表于 2022-3-16 12:53

马黑黑发表于 2022-3-15 23:09
8楼参考代码：

这个融合也很好看呢{:4_187:}

红影发表于 2022-3-16 12:53

马黑黑发表于 2022-3-15 23:09
常用的滤镜基本就这些了

黑黑介绍得很详细{:4_199:}

马黑黑 发表于 2022-3-16 12:53

红影发表于 2022-3-16 12:53
黑黑介绍得很详细

已经简化了

马黑黑 发表于 2022-3-16 12:53

红影发表于 2022-3-16 12:53
这个融合也很好看呢

没想到的

红影发表于 2022-3-16 13:31

马黑黑发表于 2022-3-16 12:53
已经简化了

这么多，还是简化版的啊。

红影发表于 2022-3-16 13:32

马黑黑发表于 2022-3-16 12:53
没想到的

非常有趣，又可以用来做帖子了{:4_173:}

马黑黑 发表于 2022-3-16 13:32

红影发表于 2022-3-16 13:31
这么多，还是简化版的啊。

我最近也有点懒了，说明部分极其简洁的

马黑黑 发表于 2022-3-16 13:34

红影发表于 2022-3-16 13:32
非常有趣，又可以用来做帖子了

小辣椒咋不见人呢？她见这个肯定心动。

红影发表于 2022-3-16 14:27

马黑黑发表于 2022-3-16 13:32
我最近也有点懒了，说明部分极其简洁的

已经很不容易了，黑黑辛苦{:4_187:}

页: [1] 2 3

花潮论坛's Archiver

CSS滤镜介绍