CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!
- 青灯夜游앞으로
- 2021-09-10 10:42:042716검색
CSS 필터를 능숙하게 사용하여 웹사이트를 더욱 멋지게 만드세요. 이 기사에서는 CSS 필터 사용에 대한 몇 가지 팁을 공유하겠습니다. 도움이 되기를 바랍니다.
이 기사의 내용을 시작하겠습니다!
사진을 처리할 때 우리가 자주 사용하는 기능 중 하나는 이미지에 다양한 시각 효과를 줄 수 있는 필터입니다.
CSS에는 CSS 코드를 사용하여 흐림, 회색조, 밝기, 색상 오프셋 등과 같은 요소에 대한 다양한 필터 효과를 지정할 수 있는 필터 속성도 있습니다.
CSS 필터의 기본 사용은 매우 간단합니다. CSS 표준에는 사전 정의된 효과(흐림, 밝기, 대비 등)를 구현한 일부 기능이 포함되어 있습니다. 이러한 기능의 값을 지정하면 원하는 효과를 얻을 수 있습니다. :
/* 使用单个滤镜 （如果传入的参数是百分数，那么也可以传入对应的小数：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;
공식 데모: MDN
필터는 drop-shadow를 사용하여 불규칙한 모양에 그림자를 추가하는 등 일상적인 개발에서 매우 일반적입니다. 코드 >배경 흐림, 젖빛 유리 효과 등을 얻으려면 drop-shadow给不规则形状添加阴影；使用blur来实现背景模糊，以及毛玻璃效果等。
下面我们将进一步使用CSS filter实现一些动画效果，让网站交互更加酷炫，同时也加深对CSS filter的理解。一起开始吧！
（ 下面要使用到的 动画 和 伪类 知识，在 CSS的N个编码技巧 中都有详细的介绍，这里就不重复了，有需要的朋友可以前往查看哦。 ）
电影效果
滤镜中的brightness用于调整图像的明暗度。默认值是1；小于1时图像变暗，为0时显示为全黑图像；大于1时图像显示比原图更明亮。
我们可以通过调整 背景图的明暗度 和 文字的透明度 ，来模拟电影谢幕的效果。
<div class="container">
<div class="pic"></div>
<div class="text">
<p>如果生活中有什么使你感到快乐，那就去做吧</p>
<br>
<p>不要管别人说什么</p>
</div>
</div>.pic{
height: 100%;
width: 100%;
position: absolute;
background: url('./images/movie.webp') 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结构：
<ul class="cards">
<li class="card">
<p class="title">Flower</p>
<p class="content">The flowers mingle to form a blaze of color.</p>
</li>
<li class="card">
<p class="title">Sunset</p>
<p class="content">The sunset glow tinted the sky red.</p>
</li>
<li class="card">
<p class="title">Plain</p>
<p class="content">The winds came from the north, across the plains, funnelling down the valley. </p>
</li>
</ul>实现的方式，是将背景加在.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 微调，模拟老照片的效果。
.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。
<div class="container"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> </div>
.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)
}
}实现融合效果的技术要点：
contrast滤镜应用在融合元素的父元素（.container）上，且父元素必须设置background。blur滤镜应用在融合元素（.circle）上。
blur设置图像的模糊程度，contrast
CSS 필터를 추가로 사용하여 애니메이션 효과를 구현하여 웹 사이트 상호 작용을 더욱 멋지게 만드는 동시에 CSS 필터에 대한 이해를 심화할 것입니다. 시작해 봅시다! (아래에서 활용되는 애니메이션과 유사 클래스 지식은 CSS N 코드에 있습니다. 기술에 대한 자세한 소개🎜이므로 여기서는 반복하지 않겠습니다. 도움이 필요한 친구들은 가서 확인해 보세요.)🎜영화 효과
🎜 필터.밝기는 이미지의 밝기와 어두움을 조정하는 데 사용됩니다. 기본값은 1이며, 1보다 작으면 이미지가 어두워지고, 0이면 완전히 검은색 이미지가 표시됩니다. ; 1보다 클 때 > 이미지가 원본 이미지보다 밝게 나타날 때. 🎜🎜배경 이미지의 밝기와 텍스트의 투명도를 조정하여 영화 결말 효과를 시뮬레이션할 수 있습니다. 🎜🎜
🎜<div class="container"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div>
.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);
}
}흐림 효과🎜아래 단어 카드에서는 특정 카드 위에 마우스 호버를 올리면 다른 카드의 배경이 흐려져 사용자가 현재 카드에 집중합니다. 🎜🎜
🎜🎜html 구조: 🎜<div class="container"> <span class="text">fantastic</span> </div>🎜 구현 방법은
.card 요소의 의사 클래스에 배경을 추가하는 것입니다. 요소가 포커스가 아닌 경우 요소의 의사 클래스에 대한 배경입니다. 🎜.container{
margin-top: 50px;
text-align: center;
background-color: #000;
filter: contrast(30);
}
.text{
font-size: 100px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', 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);
}
}<div class="container">
<img src="images/moon.jpg" alt="CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!" >
<img src="images/moon.jpg" class="reflect" alt="CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!" >
</div>
<!--定义svg滤镜，这里使用的是feTurbulence滤镜-->
<svg width="0" height="0">
<filter id="displacement-wave-filter">
<!--baseFrequency设置0.01 0.09两个值，代表x轴和y轴的噪声频率-->
<feTurbulence baseFrequency="0.01 0.09">
<!--这是svg动画的定义方式，通过动画不断改变baseFrequency的值，从而形成波动效果-->
<animate attributeName="baseFrequency"
dur="20s" keyTimes="0;0.5;1" values="0.01 0.09;0.02 0.13;0.01 0.09"
repeatCount="indefinite" ></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="10" />
</filter>
</svg>.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);
}바랜 효과
🎜바랜 효과는 향수를 불러일으키는 스타일을 연출할 수 있습니다. 다음 사진 벽 세트에서는세피아 필터를 사용하여 이미지의 톤을 어두운 갈색으로 변환한 다음 채도를 채도 줄이고 색조를 회전합니다. hue-rotate code> 오래된 사진의 효과를 시뮬레이션하기 위해 미세 조정합니다. 🎜🎜<img src="https://img.php.cn/upload/image/741/542/328/163124110441720CSS%20%ED%95%84%ED%84%B0%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC%20%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EB%A5%BC%20%EB%8D%94%EC%9A%B1%20%EB%A9%8B%EC%A7%80%EA%B3%A0%20%EC%88%98%EC%A7%91%ED%95%A0%20%EA%B0%80%EC%B9%98%EA%B0%80%20%EC%9E%88%EA%B2%8C%20%EB%A7%8C%EB%93%9C%EB%8A%94%20%ED%8C%81!" title="163124110441720CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!" alt="CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!">🎜<pre class="brush:css;toolbar:false;"><div>
<p class="shaky">Such a joyful night!</p>
</div>
<svg width="0" height="0">
<filter id="displacement-text-filter">
<!--定义feTurbulence滤镜-->
<feTurbulence baseFrequency="0.02" seed="0">
<!--这是svg动画的定义方式，通过动画不断改变seed的值，形成抖动效果-->
<animate attributeName="seed"
dur="1s" keyTimes="0;0.5;1" values="1;2;3"
repeatCount="indefinite" ></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="10" />
</filter>
</svg></pre><strong>회색조 효과</strong>🎜웹사이트를 회색으로 만드는 방법은 무엇인가요? html 요소에 <code>filter: greyscale(100%)만 추가하면 됩니다. 🎜🎜grayscale(amount) 함수는 입력 이미지의 회색조를 변경합니다. amount 값은 그레이스케일 변환 비율을 정의합니다. 값이 100%이면 이미지가 완전히 흑백으로 변환되고, 값이 0%이면 이미지가 변경되지 않습니다. 값을 설정하지 않은 경우 기본값은 0입니다. 🎜🎜
🎜혼합 효과
🎜 교차하는 두 요소가 다음과 같은 융합 효과를 생성하도록 하려면흐림 및 대비 필터가 필요합니다. 🎜🎜
🎜.shaky{
font-size: 60px;
filter: url(#displacement-text-filter); //url中对应的是上面svg filter的id
}rrreee🎜 블렌딩 효과를 얻기 위한 기술적 포인트:🎜- 🎜
대비필터는 상위 항목에 적용됩니다. 혼합된 요소 요소(.container)와 상위 요소는배경을 설정해야 합니다. 🎜 - 🎜
blur필터는 블렌드 요소(.circle)에 적용됩니다. 🎜
blur는 이미지의 흐림 수준을 설정하고 contrast는 이미지의 대비를 설정합니다. 위와 같이 둘을 합치면 마법같은 융합 효과가 나타나며, 이 글을 공식처럼 활용하면 됩니다. 🎜🎜이 융합 효과를 기반으로 흥미로운 상호 작용 디자인을 할 수 있습니다. 🎜- 加载动画：
html和css如下所示，这个动画主要通过控制子元素.circle的尺寸和位移来实现，但是由于父元素和子元素都满足 “融合公式” ，所以当子元素相交时，就出现了融合的效果。
<div class="container"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div>
.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的值，使文字从融合到分开：
<div class="container"> <span class="text">fantastic</span> </div>
.container{
margin-top: 50px;
text-align: center;
background-color: #000;
filter: contrast(30);
}
.text{
font-size: 100px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', 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值实现水纹波动的效果。
<div class="container">
<img src="images/moon.jpg" alt="CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!" >
<img src="images/moon.jpg" class="reflect" alt="CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!" >
</div>
<!--定义svg滤镜，这里使用的是feTurbulence滤镜-->
<svg width="0" height="0">
<filter id="displacement-wave-filter">
<!--baseFrequency设置0.01 0.09两个值，代表x轴和y轴的噪声频率-->
<feTurbulence baseFrequency="0.01 0.09">
<!--这是svg动画的定义方式，通过动画不断改变baseFrequency的值，从而形成波动效果-->
<animate attributeName="baseFrequency"
dur="20s" keyTimes="0;0.5;1" values="0.01 0.09;0.02 0.13;0.01 0.09"
repeatCount="indefinite" ></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="10" />
</filter>
</svg>.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的值，实现文字的抖动效果。
<div>
<p class="shaky">Such a joyful night!</p>
</div>
<svg width="0" height="0">
<filter id="displacement-text-filter">
<!--定义feTurbulence滤镜-->
<feTurbulence baseFrequency="0.02" seed="0">
<!--这是svg动画的定义方式，通过动画不断改变seed的值，形成抖动效果-->
<animate attributeName="seed"
dur="1s" keyTimes="0;0.5;1" values="1;2;3"
repeatCount="indefinite" ></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="10" />
</filter>
</svg>.shaky{
font-size: 60px;
filter: url(#displacement-text-filter); //url中对应的是上面svg filter的id
}原文地址：https://juejin.cn/post/7002829486806794276
作者：Alaso
更多编程相关知识，请访问：编程视频！！
위 내용은 CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 掘金--Alaso에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제