30 „Cool CSS“ animacijų, kurias turite pamatyti
Anksčiau mes paskelbėme kūrybinius teksto efektus, kuriuos galite padaryti su CSS, ir daug kitų įdomių dalykų, kurių, jūsų manymu, galėjo padaryti su CSS. Tačiau šis rinkinys sutelktas į daugelį dalykų, kuriuos galite suaktyvinti su CSS, ir daugelis šių kūrinių padės jums pakelti antakius ar du.
Nuo įkėlimo animacijų iki perjungimo ir modalinių langų iki drebulių elementų, ši krūva 30 neįprastų ir kūrybingų CSS animacijos panaudojimo būdų gali atverti savo mintis daugiau būdų, kaip galite žaisti su CSS animacijomis, kurias jūs tikriausiai niekada negalvojote.
CSS Įkeliama animacija pagal patrikhjelm
Septyni animaciniai taškai, perkeliantys į kairę ir į dešinę, žymi pakrovimo veiksmą.
Animuotas pirkinių krepšelio piktograma, sukurta jonitrythall
Mieli animaciniai efektai, kai į krepšelį įtraukiamos maisto prekės. Jei norite daugiau, slinkite žemyn.
Hamburgo CSS3 tik animacija Dawid Krajewski
Sukurta su grynu CSS, be JS ar nieko kito.
404 animacinis simbolis su es
Bent jau su šiuo klaidos puslapiu kūrėjas dirba su juo. Net jei tai yra 404.
„CSS Mars Landing“ iš „mgitch“
Mes nusileidome Marse! Pagaminta su CSS.
„The Avenger By mariosmaselli“
Ar galite išgirsti Hulko pyktį per ekraną? Atvėsinkite?
Dienos / nakties perjungimas Pagal jsndks
Dabar galite perjungti dieną ir naktį su CSS. Genius idėja!
„Google“ dabar trečiosios šalies programa, sukurta kodeku
„Google“ dabar trečiosios šalies programos, animuotos.
Clo clo Judag
Ar kakas juda taip? Jūs statote, kad tai, kartu su jiggine kaklu. Didžioji CSS3 praktika.
Mariusbalajo meniu piktogramos animacija
Paprasta idėja; žiūrėkite, kad meniu mygtukas įvyktų, kai slinkite žemyn.
Kitas „Case Preloader“ iš „Maseone“
Nuostabus CSS ritmo įkėlimo animacija. Hipnotinis, ar ne?
Pateikite mygtuką, esantį augintoju
Spustelėkite, kad pateiktumėte, ir mygtukas suaktyvina įkėlimo procesą, kol pateikimas bus baigtas!
Elastinis SVG šoninės juostos medžiagos dizainas suez
Norėdami pamatyti elastingą šoninės juostos efektą, vilkite baltą juostą į dešinę.
Dalelių mygtukas Iki igcorreia
Atlikite tai, ką sako mygtukas: užveskite nuostabą.
„Gooey“ mygtukas „Lucas Bebber“
Spustelėkite, kad pasiektumėte „Gooey“ efektą. Jūs jį pamatysite, kai pamatysite, ir spustelėsite jį kelis kartus daugiau. Amiritas?
Flipside mygtukas Pagal hakimel
Spustelėkite bet kurią mygtuką „Ištrinti“, o mygtukas apverčiasi pagal tai, kur spustelėsite.
Tikras mėsainių meniu! CharlesSmart
Iš tiesų skanus mėsainių meniu. Spustelėkite hamburgerį
„Cruisin“ pagal yy
Žr. Motociklą.
3D kubo banga Waddington
Šventosios 3D kubo formos!
Parašo animacija Drygiel
Štai parašas, kuris iš tikrųjų nėra GIF animacija, o vietoj PNG seka, animuota su CSS3.
Fono gradiento animacija Iki quasimondo
Šis triukas keičia fono gradientą iš vienos spalvos į kitą sklandžiai, nepertraukiamai.
Žvaigždžių karų perjungimo piktograma Rss
Mėgaukitės mėsainių meniu, kuris taps įjungtas į šviestuvus (kryžius).
GIF stiliaus animacija
Stebėkite, kaip nuotrauka įvyksta iš taškų meno.
Focus in / out įvesties animacija Iki fluxus
Nedidelis animacinis pieštukas su animaciniu rašmenimis rašo užpildytą forumą.
Chromatinis trikampisBe felipedefarias
Nuostabus optinis iliuzija, taip, padaryta su CSS3.
Kavos virimo aparatas
Štai priminimas, kad reikia išgerti kasdienę kavos dozę. Kaip jums reikia.
„Chrome“ dinozauras
Ar nepavyksta pasiekti puslapio, kuriam norite atsisakyti ryšio? Štai dinozauras, kurį visada matote, kai taip atsitinka, tik šį kartą jis veikia iš meteorito!
CSS kratymas Elrumordelaluz
Pakreipkite virš kiekvieno efekto, kad pamatytumėte mažą vaikiną.
„Newton's Cradle Loader“ visų dalykų smitty
Jei žinote fiziką, tikrai žinote Niutono lopšį, bet tikriausiai tai nepatinka.
Paleiskite Modal By koolhaus
Spustelėkite norėdami pamatyti gražią ir sklandžią modalinio lango animaciją.
Pasivaikščiojimo robotas pagal P233
Šis robotas tęsia vaikščioti, vaikščioti, vaikščioti aplink Y ašį.
Lankstymo rodyklių lankstymas pagal Hakim
Nuo pirmojo puslapio iki paskutinio, šis puslapių kūrimo animacija aiškiai parodo, kaip toli, pagyvenę.
Dabar skaitykite: 15 gražių teksto efektų, sukurtų su CSS
