Įgyvendinimas HTML5 Y CSS3 Tai ne tik suteikė naują būdą, kaip standartizuoti puslapio elementus, suteikiant galimybę įtraukti naujus elementus, kurie būtų naudingesni kuriant žiniatinklio programas, bet ir išplėtė šių galimybių galimybes. neskaitant tokių kalbų kaip „JavaScript“ dėl efektų ir perėjimų dėka CSS3.
Akivaizdu, kad yra bibliotekų „JavaScript“ kurie daro neįtikėtiną poveikį ir daro jų įgyvendinimą gana paprastą, tačiau dažniausiai ši funkcija yra uždengta, o modifikacijų galimybės yra labai sudėtingos.
Šiais atvejais galime naudoti CSS3 ir šiek tiek padirbėję galime pasiekti tikrai nuostabių efektų ir funkcijų, tokių kaip karuselė, kas anksčiau buvo įmanoma tik su „JavaScript“.
Kuriame mūsų karuselę
Pirmiausia įvesime savo karuselės HTML kodą, kuris bus gana paprastas, nes į jį bus įtrauktas tik mūsų stiliaus lapas, žyma, nurodanti, kad viskas, kas yra jo viduje, bus grafinis turinys, pvz., Nuotraukos, diagramos ar šiuo atveju mūsų karuselė:
CSS3 karuselėSvarbu pabrėžti klases, kurias įtraukėme į savo div, nes būtent jos leis mums atlikti manipuliacijas mūsų css. Kai tai bus padaryta, pradėsime įgyvendinti savo stiliaus lapą, pirmiausia suteikdami savo elementams 3D išvaizdą, tam mes naudosime nuosavybę perspektyva Y transformuoti:
.cards {pozicija: absoliuti; viršuje: 50%; kairėje: 50%; plotis: 190 pikselių; aukštis: 210 pikselių; paraštė: 0; -Webkit-perspektyva: 800px; perspektyva: 800 taškų; -webkit-transform: versti (-50%, -50%); -ms-transform: versti (-50%, -50%); transformuoti: versti (-50%, -50%); }Turėdami tai, ketiname įtraukti keletą animacijų, kad karuselės stilius veiktų pagal taisyklę, kurią nustatysime vėliau, taip pat nustatysime, kokias sekundes norime, kad ji atliktų perėjimus, ir nustatome savo kortelių padėtį karuselė:
.cards__content {pozicija: absoliuti; plotis: 100%; aukštis: 100%; -webkit-transform-style: išsaugoti-3d; transform-style: išsaugoti-3d; -webkit-transform: translateZ (-182px) rotateY (0); transformuoti: translateZ (-182px) rotateY (0); -webkit-animacija: karuselė 10s begalinis kubinis beziras (1, 0,015, 0,295, 1,225) į priekį; animacija: karuselė 10s begalinis kubinis beziras (1, 0,015, 0,295, 1,225) į priekį; } .cards__element {pozicija: absoliuti; viršuje: 0; kairėje: 0; plotis: 190 pikselių; aukštis: 210 pikselių; ribos spindulys: 6 taškų; }Dabar su kortele dirbsime atskirai n-as vaikas, kad kiekvienam iš jų būtų skirtinga fono spalva ir jų perėjimai:
.cards__element: n-asis vaikas (1) {fonas: # 394fd5; -webkit-transform: rotateY (0) translateZ (182px); transformuoti: rotateY (0) translateZ (182px); } .cards__element: n-asis vaikas (2) {background: # 39d570; -webkit-transform: rotateY (120deg) translateZ (182px); transformuoti: rotateY (120deg) translateZ (182px); } .cards__element: n-asis vaikas (3) {background: # f0091f; -webkit-transform: rotateY (240deg) translateZ (182px); transformuoti: rotateY (240deg) translateZ (182px); }Galiausiai mes nustatėme fono spalvą kūnas ir pridedame savo žodžio karuselės taisykles, tai darome raktų rėmeliai kuris yra atsakingas už animacijos kodo apibrėžimą:
korpusas {fonas: # 6c4949; } @ -webkit-keyframes karuselė {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0); transformuoti: translateZ (-182px) rotateY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); transformuoti: translateZ (-182px) rotateY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); transformuoti: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); transformuoti: translateZ (-182px) rotateY (-360deg); }} @keyframes karuselė {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0); transformuoti: translateZ (-182px) rotateY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); transformuoti: translateZ (-182px) rotateY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); transformuoti: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); transformuoti: translateZ (-182px) rotateY (-360deg); }}Parengę tai, pažiūrėkime, kaip atrodo mūsų animacinė karuselė mūsų naršyklėje:
Kaip matome, tai gana paprasta, tačiau ji atlieka savo funkcijas ir dar geriau, nenaudojant vienos kodo eilutės „JavaScript“Belieka visiems paimti pavyzdį ir šiek tiek su juo eksperimentuoti, padidinant jo dydį, pridedant vaizdų ir keičiant karuselės stilių - tai visiškai įmanoma dėl to, kaip ji buvo pastatyta.
