Умело используйте фильтр CSS, чтобы сделать ваш сайт более крутым!

дизайн CSS
Умело используйте фильтр CSS, чтобы сделать ваш сайт более крутым!

предисловие

Когда мы обрабатываем изображения, одной из функций, которые мы часто используем, являются фильтры, которые могут придать изображению различные визуальные эффекты.

image.png

В 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

filter-demo.gif

Фильтры очень распространены в повседневной разработке, например, использованиеdrop-shadowДобавляйте тени к неправильным формам; используйтеblurДля достижения размытия фона, эффектов матового стекла и т. д.

Ниже мы будем использоватьCSS filterРеализуйте некоторые анимационные эффекты, чтобы сделать взаимодействие с сайтом более крутым, а также углубить пониманиеCSS filterпонимание. Давайте начнем!

(Анимация и знания псевдоклассов, которые будут использоваться ниже, находятся вN советов по кодированию для CSSВ нем есть подробные предисловия, поэтому повторяться здесь не буду, друзья, кому нужно, могут зайти посмотреть. )

эффект фильма

в фильтреbrightnessИспользуется для регулировки яркости изображения. Значение по умолчанию1; меньше, чем1Когда изображение становится темным,0отображается как полностью черное изображение; больше, чем1Изображение выглядит ярче, чем исходное изображение.

Мы можем настроить背景图的明暗度и文字的透明度, чтобы имитировать эффект занавеса фильма.

movie.gif

<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При достижении определенной карты фон других карт размывается, чтобы пользователь мог сосредоточиться на текущей карте.

card-blur.gif

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Тонкая настройка для имитации эффекта старых фотографий.

old-photo-s.gif

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

эффект оттенков серого

Как сделать сайт серым? добавить элемент htmlfilter: grayscale(100%)Вот и все.

grayscale(amount)Функция изменит оттенки серого входного изображения.amountЗначение определяет масштаб преобразования оттенков серого. значение100%Затем оно полностью преобразуется в изображение в градациях серого, и значение0%Изображение без изменений. Если значение не задано, значением по умолчанию является0.

gray-scale.gif

эффект слияния

Чтобы два пересекающихся элемента производили следующий эффект слияния, необходимо использовать фильтр:blurиcontrast.

merge.gif

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

Технические моменты для достижения эффекта слияния:

  1. contrastФильтр применяется к родительскому элементу слитного элемента (.container), а родительский элемент должен быть установленbackground.
  2. blurФильтр применяется к плавкому элементу (.circle)начальство.

blurУстановите уровень размытия изображения,contrastУстанавливает контрастность изображения. Когда они объединены, как указано выше, возникает магический эффект слияния, который вы можете использовать как формулу.

На основе этого эффекта слияния мы можем сделать интересный дизайн взаимодействия.

  • Загрузка анимации:

loading-l.gif 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);
  }
}
  • Классный внешний вид текста:

gooey-text.gifВ основном за счет постоянного изменения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);
  }
}

эффект волны воды

фильтры также могут ссылаться на элементы фильтра SVG через URL-адреса,Фильтрующий элемент SVG MDN.

Следующий эффект водной ряби основан на SVG.feTurbulenceФильтр реализован, принцип указанРасскажите о фильтре feTurbulence в SVG.иПодробное знакомство с фильтром SVG feTurbulence, и заинтересованные друзья могут прочитать подробно.

feTurbulence滤镜с помощьюPerlinАлгоритмы шума имитируют случайные закономерности, подобные реальным вещам в природе. Он принимает следующие 5 свойств:

  • baseFrequencyУказывает основной частотный параметр шума, чем выше частота, тем плотнее шум.
  • numOctavesОн представляет количество множителей, чем больше число множителей, тем естественнее выглядит шум.
  • seedАтрибут представляет собой начальное значение генерации псевдослучайных чисел в эффекте фильтра feTurbulence, различные числаseedЧастота и плотность шума не изменяются, изменяется форма и расположение шума.
  • stitchTilesОпределяет поведение шума Перлина на границах.
  • typeзначение атрибута имеетfractalNoiseиturbulence, имитируя использование случайного стиляturbulence.

wave.gif

В этом примере дваimg标签Используя то же изображение, поместите второйimg标签использоватьscaleY(-1)Реализуйте переворот зеркала в вертикальном направлении, чтобы имитировать отражение.

И, для использования изображения отраженияfeTurbulenceФильтры, постоянно меняющиеся с помощью анимацииfeTurbulenceфильтрbaseFrequencyЗначение достигает эффекта водной ряби.

<div class="container">
  <img src="images/moon.jpg">
  <img src="images/moon.jpg" class="reflect">
</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Значение реализует эффект дрожания текста.text-shaking.gif

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

Ссылаться на

【CSS】Анимация капли воды|Эффект слияния капель воды

Хитрости и детали CSS-фильтров, о которых вы не знали

Расскажите о фильтре feTurbulence в SVG.

Подробное знакомство с фильтром SVG feTurbulence