CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!-CSS 튜토리얼-php.cn

CSS 필터를 능숙하게 사용하여 웹사이트를 더욱 멋지게 만드세요. 이 기사에서는 CSS 필터 사용에 대한 몇 가지 팁을 공유하겠습니다. 도움이 되기를 바랍니다.

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

CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!

필터는 drop-shadow를 사용하여 불규칙한 모양에 그림자를 추가하는 등 일상적인 개발에서 매우 일반적입니다. 코드 >배경 흐림, 젖빛 유리 효과 등을 얻으려면 drop-shadow给不规则形状添加阴影；使用blur来实现背景模糊，以及毛玻璃效果等。

下面我们将进一步使用CSS filter实现一些动画效果，让网站交互更加酷炫，同时也加深对CSS filter的理解。一起开始吧！

（下面要使用到的动画和伪类知识，在 CSS的N个编码技巧中都有详细的介绍，这里就不重复了，有需要的朋友可以前往查看哦。）

电影效果

滤镜中的brightness用于调整图像的明暗度。默认值是1；小于1时图像变暗，为0时显示为全黑图像；大于1时图像显示比原图更明亮。

我们可以通过调整 背景图的明暗度 和 文字的透明度 ，来模拟电影谢幕的效果。

CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!

<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(&#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到某一张卡片上时，其他卡片背景模糊，使用户焦点集中到当前卡片。

CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!

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: &#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 微调，模拟老照片的效果。

CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!

.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。

CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!

融合效果

要使两个相交的元素产生下面这种融合的效果，需要用到的滤镜是blur和contrast。

CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!

<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보다 클 때 > 이미지가 원본 이미지보다 밝게 나타날 때. 🎜🎜배경 이미지의 밝기와 텍스트의 투명도를 조정하여 영화 결말 효과를 시뮬레이션할 수 있습니다. 🎜🎜 CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!

CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!

🎜

<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);
  }
}

로그인 후 복사

< h2>흐림 효과🎜아래 단어 카드에서는 특정 카드 위에 마우스 호버를 올리면 다른 카드의 배경이 흐려져 사용자가 현재 카드에 집중합니다. 🎜🎜 CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!

🎜🎜< code>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: &#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);
  }
}

로그인 후 복사

<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 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!" title="163124110441720CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!" alt="CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!"/>🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">&lt;div&gt;
  &lt;p class=&quot;shaky&quot;&gt;Such a joyful night!&lt;/p&gt;
&lt;/div&gt;
&lt;svg width=&quot;0&quot; height=&quot;0&quot;&gt;
    &lt;filter id=&quot;displacement-text-filter&quot;&gt;
    
      &lt;!--定义feTurbulence滤镜--&gt;
      &lt;feTurbulence baseFrequency=&quot;0.02&quot; seed=&quot;0&quot;&gt;
      
       &lt;!--这是svg动画的定义方式，通过动画不断改变seed的值，形成抖动效果--&gt;
        &lt;animate attributeName=&quot;seed&quot;
        dur=&quot;1s&quot; keyTimes=&quot;0;0.5;1&quot; values=&quot;1;2;3&quot;
        repeatCount=&quot;indefinite&quot; &gt;&lt;/animate&gt;
      &lt;/feTurbulence&gt;
      &lt;feDisplacementMap in=&quot;SourceGraphic&quot; scale=&quot;10&quot; /&gt; 
    &lt;/filter&gt;
  &lt;/svg&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>< h2><strong>회색조 효과</strong></h2>🎜웹사이트를 회색으로 만드는 방법은 무엇인가요? html 요소에 <code>filter: greyscale(100%)

만 추가하면 됩니다. 🎜🎜grayscale(amount) 함수는 입력 이미지의 회색조를 변경합니다. amount 값은 그레이스케일 변환 비율을 정의합니다. 값이 100%이면 이미지가 완전히 흑백으로 변환되고, 값이 0%이면 이미지가 변경되지 않습니다. 값을 설정하지 않은 경우 기본값은 0입니다. 🎜🎜 CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!

🎜

혼합 효과

🎜 교차하는 두 요소가 다음과 같은 융합 효과를 생성하도록 하려면 흐림 및 대비 필터가 필요합니다. 🎜🎜 CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!

🎜

.shaky{
  font-size: 60px;
  filter: url(#displacement-text-filter);   //url中对应的是上面svg filter的id
}

로그인 후 복사

rrreee🎜 블렌딩 효과를 얻기 위한 기술적 포인트:🎜

🎜대비 필터는 상위 항목에 적용됩니다. 혼합된 요소 요소(.container)와 상위 요소는 배경을 설정해야 합니다. 🎜
🎜blur 필터는 블렌드 요소(.circle)에 적용됩니다. 🎜

🎜blur는 이미지의 흐림 수준을 설정하고 contrast는 이미지의 대비를 설정합니다. 위와 같이 둘을 합치면 마법같은 융합 효과가 나타나며, 이 글을 공식처럼 활용하면 됩니다. 🎜🎜이 융합 효과를 기반으로 흥미로운 상호 작용 디자인을 할 수 있습니다. 🎜

加载动画：

CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!

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);
  }
}

로그인 후 복사

酷炫的文字出场方式：

CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!

主要通过不断改变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: &#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。

CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!

在这个例子，两个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的值，实现文字的抖动效果。

CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

CSS 필터를 사용하여 웹사이트를 더욱 멋지고 수집할 가치가 있게 만드는 팁!

电影效果

模糊效果

褪色效果

灰度效果

融合效果

영화 효과

바랜 효과

혼합 효과

水波效果

抖动效果