10 pārsteidzoši inovatīvas CSS3 animācijas piemēri
CSS3 ir radījis vairākas estētiski iespaidīgas jaunas iespējas. Iespējams, ka jautrākais no tiem, ar ko spēlēt, ir CSS animācija, kas ļauj veikt daudzas kustību balstītas funkcijas, kuras parasti tiek deleģētas JavaScript. Pievienojieties maniem episkajiem meklējumiem, lai atklātu stilīgāko, novatoriskāko un, kas vēl svarīgāk, visnepieciešamāko CSS animācijas izmantošanu tīmeklī. Sāc!
Brīdinājums: Šīs animācijas ir diezgan specifiskas pārlūkprogrammai, tāpēc, ja jūs sērfojat IE6, ir pienācis laiks pārtraukt Saved By The Bell skatīšanos, atvienot iezvanes savienojumu un lejupielādēt modernu pārlūku.
Rotējošie polaroids
Šī apmācība parāda, kā izveidot pārsteidzošu, animētu fotogrāfiju kaudzi, izmantojot tonnu jaunu CSS3 komandu. Mēs esam iesākuši spēcīgu sākumu, šo būs grūti pārspēt.
Noklikšķiniet, lai skatītu demonstrāciju
Matrica
Sekojiet baltajam trusis .. err es domāju, apskatiet šo lielisko Matrix animāciju. Ne gluži taisnība filmai (atsevišķi varoņi nemainās), bet tomēr iespaidīga. Redzot, kā The Matrix ir viens no visu laiku labākajiem sci-fi sižetiem (es runāju par pirmo filmu, nevis par abām pārējām divām katastrofām), šis ielēks mūsu saraksta augšgalā un bez šaubām paliks tur kādu laiku, līdz var atrast cienīgu konkurentu.
Noklikšķiniet, lai skatītu demonstrāciju
Trippy vērpšanas kolonna jautri
Šajā trakajā animācijā ir attēlota vērpšanas kolonna, ko veido rotējošas krāsainu kastu un teksta rindas. Kopējais efekts ir traki vēss un nenoliedzami reibinošs. Šis ir nedaudz pārāk izlauzts, lai nozagtu pērkonu no The Matrix, lai arī čempions paliek.
Padoms: lai palielinātu kustību slimības iespējamību, skatoties animāciju, ritiniet uz augšu un uz leju un pakratiet galvu uz priekšu un atpakaļ (mēs nekādā gadījumā neesam atbildīgi par jebkādu sabojātu aparatūru, kas jums pieder pēc pusdienu mētāšanas pa visu galdu).
Noklikšķiniet, lai skatītu demonstrāciju
DJ varonis
Šī apmācība apvieno CSS3 un jQuery, lai izveidotu vērpšanas ierakstus. Izmantojot ekrānā esošās vadīklas, jūs varat kontrolēt ierakstu ātrumu vai vienkārši ar peli satvert ierakstu, lai ievietotu dažus rievojošus skrāpējumus.
Virtuālie galdiņi uz vintage koka fona? Tas varētu būt diezgan liels konkurentu ļaudis, šīs debates uzkarst. Iet uz priekšu, noklikšķiniet uz tā. Jūs zināt, ka vēlaties spēlēt.
Noklikšķiniet, lai skatītu demonstrāciju
3D animēts kubs
Šis ļauj izmantot bulttaustiņus, lai kontrolētu 3D kuba rotāciju. Sākumā es domāju, ka tas ir diezgan klibs, bet tad es sapratu, ka tu vari turēt bulttaustiņus, lai padarītu to ķēmojošu un nonāktu turbo vērpšanas nāves režīmā, kas to acīmredzot nedaudz izpirka. Mega stila punkti par Sonic The Hedgehog iekļaušanu.
Noklikšķiniet, lai skatītu demonstrāciju
Raķešu kuģis
Raķešu kuģis, bez šaubām, ko jums atnesa MS-Paint brīnumi, lido pāri debesīm ar elpu aizraujošu ātrumu. Šķirot… Patiesībā tas peld līdzās, un to pārvadā dīvains, taisnstūrveida spēka lauks ar punktētām līnijām. Apmēram pusceļā animācijas laikā raķete praktiski pazūd bez redzama iemesla, tāpēc tā acīmredzami ir ļoti slepena augsto tehnoloģiju slepena raķete ar bruņotu apsekošanas ierīci, lai novērstu iebrukušos vulkānu iznīcinātājus.
Ne gluži nopietns konkurents. Patiesībā, kāpēc es jums to pat parādīju? Un vēl būtiskāk, vai ir tāda lieta kā Vulcan iznīcinātājs, vai es tikai to atlīdzināju?
Noklikšķiniet, lai skatītu demonstrāciju
Laikapstākļi
Sniegs
Lapas
Izskalosim visus laika apstākļus vienā piegājienā? Kur ir siera pilna animācija, tur ir arī neizbēgami krītošs sniegs, lapas, lietus utt. Nesaprotiet mani nepareizi, tie ir diezgan forši un var izraisīt patiešām lieliskas sezonālās vietņu modifikācijas. Tomēr šie konkrētie izpildījumi, lai arī ir labi veikti, ar kontekstu nav tik radoši. Paziņojiet man, ja izveidojat vietni, kurā ir milzu krusts akmeņi, kas iznīcina visu lapas saturu, tas tagad būtu kaut kas.
Noklikšķiniet, lai skatītu sniega demonstrāciju
Noklikšķiniet, lai skatītu lapu lapu demonstrāciju
Pārsega plūsma
Šī animācija imitē Apple vāka plūsmu, izmantojot hibrīdu CSS / jQuery tehniku, piemēram, iepriekš minēto DJ Hero piemēru. Atdarinot Apple, tas labi darbojas gan foršajās, gan satracinātajās kategorijās, kā arī veic inovatīvu darbu (tas ir vienīgais CSS3 Cover Flow viltotais, ko es varēju atrast). Mums ir vēl viens sāncensis uz rokām.
Noklikšķiniet, lai skatītu demonstrāciju
Zvaigžņu karu rāpošana
Tas tā, spēle beigusies. Es vēlētos pateikties pārējiem dalībniekiem par spēlēšanu, bet šis saņem balvu. Tā ir sākuma frāze no Zvaigžņu kariem, lai skaļi raudātu ... HTML un CSS (tas ir dzīvs teksts, kuru jūs skatāties muļķī). Es jautāju jums, kā varētu būt CSS animācijas labāka izmantošana? Es apgalvoju, ka tāda nav. Uzticieties man, parādiet to savam nerdiest draugam, un viņš Ziemassvētku rītā maģiski pārvērtīsies par četrgadīgu.
Noklikšķiniet uz episkā attēla demonstrācijas
(Nepieciešams Safari + sniega leopards)
Secinājums
Tiem no jums, kuri domā, ka šis konkurss bija sagrozīts, jums ir taisnība. Es izstrādāju konkursa ideju pēc Zvaigžņu karu piemēra atrašanas, lai tikai uzsvērtu, cik daudz visa pārējā palicis salīdzinājumā. Raksta īstais mērķis ir parādīt, ka ar to samērā vienkāršo animācijas funkciju, kas iebūvēta CSS3, galā jūs nevarat izdomāt lieliskās lietas, kuras varat izveidot.
Izmantojiet zemāk esošos komentārus, lai paziņotu mums, kurš bija jūsu iecienītākais. Turklāt, ja zināt kādus citus piemērus, lūdzu, dalieties ar tiem!
