CSS анимация мисалдары

css-анимациялар

Булак: PC World

Анимациялар дүйнөсү күн сайын көбүрөөк болуп жатат, бизге деталдуу видео чыгарууларды түзүүгө жардам берген көптөгөн программалар бар. Эгер сиз дагы эле CSSти билбесеңиз, анда сиз аны менен таанышып, жасай турган нерселердин баарын табууга убакыт келди.

Бирок биз кененирээк айткыбыз келбегендиктен, анимацияларга толгон постту сунуштайбыз, алардын көбү белгилүү бир функцияны аткарат, башкалары жөн гана көңүл ачуу жана көңүл ачуу үчүн иштелип чыккан. Бул постто биз сизге эң мыкты CSS анимацияларын көрсөтөбүз жана андан тышкары, биз сизге башка кызыктуу программаларды көрсөтөбүз, анда сиз саякатыңызды дизайнер же анимация дизайнери катары уланта аласыз.

CSS

CSS катары аныкталат Адатта веб-баракчанын дизайн секторунда кеңири колдонулган ресурстун түрү. Башкача айтканда, бул белгилүү бир функцияларды аткаруу үчүн иштелип чыккан бир катар коддор. Эгерде сиз HTML деген терминди билсеңиз, анда сиз CSS терминин сөзсүз билесиз, анткени алар жанаша жүрөт жана экөө тең башка көптөгөн интернет-ресурстарды түзүүдө жана өнүктүрүүдө эки негизги түркүк болуп саналат.

Аны жакшыраак түшүнүшүңүз үчүн, мурунтан эле иштелип чыккан шаблондор бар, аларды оңдоп, өзүңүздүн веб-баракчаңызды түзө аласыз. Бирок, эгер сиз каалаган нерсе шилтеме даректерин же баракчаңыздын шилтемесин өзгөртүү болсо, анда ар бир программист билиши керек болгон кээ бир коддорду колдонуу керек болот.

Жалпы мүнөздөмөлөр

  • Бир караганда HTML жана CSS бирдей көрүнгөнү менен, андай эмес. HTML менен сиз веб-баракчаңыздан керектүү же каалаган маалыматты кайра багыттап, тарата аласыз. Башка жагынан алганда, CSS менен, сиз иштеп жаткан барактардын ар биринин тартибине уруксат бересиз. Нже алар бирдей, бирок жогоруда айтылгандай, экөө тең веб-баракчаларды өнүктүрүүдө эки негизги тирөөч болуп саналат.
  • CSSтин өзгөчөлүгү аны көптөгөн браузерлерде колдонсо болот, анын эч кандай белгиленген үлгүсү жок, бирок анын тили универсалдуу жана ошондой эле бардык жеткиликтүү түзмөктөргө ылайыктуу. Бул ишти жеңилдетет, анткени кеңейтүүнүн эч кандай түрү керек эмес, программист дагы.
  • Ошондой эле белгиленгендей, Эгер сиз долбоорлоону кааласаңыз, бул жакшы курал жана ушундай жол менен веб-баракчаңыздын интерфейсинин каалаган жагын өзгөртүңүз же өзгөртүңүз. Бул шрифттерден жана обондордон келип чыгат, б.а. Сизде кенен мүмкүнчүлүктөр бар.
  • Аны иштетүү оңой жана форматтын бул түрүн иштеп чыгуу дүйнөсүнөн баштоо үчүн алдын ала түзүлгөн коддор бар, бул көп жылдык практиканы талап кылат, бирок CSS Анын алгачкы анимацияларыңызды түзө турган баштапкы базасы бар жана профессионал веб-баракчанын дизайнери сыяктуу сезиңиз. Мындан тышкары, бул биринчи долбоорлорун иштеп баштоону каалагандардын бардыгы үчүн ачык система. Кыскача айтканда, эгер сиз издеп жаткан нерсе шаблондон же автоматтык веб-баракчаны жаратуучудан чыккыңыз келсе, CSS менен сиз укмуштуу окуяларыңызды баштасаңыз болот.

анимация мисалдары

Додекаэдр

додекаэдр

Булак: Веб дизайн

Додекаэдр — аниматор Вонтем тарабынан түзүлгөн анимация. Анимация толугу менен CSS аркылуу түзүүгө негизделген мында айлануучу додекаэдрдин конструкциясы анын жарыктыгын күчөткөн кара фондо көрсөтүлгөн. Дагы бир эске алынышы керек болгон деталь фигурага колдонулган эффекттер.

Бул анимациянын өзгөчөлүгү - анын үч өлчөмдүү дизайнга ээ болуу тенденциясы, бул андан да кызыктуу. Эгер сизге 3D дүйнөсү жана объекттердин көлөмү менен ойноо жакса, бул эң сонун анимация экени талашсыз.

анимацияланган гоблин

анимацияланган гоблин

Булак: Web Design

Бул анимация анимацияланган гоблин деп аталат жана аны дизайнер Аваз Бокиев жараткан, албетте, бул видео оюндар доорунун жылдыздуу каармандарынын бири Марио Брос.

Бул багыттуу кыймыл менен ойногондуктан stop-motion деп аталган анимация стили кыска ырааттуулугу аркылуу. Албетте, бул жылдыздуу анимация, эгерде сиз Mario Bros оюнун сүйгөн болсоңуз, анда бардык таанылган анимация болот. Бул CSSте түзүлгөн эң мыкты анимациялардын бири.

Фотоаппарат

Фотоаппарат

Булак: Web Design

Бул мыкты анимацияда анимацияланган фотокамера бар. Бул Дамием Перейра жана тарабынан түзүлгөн анимация камерага сүрөт тартууну окшоштурууга мүмкүндүк берет жөн гана баскычын басуу менен. Бул кызыктуу анимация, эгерде сизге сүрөт дүйнөсү жакса жана сизге веб-баракчаңызда ушул сыяктуу анимацияланган бөлүм керек.

Бул анимациянын кызыктуу жери, сиз каалаган сүрөттү койсоңуз болот жана баскычты басканда камера аны көрсөтөт. Бул, албетте, CSS-де иштелип чыккан эң креативдүү анимациялардын бири.

шаркыратма күн системасы

күн системасы

Булак: Web Design

Күн системасы жөнүндөгү бул анимацияны Тэди Уолш жараткан, анда ал биздин Күн системасынын кичинекей моделин же симуляциясын көрсөтөт. Бул эң сонун анимация, анткени ар бир планетанын ар кандай ылдамдыкта кандай кыймылдаарын көрө аласыз. 

Бул эң реалдуу жана эң укмуштуу анимациялардын бири. Эгер сиз астрономия дүйнөсүндө иштесеңиз же ааламдын жана анын планеталарынын күйөрмандары болсоңуз, бул сизге кызыктуу болушу мүмкүн. Бул так, бул эң мыкты жана таң калыштуулардын бири катары сыйлык алган анимация.

жылдыз согуштары анимация

жылдыз согуштары анимация

Булак: Web Design

Эгер сизге Жылдыздар согушу жакса, анда Донован Хатчинсон жараткан бул анимацияны өткөрүп жибере албайсыз. Бул, албетте, белгилүү Star Wars дастанын баш сөзүнүн өзгөчө эффекттери менен анимация. Бул анимациянын таң калыштуусу, анын ар кандай шрифттердин кыймылы менен кандайча ойногону.

Бул, албетте, жылдыздуу анимациялардын бири, анткени ал сага сунуш кылган ойдон чыгарылган элементтердин ар бирин эске алган: галактикалар, LED жарыктары, караңгы фондор жана укмуштай шрифттер.

Мындан тышкары, кыймыл эффекттери да бир топ ийгиликтүү болуп, көрүүчүнүн көп көңүлүн бурат.

Анимацияларды түзүү үчүн колдонмолор

Adobe Spark

Adobe Spark – бул Adobe компаниясынын бир бөлүгү жана укмуштуудай анимацияларды жаратууга жана ошону менен чексиз анимацияланган жана кызыктуу видеолорду тартууга жооптуу курал. Бул инструменттин көңүлүн бурган нерсе жана анын пайдасына турган нерсе - бул мобилдик аппараттар, планшеттер жана компьютерлер үчүн жеткиликтүү. Ошондой эле, эгер сиз веб-сайтыңыз үчүн сапаттуу контент түзүүнү каалап жатсаңыз, анда бул эң сонун курал, анткени анда сиздин мейкиндигиңизди зыярат кылуу үчүн жагымдуу жерге айлантуу үчүн миңдеген декоративдик шаблондор бар.

Animation Үстөл

Бул жылдыздуу колдонмолордун бири, эгерде сиз иллюстратор болсоңуз жана дагы эле сүрөттөрүңүзгө кантип жашоо берүүнү билбей жатсаңыз, бул куралдын аркасында сиз көркөм долбоорлоруңузга бурулуш бере аласыз, ошондой эле ар бир чиймелериңизди ошол жерде жасай аласыз. Анда щеткалардын толук пакети, ар кандай учтардагы карандаштар, түстөрдүн кенен диапазону бар жана сизде биринчи алдын ала эскиздериңизди жасоо мүмкүнчүлүгү бар, албетте, анимация дүйнөсүнөн баштоо үчүн эмне керек экени талашсыз. өз чыгармаларыңыз. Аракет кылыңыз жана каалоо менен калбаңыз.

synfig Studio

Synfig 2D анимацияларды түзүү үчүн эң мыкты программалардын бири. Эгер сизге эң таза Дисней стилиндеги анимация дүйнөсү жакса, бул негизги куралдардын бири. Synfig менен сизде чиймелериңизге колдоно турган щеткалардын, чыпкалардын жана ал тургай эффекттердин кеңири спектри бар.

Ошондой эле, эгер сиз 2D күйөрманы болсоңуз, программанын бул түрүн сынап көрүү мүмкүнчүлүгүн өткөрүп жибере албайсыз, анткени алар иллюстрацияларыңызга кыймыл жана жан тартуулоо мүмкүнчүлүгүн сунуштайт. Эгерде сиз мурда векторлор менен иштеген болсоңуз, анда бул программа сиз үчүн башкача же татаал болбойт.

Premiere Pro

Premiere Pro Adobe пакетиндеги негизги куралдардын дагы бири. Бул кесипкөй видео редакторлор жана көптөгөн анимация студиялары тарабынан эң көп колдонулган программалардын бири. Премьеранын жардамы менен сиз биринчи анимацияларыңызды түзүп, андагы көптөгөн эффекттердин арасында алаксып кете аласыз.

Кошумчалай кетсек, эгер сиз аудиовизуалдык сектордо башталгыч болсоңуз, анда сизди анын интерфейси менен тааныштырып, фантазияңызга жана эң креативдүү тарабыңызга тартууга мүмкүндүк берүүчү чакан окуу куралдары бар.

Ал Android жана iOS үчүн жеткиликтүү. Бир гана кемчилиги - бул бекер тиркеме эмес, ал бир аз чыгымды талап кылат.

жыйынтыктоо

CSS'те анимацияларды түзүү абдан жөнөкөй, сиз эмне кылышыңыз керек, бул сектордо көп жылдар бою иштегендерди үйрөнүү жана аларга дем алуу. Көрүнүп тургандай, көптөгөн анимациялар бар, андан тышкары бир топ функционалдык ресурстарды колдонгон башка дизайнерлер бар, мисалы, учак түрүндөгү атактуу Windows таштандысынын дизайны, ал бардык иш тактасында жылдырып, эмнени жок кылат. сен каалабайсыңбы.

Кыскасы, иштелип чыккан көптөгөн идеялар жана генийлер бар, бирок азыр CSS менен биринчи анимацияларыңызды программалап, иштеп чыгуу кезеги сизде.


Макаланын мазмуну биздин принциптерге карманат редакциялык этика. Ката жөнүндө кабарлоо үчүн чыкылдатыңыз бул жерде.

Комментарий биринчи болуп

Комментарий калтырыңыз

Сиздин электрондук почта дареги жарыяланбайт.

*

*

  1. Маалыматтар үчүн жооптуу: Мигель Анхель Гатан
  2. Маалыматтын максаты: СПАМды көзөмөлдөө, комментарийлерди башкаруу.
  3. Мыйзамдуулук: Сиздин макулдугуңуз
  4. Маалыматтарды берүү: Маалыматтар үчүнчү жактарга юридикалык милдеттенмелерден тышкары билдирилбейт.
  5. Маалыматтарды сактоо: Occentus Networks (ЕС) тарабынан уюштурулган маалыматтар базасы
  6. Укуктар: Каалаган убакта маалыматыңызды чектеп, калыбына келтирип жана жок кыла аласыз.