Самостоятельная работа по веб-программирование Саидов Сарварбек Принял: Хожамуратов Бекмурод
Анимационные работы в CSS3
Синтаксис animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none; body { margin: 0; background-image: linear-gradient(-45deg, transparent 50%, #E8E8E4 50%, #E8E8E4 55%, transparent 55%), linear-gradient(-45deg, #E8E8E4 5%, transparent 5%); background-color: #FEFFFE; background-size: 1em 1em; } kbd { display: block; } section { width: 660px; margin: 0 auto; overflow: hidden; } .container, .container1, .container2 { padding: 30px 0 20px; width: 210px; text-align: center; float: left; } ul { list-style: none; padding: 10px; display: inline-block; background: #3C4147; border-radius: 10px; box-shadow: inset 2px 2px 5px rgba(0,0,0,.7), 2px 2px 1px #3C4147; } li { width: 30px; height: 30px; border-radius: 50%; background: black; box-shadow: inset 2px 2px 4px rgba(0,0,0,.4), inset -2px -2px 4px rgba(255,255,255,.6); } @keyframes traffic { 100%{background: #FB000D;} } @keyframes traffic1 { 100%{background: #FED21D;} } @keyframes traffic2 { 100%{background: #7DFA04;} } li:nth-of-type(1) { margin-bottom:5px; animation: traffic 2s forwards; } li:nth-of-type(2) { margin-bottom: 5px; animation: traffic1 2s forwards 2s; } li:nth-of-type(3) { animation: traffic2 2s forwards 4s; } .container1 li:nth-of-type(1) { margin-bottom:5px; animation: traffic 2s backwards; } .container1 li:nth-of-type(2) { margin-bottom: 5px; animation: traffic1 2s backwards 2s; } .container1 li:nth-of-type(3) { animation: traffic2 2s backwards 4s; } .container2 li:nth-of-type(1) { margin-bottom:5px; animation: traffic 2s both; } .container2 li:nth-of-type(2) { margin-bottom: 5px; animation: traffic1 2s both 2s; } .container3 li:nth-of-type(3) { animation: traffic2 2s both 4s; } footer { clear: both; text-align: center; padding: 20px 0; font: 14px/1.5 arial; background: #C8C2B7; border-top: 3px solid #6D6D6D; color: #6D6D6D; } p{margin:0} Download 391,32 Kb. Do'stlaringiz bilan baham: Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©hozir.org 2024 ma'muriyatiga murojaat qiling |
kiriting | ro'yxatdan o'tish Bosh sahifa юртда тантана Боғда битган Бугун юртда Эшитганлар жилманглар Эшитмадим деманглар битган бодомлар Yangiariq tumani qitish marakazi Raqamli texnologiyalar ilishida muhokamadan tasdiqqa tavsiya tavsiya etilgan iqtisodiyot kafedrasi steiermarkischen landesregierung asarlaringizni yuboring o'zingizning asarlaringizni Iltimos faqat faqat o'zingizning steierm rkischen landesregierung fachabteilung rkischen landesregierung hamshira loyihasi loyihasi mavsum faolyatining oqibatlari asosiy adabiyotlar fakulteti ahborot ahborot havfsizligi havfsizligi kafedrasi fanidan bo’yicha fakulteti iqtisodiyot boshqaruv fakulteti chiqarishda boshqaruv ishlab chiqarishda iqtisodiyot fakultet multiservis tarmoqlari fanidan asosiy Uzbek fanidan mavzulari potok asosidagi multiservis 'aliyyil a'ziym billahil 'aliyyil illaa billahil quvvata illaa falah' deganida Kompyuter savodxonligi bo’yicha mustaqil 'alal falah' Hayya 'alal 'alas soloh Hayya 'alas mavsum boyicha yuklab olish |