Веб-мастерская Ларисы ВоронинойСвойство filter CSS. Анимация изображений CSS.
WEB-мастерская Ларисы Ворониной logo

Свойство filter CSS. Анимация изображений CSS. Фев 7 2017


В предыдущем уроке мы познакомились со свойствами анимации transform и transition-duration. В этом уроке мы продолжим изучать способы анимации изображений. Рассмотрим свойство анимации изображений filter CSS. С помощью этого свойства можно менять оттенки, контрастность, размытие....

Изображение становится чёрно-белым.

Наведите курсор мышки, чтобы увидеть эффект.

index.html
<div id="f1">
     <img src="images/img1.jpg" />
</div>
style.css
#f1 {
margin-left: 50px;
}
#f1 img {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
#f1 img:hover {
filter: grayscale(100%);
}

Эффект "Сепия".

index.html
<div id="f2">
     <img src="images/img2.jpg" />
</div>
style.css
#f2 {
margin-left: 50px;
}
#f2 img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#f2 img:hover {
-webkit-filter: sepia(100%);
}

Эффект размытия.

index.html
<div id="f3">
     <img src="images/img3.jpg" />
</div>
style.css
#f3 {
margin-left: 50px;
}
#f3 img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#f3 img:hover {
-webkit-filter: blur(5px);
}

Увеличение контрастности.

index.html
<div id="f4">
     <img src="images/img4.jpg" />
</div>
style.css
#f4 {
margin-left: 50px;
}
#f4 img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#f4 img:hover {
-webkit-filter: contrast(185%);
}

Изменение оттенков.

index.html
<div id="f5">
     <img src="images/img5.jpg" />
</div>
style.css
#f5 {
margin-left: 50px;
}
#f5 img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#f5 img:hover {
-webkit-filter: hue-rotate(65deg);
}

Инверсия.

index.html
<div id="f6">
     <img src="images/img6.jpg" />
</div>
style.css
#f6 {
margin-left: 50px;
}
#f6 img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#f6 img:hover {
-webkit-filter: invert(100%);
}

Рейтинг@Mail.ru