Təmiz CSS-da 8 faydalı imkan: 6) Şəkilin kəsilmə animasiyası
Digər
Code-News
11.03.2019
Farid Pardashunas
#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
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.
Linki kopyala
Həftənin xəbərləri
Whatsapp yaxın zamanda 2 yeni funksiyanı əldə edəcək
Qutusu açılmamış birinci nəsil iPhone modeli 15 Pro Max-dan təxminən 80 qat baha qiymətə satılıb!