Īstenošana HTML5 Y CSS3 Tas ne tikai nodrošināja jaunu veidu, kā standartizēt lapas elementus, dodot iespēju iekļaut jaunus elementus, kas nodrošinātu lielāku lietderību tīmekļa lietojumprogrammu izstrādē, bet arī ļāva paplašināt šo iespēju iespējas, malā tādas valodas kā JavaScript efektiem un pārejām, pateicoties CSS3.
Acīmredzot ir bibliotēkas JavaScript kam ir neticami efekti un kas padara to ieviešanu pavisam vienkāršu, taču lielākoties šī funkcionalitāte ir iekapsulēta un modifikāciju iespējas ir ļoti sarežģītas.
Šiem gadījumiem mēs varam izmantot CSS3 un ar nelielu darbu mēs varam sasniegt patiešām pārsteidzošus efektus un funkcijas, piemēram, karuseli, kas agrāk bija iespējams tikai ar JavaScript.
Mūsu karuseļa izveide
Vispirms mēs iekļausim mūsu karuseļa HTML kodu, kas būs pavisam vienkāršs, jo tas ietvers tikai mūsu stila lapas iekļaušanu, tagu, kas norāda, ka viss tajā esošais būs grafisks saturs, piemēram, fotoattēli, diagrammas vai šajā gadījumā mūsu karuselis:
CSS3 karuselisIr svarīgi izcelt klases, kuras esam iekļāvuši savā div, jo tās ir tās, kas ļaus mums veikt manipulācijas mūsu css. Kad tas būs izdarīts, mēs sāksim īstenot mūsu stilu lapu, vispirms piešķirot mūsu elementiem 3D izskatu, šim nolūkam mēs izmantosim īpašumu perspektīva Y pārveidot:
.kartes {pozīcija: absolūta; augšpusē: 50%; pa kreisi: 50%; platums: 190 pikseļi; augstums: 210 pikseļi; rezerve: 0; -Webkit-perspektīva: 800 pikseļi; perspektīva: 800 pikseļi; -webkit-transform: tulkot (-50%, -50%); -ms-transform: tulkot (-50%, -50%); pārveidot: tulkot (-50%, -50%); }Ņemot to vērā, mēs iekļausim dažas animācijas, lai karuseļa stils darbotos saskaņā ar noteikumu, ko mēs definēsim vēlāk, kā arī sekundes, kuras mēs vēlamies, lai tas veiktu pārejas, un mēs iestatām savu karšu pozīciju karuselis:
.cards__content {pozīcija: absolūts; platums: 100%; augstums: 100%; -webkit-transform-style: saglabāt-3d; pārveidot-stils: saglabāt-3d; -webkit-transform: translateZ (-182px) rotateY (0); pārveidot: translateZ (-182px) rotateY (0); -webkit-animācija: karuselis 10s bezgalīgs kubiskais bezjē (1, 0,015, 0,295, 1,225) uz priekšu; animācija: karuselis 10s bezgalīgs kubiskais bezjērs (1, 0,015, 0,295, 1,225) uz priekšu; } .cards__element {position: absolūts; augšā: 0; pa kreisi: 0; platums: 190 pikseļi; augstums: 210 pikseļi; robežas rādiuss: 6 pikseļi; }Tagad mēs strādāsim pie kartes atsevišķi, izmantojot n-bērns, lai katram no tiem ievietotu atšķirīgu fona krāsu un veiktu pārejas:
.cards__element: n-bērns (1) {background: # 394fd5; -webkit-transform: rotateY (0) translateZ (182px); transformēt: rotateY (0) translateZ (182px); } .cards__element: n-bērns (2) {background: # 39d570; -webkit-transform: rotateY (120deg) translateZ (182px); pārveidot: rotateY (120deg) translateZ (182px); } .cards__element: n-bērns (3) {background: # f0091f; -webkit-transform: rotateY (240deg) translateZ (182px); pārveidot: rotateY (240deg) translateZ (182px); }Visbeidzot, mēs iestatījām fona krāsu ķermenis un mēs pievienojam savus noteikumus vārdam karuselis, mēs to darām ar atslēgu rāmji kas ir atbildīgs par animācijas koda noteikšanu:
pamatteksts {background: # 6c4949; } @ -webkit-keyframes karuselis {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0); pārveidot: translateZ (-182px) rotateY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); pārveidot: translateZ (-182px) rotateY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); pārveidot: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); pārveidot: translateZ (-182px) rotateY (-360deg); }} @keyframes karuselis {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0); pārveidot: translateZ (-182px) rotateY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); pārveidot: translateZ (-182px) rotateY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); pārveidot: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); pārveidot: translateZ (-182px) rotateY (-360deg); }}Kad tas būs gatavs, redzēsim, kā izskatās mūsu animētais karuselis mūsu pārlūkprogrammā:
Kā redzam, tas ir diezgan vienkārši, taču tas pilda savas funkcijas un vēl labāk, neizmantojot nevienu koda rindu JavaScriptIkvienam atliek tikai ņemt piemēru un nedaudz eksperimentēt ar to, palielinot tā izmēru, pievienojot attēlus un mainot karuseļa stilu, kas ir pilnīgi iespējams tā uzbūves veida dēļ.
