Təmiz CSS-da 8 faydalı imkan: 6) Şəkilin kəsilmə animasiyası

11.03.2019 0 PAYLAŞIM 116 OXUNMA

#Step IT Academy tərəfindən təqdim olunur  





    CSS texnologiyasında 8 faydalı həllər barədə olan məqalə seriyasına davam edirik.

Öncəki hissələr:

1) «Yapışqan» footer
2) İmage zoom on hover
3) Daimi Night Mode
4) Custom bullet-lar
5) Parallaks-şəkillər


6. Şəkilin kəsilmə animasiyası


    "Yapışqan" footer həllindəki kimi, şəkilin kəsilmə animasiyası da CSS3-ə qədər yaratmaq çətin idi. CSS3-ün object-fit və object-position parametrləri bizə şəklin daxili görüntü həcmlərini onun tərəflərinin ölçülərindən asılı olmadan dəyişmək imkanını verir. Həmçinin CSS3-ün digər imkanları sayəsində şəkilin ölçü dəyişikliklərini animasiya formasında əks etmək olur.
Nümunədə psevdosinif :checked istifadə olunub və Javascript-ə ehtiyyac yoxdur.