Dodajanje življenja spletnim stranem: Potopite se v animacije CSS

Animacije CSS v spletne strani vnašajo dinamiko in interaktivnost ter statične elemente spreminjajo v vizualno zanimive izkušnje. V tem vodniku boste spoznali osnove animacij CSS, ki vam omogočajo dodajanje subtilnih gibov ali ustvarjanje zapletenih interaktivnih učinkov.

Razumevanje osnovnih pojmov:

• Ključni okvirji: Ključni okvirji, ki so temelj animacij CSS, določajo začetno in končno stanje (in morebitne vmesne korake) animacije. Uporabite @keyframes pravilo za opredelitev teh stanj.
• Lastnosti animacije: Ko določite ključne kadre, jih uporabite za element z uporabo animacija lastnost. Ta lastnost določa podrobnosti, kot so ime animacije (sklic na ključne kadre), trajanje, časovna funkcija (kako animacija napreduje skozi čas), število iteracij (kolikokrat se predvaja) in drugo.

Izdelava prve animacije:

Ustvarimo preprosto animacijo, ki poskrbi za rahlo utripanje gumba:

.pulsating-button {
  meja: 2px trdno #333;
  oblazinjenje: 10px 20px;
  barva ozadja: #ddd;
  kurzor: kazalec;
  položaj: relativno;  /* Potrebno za pozicioniranje psevdoelementa */
}

.pulsating-button::after {
  vsebina: "";
  položaj: absolutno;
  inset: 0;  /* Raztegne element, da zapolni celotno območje gumba */
  animacija: pulziranje 0.7s brezstopenjska enostavnost vstopa in izstopa;
  barva ozadja: rgba(255, 255, 255, 0.3); /* polprozorna bela */
}

@keyframes pulziranje {
  s spletne strani { motnost: 1.0; }
  na . { motnost: 0.8; }
}

Pojasnilo:

1. Opredelimo razred pulzirajoči gumb za slog gumba.
2. Znotraj razreda dodamo psevdoelement ::after za ustvarjanje nevidnega elementa, ki se nahaja za dejanskim gumbom. To omogoča učinek animacije, ne da bi to vplivalo na funkcionalnost gumba.
3. Spletna stran animacija lastnost psevdoelementa se sklicuje na pulziranje animacija, opredeljena z uporabo @keyframes pravilo.
4. Spletna stran @keyframes pulsate določa dva ključna okvirja:
   • s spletne strani: nastavi neprozornost na 100% (popolnoma vidno).
   • na .: nastavi neprozornost na 80% (rahlo prozorno) in ustvari učinek utripanja.

Raziskovanje lastnosti animacije:

Spletna stran animacija lastnost ponuja različne možnosti za prilagajanje animacij:

• ime animacije: Sklicuje se na ime definicije ključnih kadrov (npr, ime animacije: pulziranje).
• trajanje animacije: Nastavi trajanje animacije (npr, trajanje animacije: 1s).
• animacija-časovna-funkcija: Nadzoruje hitrost animacije (npr, funkcija časa animacije: ease-in-out). Običajne možnosti vključujejo enostavnost (privzeto, postopni začetek in konec), linearni (konstantna hitrost), enostaven vnos (počasen začetek, hiter konec) in olajšanje (hiter začetek, počasen konec).
• animation-iteration-count: Določa, kolikokrat se animacija predvaja (npr, število animacij: neskončno).
• smer animacije: Določa smer predvajanja animacije (npr, smer animacije: nadomestna za izmenične smeri).
• animation-delay: Nastavi zamik pred začetkom animacije (npr, animacijski zamik: 0.5s).

Združevanje animacij za kompleksne učinke:

Za en element lahko uporabite več animacij in tako ustvarite bolj zapletene učinke. Učinek utripanja lahko na primer kombinirate z animacijo spremembe barve, da bi dosegli bolj opazno interakcijo z gumbom.

Napredne tehnike:

Z napredovanjem spoznajte napredne tehnike animacije, kot so:

• Preobrazbe: Animiranje lastnosti elementov, kot so položaj, vrtenje, merilo in nagib, z uporabo preoblikovanje lastnosti v ključnih okvirjih.
• Kratica za animacijo: Združite lastnosti animacije, kot so trajanje animacije, animacija-časovna-funkcijain animation-iteration-count v eno kratkoročno lastnost za enostavnejšo sintakso.
• Animirani dogodki: Uporabite dogodke, kot so začetek animacije in . animacijski konec za sprožitev kode JavaScript na določenih točkah v ciklu animacije.

Viri za nadaljnje raziskovanje:

• Animacije CSS Tutorial z W3Schools (https://www.w3schools.com/css/css3_animations.asp): ): Izčrpen uvod v animacije CSS s primeri in referencami.
• CSS Animacije Tutorial s CSS-Tricks (https://css-tricks.com/almanac/properties/a/animation/): Podroben vodnik z razlagami in izseki kode za različne animacije

.rotating-banner {
  širina: 200px;
  višina: 150px;
  barva ozadja: #ccc;
  marža: 0 avto;
  animacija: vrtenje 5s linearno neskončno;
}

@keyframes vrteti {
  s spletne strani { preoblikovanje: zavrtite(0 stopinj); }
  na . { preoblikovanje: zavrtite(360 stopinj); }
}

.bounce {
  animacija: bounce 1s brezstopenjska enostavnost vstopa in izstopa;
}

@keyframes odskok {
  0%, 100% { preoblikovanje: translateY(0); }
  50% { preoblikovanje: translateY(-10px); }
}

.button {
  ... (gumb stili) ...
  animacija: poudarek 0.5s olajšano vstopanje in izstopanje;
}

.button:hover {
  animacija: ni;  /* Onemogočite animacijo ob prehodu */
}

@keyframes poudariti {
  s spletne strani { barva ozadja: #ddd; }
  na . { barva ozadja: #ffe0e0; }
}

.button.clicked {
  animacija: highlight-reverse 0.5s olajšano vstopanje in izstopanje;
}

@keyframes highlight-reverse {
  s spletne strani { barva ozadja: #ffe0e0; }
  na . { barva ozadja: #ddd; }
}

/* Dodajte JavaScript za poslušanje dogodka klik in preklapljanje razreda 'kliknjen' */