В предыдущем уроке мы познакомились со свойствами анимации transform и transition-duration. В этом уроке мы продолжим изучать способы анимации изображений. Рассмотрим свойство анимации изображений filter CSS. С помощью этого свойства можно менять оттенки, контрастность, размытие....
Изображение становится чёрно-белым.
Наведите курсор мышки, чтобы увидеть эффект.
index.html
<div id="f1">
<img src="images/img1.jpg" />
</div>
<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%);
}
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>
<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%);
}
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>
<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);
}
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>
<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%);
}
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>
<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);
}
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>
<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%);
}
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%);
}