CSSfilter使用小技巧有哪些
作者：mobiledu2502905163 | 来源：互联网 | 2023-09-08 22:11
本篇文章给大家分享的是有关CSSfilter使用小技巧有哪些，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不
本篇文章给大家分享的是有关CSS filter使用小技巧有哪些，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
我们在处理图片时，经常使用的一个功能就是滤镜，它能使一张图像呈现各种不同的视觉效果。
在 CSS 中，也有一个filter属性，让我们能用 CSS 代码为元素指定各种滤镜效果，比如模糊、灰度、明暗度、颜色偏移等。
CSS filter的基础使用非常简单，CSS 标准里包含了一些已实现预定义效果的函数（下面blur、brightness、contrast等），我们可以通过指定这些函数的值来实现想要的效果：
/* 使用单个滤镜 （如果传入的参数是百分数，那么也可以传入对应的小数：40% --> 0.4）*/
filter: blur(5px);
filter: brightness(40%);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* 使用多个滤镜 */
filter: contrast(175%) brightness(3%);
/* 不使用任何滤镜 */
filter: none; 官方demo：MDN
滤镜在日常开发中是很常见的，比如使用drop-shadow给不规则形状添加阴影；使用blur来实现背景模糊，以及毛玻璃效果等。
下面我们将进一步使用CSS filter实现一些动画效果，让网站交互更加酷炫，同时也加深对CSS filter的理解。一起开始吧！
（ 下面要使用到的 动画 和 伪类 知识，在 CSS的N个编码技巧 中都有详细的介绍，这里就不重复了，有需要的朋友可以前往查看哦。 ）
电影效果 滤镜中的brightness用于调整图像的明暗度。默认值是1；小于1时图像变暗，为0时显示为全黑图像；大于1时图像显示比原图更明亮。
我们可以通过调整 背景图的明暗度 和 文字的透明度 ，来模拟电影谢幕的效果。
如果生活中有什么使你感到快乐，那就去做吧
不要管别人说什么
.pic{
height: 100%;
width: 100%;
position: absolute;
background: url(&＃39;./images/movie.webp&＃39;) no-repeat;
background-size: cover;
animation: fade-away 2.5s linear forwards; //forwards当动画完成后，保持最后一帧的状态
}
.text{
position: absolute;
line-height: 55px;
color: #fff;
font-size: 36px;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
opacity: 0;
animation: show 2s cubic-bezier(.74,-0.1,.86,.83) forwards;
}
@keyframes fade-away { //背景图的明暗度动画
30%{
filter: brightness(1);
}
100%{
filter: brightness(0);
}
}
@keyframes show{ //文字的透明度动画
20%{
opacity: 0;
}
100%{
opacity: 1;
}
} 模糊效果 在下面的单词卡片中，当鼠标hover到某一张卡片上时，其他卡片背景模糊，使用户焦点集中到当前卡片。
html结构：
Flower
The flowers mingle to form a blaze of color.
Sunset
The sunset glow tinted the sky red.
Plain
The winds came from the north, across the plains, funnelling down the valley.
实现的方式，是将背景加在.card元素的伪类上，当元素不是焦点时，为该元素的伪类加上滤镜。
.card:before{
z-index: -1;
content: &＃39;&＃39;;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 20px;
filter: blur(0px) opacity(1);
transition: filter 200ms linear, transform 200ms linear;
}
/*
这里不能将滤镜直接加在.card元素，而是将背景和滤镜都加在伪类上。
因为，父元素加了滤镜，它的子元素都会一起由该滤镜改变。
如果滤镜直接加在.card元素上，会导致上面的文字也变模糊。
*/ //通过css选择器选出非hover的.card元素，给其伪类添加模糊、透明度和明暗度的滤镜
.cards:hover > .card:not(:hover):before{
filter: blur(5px) opacity(0.8) brightness(0.8);
} //对于hover的元素，其伪类增强饱和度，尺寸放大
.card:hover:before{
filter: saturate(1.2);
transform: scale(1.05);
} 褪色效果 褪色效果可以打造出一种怀旧的风格。下面这组照片墙，我们通过sepia滤镜将图像基调转换为深褐色，再通过降低 饱和度saturate 和 色相旋转hue-rotate 微调，模拟老照片的效果。
.pic{
border: 3px solid #fff;
box-shadow: 0 10px 50px #5f2f1182;
filter: sepia(30%) saturate(40%) hue-rotate(5deg);
transition: transform 1s;
}
.pic:hover{
filter: none;
transform: scale(1.2) translateX(10px);
z-index: 1;
} 灰度效果 怎样让网站变成灰色？在html元素上加上filter: grayscale(100%)即可。
grayscale(amount)函数将改变输入图像灰度。amount 的值定义了灰度转换的比例。值为 100% 则完全转为灰度图像，值为 0% 图像无变化。若未设置值，默认值是 0。
融合效果 要使两个相交的元素产生下面这种融合的效果，需要用到的滤镜是blur和contrast。
.container{
margin: 50px auto;
height: 140px;
width: 400px;
background: #fff; //给融合元素的父元素设置背景色
display: flex;
align-items: center;
justify-content: center;
filter: contrast(30); //给融合元素的父元素设置contrast
}
.circle{
border-radius: 50%;
position: absolute;
filter: blur(10px); //给融合元素设置blur
}
.circle-1{
height: 90px;
width: 90px;
background: #03a9f4;
transform: translate(-50px);
animation: 2s moving linear infinite alternate-reverse;
}
.circle-2{
height: 60px;
width: 60px;
background: #0000ff;
transform: translate(50px);
animation: 2s moving linear infinite alternate;
}
@keyframes moving { //两个元素的移动
0%{
transform: translate(50px)
}
100%{
transform: translate(-50px)
}
} 实现融合效果的技术要点：
blur设置图像的模糊程度，contrast设置图像的对比度。当两者像上面那样组合时，就会产生神奇的融合效果，你可以像使用公式一样使用这种写法。
在这种融合效果的基础上，我们可以做一些有趣的交互设计。
html和css如下所示，这个动画主要通过控制子元素.circle的尺寸和位移来实现，但是由于父元素和子元素都满足 “融合公式” ，所以当子元素相交时，就出现了融合的效果。
.container {
margin: 10px auto;
height: 140px;
width: 300px;
background: #fff; //父元素设置背景色
display: flex;
align-items: center;
filter: contrast(30); //父元素设置contrast
}
.circle {
height: 50px;
width: 60px;
background: #1aa7ff;
border-radius: 50%;
position: absolute;
filter: blur(20px); //子元素设置blur
transform: scale(0.1);
transform-origin: left top;
}
.circle{
animation: move 4s cubic-bezier(.44,.79,.83,.96) infinite;
}
.circle:nth-child(2) {
animation-delay: .4s;
}
.circle:nth-child(3) {
animation-delay: .8s;
}
.circle:nth-child(4) {
animation-delay: 1.2s;
}
.circle:nth-child(5) {
animation-delay: 1.6s;
}
@keyframes move{ //子元素的位移和尺寸动画
0%{
transform: translateX(10px) scale(0.3);
}
45%{
transform: translateX(135px) scale(0.8);
}
85%{
transform: translateX(270px) scale(0.1);
}
}
主要通过不断改变letter-spacing和blur的值，使文字从融合到分开：
fantastic
.container{
margin-top: 50px;
text-align: center;
background-color: #000;
filter: contrast(30);
}
.text{
font-size: 100px;
font-family: &＃39;Gill Sans&＃39;, &＃39;Gill Sans MT&＃39;, Calibri, &＃39;Trebuchet MS&＃39;, sans-serif;
letter-spacing: -40px;
color: #fff;
animation: move-letter 4s linear forwards; //forwards当动画完成后，保持最后一帧的状态
}
@keyframes move-letter{
0% {
opacity: 0;
letter-spacing: -40px;
filter: blur(10px);
}
25% {
opacity: 1;
}
50% {
filter: blur(5px);
}
100% {
letter-spacing: 20px;
filter: blur(2px);
}
} 水波效果 filter还可以通过 URL 链接到 SVG 滤镜元素，SVG滤镜元素MDN 。
下面的水波纹效果就是基于 SVG 的feTurbulence滤镜实现的，原理参考了 说说SVG的feTurbulence滤镜和SVG feTurbulence滤镜深入介绍，有兴趣的朋友可以深入阅读。
feTurbulence滤镜借助Perlin噪声算法模拟自然界真实事物那样的随机样式。它接收下面5个属性：
baseFrequency表示噪声的基本频率参数，频率越高，噪声越密集。
numOctaves就表示倍频的数量，倍频的数量越多，噪声看起来越自然。
seed属性表示feTurbulence滤镜效果中伪随机数生成的起始值，不同数量的seed不会改变噪声的频率和密度，改变的是噪声的形状和位置。
stitchTiles定义了Perlin噪声在边框处的行为表现。
type属性值有fractalNoise和turbulence，模拟随机样式使用turbulence。
在这个例子，两个img标签使用同一张图片，将第二个img标签使用scaleY(-1)实现垂直方向的镜像翻转，模拟倒影。
并且，对倒影图片使用feTurbulence滤镜，通过动画不断改变feTurbulence滤镜的baseFrequency值实现水纹波动的效果。
.container{
height: 520px;
width: 400px;
display: flex;
clip-path: inset(10px);
flex-direction: column;
}
img{
height: 50%;
width: 100%;
}
.reflect {
transform: translateY(-2px) scaleY(-1);
//对模拟倒影的元素应用svg filter
//url中对应的是上面svg filter的id
filter: url(#displacement-wave-filter);
} 抖动效果 在上面的水波动画中改变的是baseFrequency值，我们也通过改变seed的值，实现文字的抖动效果。
.shaky{
font-size: 60px;
filter: url(#displacement-text-filter); //url中对应的是上面svg filter的id
} 以上就是CSS filter使用小技巧有哪些，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程笔记行业资讯频道。
推荐阅读
本文详细探讨了jQuery的事件处理机制及其应用技巧，通过具体的代码示例，逐一解析了每个jQuery代码片段与其对应的HTML结构。文章以标记为基准，CSS作为通用样式，确保每段代码都能独立运行。HTML和CSS代码统一放置在文章末尾，方便读者参考和实践。 ...
[详细]
蜡笔小新 2024-10-27 14:27:52
本文深入探讨了利用React框架结合Ant Design 3.x版本开发IP地址输入组件的方法。通过详细的代码示例，展示了如何高效地创建具备良好用户体验的IP输入框，对于前端开发者而言具有较高的实践指导意义。 ...
[详细]
蜡笔小新 2024-10-27 11:40:31
在本篇进阶指南的第二部分中，我们将继续探讨 React 与 Webpack 的高级配置技巧。通过实际案例，我们将展示如何使用 React 和 Webpack 构建一个简单的 Todo 应用程序，具体包括 `TodoApp.js` 文件中的代码实现，如导入 React 和自定义组件 `TodoList`。此外，我们还将深入讲解 Webpack 配置文件的优化方法，以提升开发效率和应用性能。 ...
[详细]
蜡笔小新 2024-11-06 10:03:07
多条件联动筛选功能广泛应用于图片展示、装修设计、机械设备和在线商城等场景，通常筛选条件应聚焦于用户最关心的要素，而非涵盖所有可能的选项。在DedeCMS中，多条件筛选的PHP开发并未内置删除已选条件的功能，但通过理解PHP筛选与JS筛选的不同机制，实现这一功能相对简单且易于操作。 ...
[详细]
蜡笔小新 2024-11-01 16:21:47
期末Web开发综合实践项目中，学生通过运用HTML、CSS和JavaScript等前端技术，设计并实现了一款趣味性十足的小游戏。该项目不仅检验了学生对前端基础知识的掌握情况，还提升了他们的实际操作能力和创意设计水平。视频链接展示了项目的最终成果，直观呈现了游戏的互动性和视觉效果。 ...
[详细]
蜡笔小新 2024-10-31 19:04:51
网站前端开发的核心理念与必备技能解析 ...
[详细]
蜡笔小新 2024-10-24 10:26:17
com.sun.javadoc.PackageDoc.exceptions()方法的使用及代码示例 ...
[详细]
蜡笔小新 2024-11-13 10:47:33
通过 CSS 中的 transition 属性，可以轻松实现元素状态变化时的平滑过渡效果。本文将详细介绍如何使用 transition 属性，并提供一个具体的示例。 ...
[详细]
蜡笔小新 2024-11-12 17:18:11
0x01快速自启动目录快速启动目录自启动方式源于Windows中的一个目录，这个目录一般叫启动或者Startup。位于该目录下的PE文件会在开机后进行自启动 ...
[详细]
蜡笔小新 2024-11-12 11:16:30
本指南从零开始介绍Scala编程语言的基础知识，重点讲解了Scala解释器REPL（读取-求值-打印-循环）的使用方法。REPL是Scala开发中的重要工具，能够帮助初学者快速理解和实践Scala的基本语法和特性。通过详细的示例和练习，读者将能够熟练掌握Scala的基础概念和编程技巧。 ...
[详细]
蜡笔小新 2024-11-07 18:07:59
本文介绍了如何在iOS平台上使用GLSL着色器将YV12格式的视频帧数据转换为RGB格式，并展示了转换后的图像效果。通过详细的技术实现步骤和代码示例，读者可以轻松掌握这一过程，适用于需要进行视频处理的应用开发。 ...
[详细]
蜡笔小新 2024-11-06 19:18:22
在Android 4.4系统中，通过使用 `Intent` 对象并设置动作 `ACTION_GET_CONTENT` 或 `ACTION_OPEN_DOCUMENT`，可以从相册中选择图片并获取其路径。具体实现时，需要为 `Intent` 添加相应的类别，并处理返回的 Uri 以提取图片的文件路径。此方法适用于需要从用户相册中选择图片的应用场景，能够确保兼容性和用户体验。 ...
[详细]
蜡笔小新 2024-11-06 11:02:36
深入理解 CSS 盒模型、box-sizing 属性及定位元素的水平和垂直居中技巧 ...
[详细]
蜡笔小新 2024-10-29 12:08:02
本文深入探讨了Android事件分发机制的源代码，重点分析了DecorView作为Activity根布局的角色及其在事件传递中的作用。同时，详细解析了PhoneWindow在Activity窗口管理中的关键功能，以及它如何与DecorView协同工作，确保用户交互事件的高效处理。 ...
[详细]
蜡笔小新 2024-10-26 14:18:52
开发技巧分享：利用套索与矩形选择工具高效选取绘图中的全部字形节点 ...
[详细]
蜡笔小新 2024-10-26 13:12:17
mobiledu2502905163
这个家伙很懒，什么也没留下！
京公网安备 11010802041100号