巧用CSS filter,让你的网站更加酷炫! | 您所在的位置:网站首页 › css动画图片 › 巧用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的理解。一起开始吧! 电影效果滤镜中的brightness用于调整图像的明暗度。默认值是1;小于1时图像变暗,为0时显示为全黑图像;大于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: ''; 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 微调,模拟老照片的效果。 怎样让网站变成灰色?在html元素上加上filter: grayscale(100%)即可。 grayscale(amount)函数将改变输入图像灰度。amount 的值定义了灰度转换的比例。值为 100% 则完全转为灰度图像,值为 0% 图像无变化。若未设置值,默认值是 0。 要使两个相交的元素产生下面这种融合的效果,需要用到的滤镜是blur和contrast。 实现融合效果的技术要点: contrast滤镜应用在融合元素的父元素(.container)上,且父元素必须设置background。 blur滤镜应用在融合元素(.circle)上。blur设置图像的模糊程度,contrast设置图像的对比度。当两者像上面那样组合时,就会产生神奇的融合效果,你可以像使用公式一样使用这种写法。 在这种融合效果的基础上,我们可以做一些有趣的交互设计。 加载动画: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的值,实现文字的抖动效果。
【CSS】水滴动画|水滴融合效果 你所不知道的 CSS 滤镜技巧与细节 说说SVG的feTurbulence滤镜 SVG feTurbulence滤镜深入介绍 |
CopyRight 2018-2019 实验室设备网 版权所有 |