Petua untuk menggunakan penapis CSS untuk menjadikan tapak web anda lebih keren, berbaloi untuk dikumpulkan!

Gunakan penapis CSS dengan mahir untuk menjadikan tapak web anda lebih keren. Artikel ini akan berkongsi dengan anda beberapa petua tentang menggunakan penapis CSS. Saya harap ia akan membantu anda.

Mari mulakan kandungan artikel ini!

Apabila kita memproses gambar, salah satu fungsi yang sering kita gunakan ialah penapis, yang boleh membuatkan sesuatu imej itu menyajikan pelbagai kesan visual.

Dalam CSS, terdapat juga atribut penapis yang membolehkan kami menggunakan kod CSS untuk menentukan pelbagai kesan penapis untuk elemen, seperti kabur, skala kelabu, kecerahan dan peralihan warna Bergerak dan tunggu.

Penggunaan asas penapis CSS adalah sangat mudah Piawaian CSS mengandungi beberapa fungsi yang telah mencapai kesan yang telah ditetapkan (kabur, kecerahan, kontras, dsb. di bawah). ​daripada fungsi-fungsi ini. seperti menggunakan

Tambahkan bayang-bayang pada bentuk tidak sekata; gunakan

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

untuk mencapai kekaburan latar belakang, kesan kaca beku, dsb.

Di bawah ini kami akan terus menggunakan untuk mencapai beberapa kesan animasi, menjadikan interaksi tapak web lebih keren, dan pada masa yang sama memperdalam pemahaman tentang

. Mari mulakan!

(Pengetahuan animasi dan kelas pseudo yang akan digunakan di bawah diperkenalkan secara terperinci dalam

kemahiran pengekodan N CSS

, jadi saya tidak akan mengulanginya di sini. Rakan yang memerlukan boleh pergi ke sana Lihatlah. ) drop-shadowblur

Kesan Filem

CSS filterCSS filter

dalam penapis digunakan untuk melaraskan kecerahan imej. Nilai lalai ialah

; apabila ia kurang daripada , imej menjadi lebih gelap; imej asal.

Kita boleh mensimulasikan kesan filem berakhir dengan melaraskan

dan .

brightness1101Kesan kabur

背景图的明暗度Dalam kad perkataan di bawah, apabila tetikus 文字的透明度 bergerak ke tertentu Apabila kad dihidupkan, latar belakang kad lain menjadi kabur, membolehkan pengguna memfokus pada kad semasa.

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

Struktur:

dilaksanakan dengan menambahkan latar belakang pada kelas pseudo elemen

Apabila elemen tidak Apabila difokuskan, tambahkan penapis pada kelas pseudo elemen.

hover

Kesan Pudar

html

Kesan pudar boleh mencipta gaya nostalgia. Dalam set dinding foto berikut, kami menggunakan penapis

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

untuk menukar ton imej kepada perang gelap, dan kemudian memperhalusinya dengan mengurangkan ketepuan

dan putaran rona .card untuk mensimulasikan kesan foto lama.

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

Kesan skala kelabu

sepiaBagaimana untuk menjadikan laman web berwarna kelabu? Cuma tambah saturate pada elemen html. Fungsi hue-rotate

akan menukar skala kelabu imej input. Nilai mentakrifkan nisbah penukaran skala kelabu. Jika nilainya ialah

, imej akan ditukar sepenuhnya kepada skala kelabu dan jika nilainya ialah

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

, imej itu akan kekal tidak berubah. Jika tiada nilai ditetapkan, nilai lalai ialah

.

filter: grayscale(100%)

Kesan gabungan

grayscale(amount)amountUntuk menjadikan dua elemen bersilang menghasilkan kesan gabungan berikut, anda perlu menggunakan penapis Ia 100% dan 0%. 0

Mata teknikal untuk mencapai kesan gabungan:

blurcontrast

Penapis Cermin digunakan pada elemen induk elemen gabungan (), dan elemen induk mesti mempunyai set

. Penapis

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

digunakan pada elemen adunan (

).

• contrast.container menetapkan tahap kabur imej, background menetapkan kontras imej. Apabila kedua-duanya digabungkan seperti di atas, ia menghasilkan kesan gabungan ajaib, dan anda boleh menggunakan tulisan ini seperti formula.

Berdasarkan kesan gabungan ini, kami boleh melakukan beberapa reka bentuk interaksi yang menarik.
• • 加载动画：

  

  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="Petua untuk menggunakan penapis CSS untuk menjadikan tapak web anda lebih keren, berbaloi untuk dikumpulkan!" >
    <img  src="images/moon.jpg" class="reflect" alt="Petua untuk menggunakan penapis CSS untuk menjadikan tapak web anda lebih keren, berbaloi untuk dikumpulkan!" >
  </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

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

Atas ialah kandungan terperinci Petua untuk menggunakan penapis CSS untuk menjadikan tapak web anda lebih keren, berbaloi untuk dikumpulkan!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!