Conseils pour utiliser les filtres CSS pour rendre votre site Web plus cool, à collectionner !

Utilisez habilement le filtre CSS pour rendre votre site Web plus cool. Cet article partagera avec vous quelques conseils sur l’utilisation des filtres CSS. J’espère qu’il vous sera utile !

Commençons le contenu de cet article !

Lorsque nous traitons des images, l'une des fonctions que nous utilisons souvent est les filtres, qui peuvent permettre à une image de présenter divers effets visuels.

En CSS, il existe également un attribut de filtre qui nous permet d'utiliser le code CSS pour spécifier divers effets de filtre pour les éléments, tels que le flou, les niveaux de gris, la luminosité, le décalage des couleurs, etc.

L'utilisation de base du filtre CSS est très simple. Le standard CSS contient quelques fonctions qui ont implémenté des effets prédéfinis (flou, luminosité, contraste, etc. ci-dessous). :

/* 使用单个滤镜 （如果传入的参数是百分数，那么也可以传入对应的小数：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;

Démo officielle : MDN

Les filtres sont très courants dans le développement quotidien, comme l'utilisation de ombre portée pour ajouter des ombres à des formes irrégulières en utilisant le flou</ ; code >Pour obtenir un flou d'arrière-plan, un effet de verre dépoli, etc. <code>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

Ci-dessous, nous utiliserons davantage le Filtre CSS pour obtenir des effets d'animation afin de rendre l'interaction avec le site Web plus cool, et en même temps approfondir notre compréhension du Filtre CSS. Commençons !

(Les connaissances d'animation et de pseudo-classe à utiliser ci-dessous sont dans les Codes CSS N Là sont des introductions détaillées aux techniques 🎜, je ne les répéterai donc pas ici. Les amis dans le besoin peuvent aller les découvrir)🎜

Effet film

🎜 dans le le filtre de luminosité est utilisé pour ajuster la luminosité et l'obscurité de l'image. La valeur par défaut est 1 ; lorsqu'elle est inférieure à 1, l'image devient plus sombre ; lorsqu'elle est 0, elle affiche une image complètement noire. ; lorsqu'il est supérieur à 1 > lorsque l'image apparaît plus lumineuse que l'image originale. 🎜🎜Nous pouvons simuler l'effet de la fin d'un film en ajustant la luminosité et l'obscurité de l'image d'arrière-plan et la transparence du texte. 🎜🎜🎜

<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>Effet de flou🎜Dans la carte de mots ci-dessous, lorsque le survol de la souris est sur une certaine carte, l'arrière-plan des autres cartes est flou, permettant à l'utilisateur pour se concentrer sur la carte actuelle. 🎜🎜🎜🎜< structure code>html : 🎜

<div class="container">
  <span class="text">fantastic</span>
</div>

🎜La façon de l'implémenter est d'ajouter l'arrière-plan à la pseudo-classe de l'élément .card. Lorsque l'élément n'est pas le focus, ajoutez le. arrière-plan de la pseudo-classe du filtre d’élément. 🎜

.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="/static/imghw/default1.png"  data-src="images/moon.jpg"  class="lazy"   alt="Conseils pour utiliser les filtres CSS pour rendre votre site Web plus cool, à collectionner !" >
  <img  class="reflect lazy"  src="/static/imghw/default1.png"  data-src="images/moon.jpg"    alt="Conseils pour utiliser les filtres CSS pour rendre votre site Web plus cool, à collectionner !" >
</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);  
}

Effet décoloré

🎜L'effet décoloré peut créer un style nostalgique. Dans l'ensemble de murs de photos suivant, nous utilisons le filtre sépia pour convertir le ton de l'image en brun foncé, puis réduisons la saturation saturer et faisons pivoter la teinte teinte-rotation Réglage fin pour simuler l'effet d'anciennes photos. 🎜🎜🎜

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

< h2>Effet niveaux de gris🎜Comment rendre le site Web gris ? Ajoutez simplement filter: grayscale(100%) à l'élément html. La fonction 🎜🎜grayscale(amount) modifiera l'échelle de gris de l'image d'entrée. La valeur de amount définit le taux de conversion des niveaux de gris. Si la valeur est 100%, l'image sera complètement convertie en niveaux de gris, et si la valeur est 0%, l'image restera inchangée. Si aucune valeur n'est définie, la valeur par défaut est 0. 🎜🎜🎜

Effet de fusion

🎜Pour que deux éléments qui se croisent produisent l'effet de fusion suivant, les filtres nécessaires sont le flou et le contraste . 🎜🎜🎜

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

rrreee🎜 Points techniques pour obtenir l'effet de fusion :🎜

• 🎜Le filtre contraste est appliqué au parent de l'élément élément mélangé (.container) et l'élément parent doivent définir background. 🎜
• 🎜Le filtre flou est appliqué à l'élément de fusion (.circle). 🎜

🎜blur définit le niveau de flou de l'image, et contraste définit le contraste de l'image. Lorsque les deux sont combinés comme ci-dessus, ils créent un effet de fusion magique, et vous pouvez utiliser cette écriture comme une formule. 🎜🎜Sur la base de cet effet de fusion, nous pouvons créer des conceptions d'interaction intéressantes. 🎜

• 加载动画：

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="/static/imghw/default1.png"  data-src="images/moon.jpg"  class="lazy"   alt="Conseils pour utiliser les filtres CSS pour rendre votre site Web plus cool, à collectionner !" >
  <img  class="reflect lazy"  src="/static/imghw/default1.png"  data-src="images/moon.jpg"    alt="Conseils pour utiliser les filtres CSS pour rendre votre site Web plus cool, à collectionner !" >
</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

更多编程相关知识，请访问：编程视频！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!