предисловие
Когда мы обрабатываем изображения, одной из функций, которые мы часто используем, являются фильтры, которые могут придать изображению различные визуальные эффекты.
В 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
Добавляйте тени к неправильным формам; используйтеblur
Для достижения размытия фона, эффектов матового стекла и т. д.
Ниже мы будем использоватьCSS filter
Реализуйте некоторые анимационные эффекты, чтобы сделать взаимодействие с сайтом более крутым, а также углубить пониманиеCSS filter
понимание. Давайте начнем!
(Анимация и знания псевдоклассов, которые будут использоваться ниже, находятся вN советов по кодированию для CSSВ нем есть подробные предисловия, поэтому повторяться здесь не буду, друзья, кому нужно, могут зайти посмотреть. )
эффект фильма
в фильтре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;
}
эффект оттенков серого
Как сделать сайт серым? добавить элемент htmlfilter: 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
Устанавливает контрастность изображения. Когда они объединены, как указано выше, возникает магический эффект слияния, который вы можете использовать как формулу.
На основе этого эффекта слияния мы можем сделать интересный дизайн взаимодействия.
- Загрузка анимации:
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);
}
}
эффект волны воды
фильтры также могут ссылаться на элементы фильтра SVG через URL-адреса,Фильтрующий элемент SVG MDN.
Следующий эффект водной ряби основан на SVG.feTurbulence
Фильтр реализован, принцип указанРасскажите о фильтре feTurbulence в SVG.иПодробное знакомство с фильтром SVG feTurbulence, и заинтересованные друзья могут прочитать подробно.
feTurbulence滤镜
с помощьюPerlin
Алгоритмы шума имитируют случайные закономерности, подобные реальным вещам в природе. Он принимает следующие 5 свойств:
baseFrequency
Указывает основной частотный параметр шума, чем выше частота, тем плотнее шум.numOctaves
Он представляет количество множителей, чем больше число множителей, тем естественнее выглядит шум.seed
Атрибут представляет собой начальное значение генерации псевдослучайных чисел в эффекте фильтра feTurbulence, различные числаseed
Частота и плотность шума не изменяются, изменяется форма и расположение шума.stitchTiles
Определяет поведение шума Перлина на границах.type
значение атрибута имеетfractalNoise
иturbulence
, имитируя использование случайного стиляturbulence
.
В этом примере два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
Значение реализует эффект дрожания текста.
<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-фильтров, о которых вы не знали