Ta preprosta predstavitev pojasnjuje, kako uporabiti animacije CSS za zanimive vizualne učinke.

Dodajanje animiranega ozadja na vaše spletno mesto ali aplikacijo lahko prispeva k edinstvenemu, zanimivemu dizajnu. Ustvarjalna ozadja lahko vzbudijo čustva in izboljšajo uporabniško izkušnjo.

Obstaja veliko načinov za ustvarjanje animiranega ozadja za vašo aplikacijo, vendar preprosta kombinacija navadnega HTML in CSS deluje še posebej dobro. Oglejte si ta primer, spoznajte, kako deluje njegova koda, in si oglejte predstavitev končnega animiranega ozadja v živo.

Ustvarite strukturo HTML

Ustvarili boste modro barvno ozadje z mehurčki, ki rastejo in lebdijo navzgor. Na tem lahko vidite končni rezultat Codepen.

Začnite z ustvarjanjem a razdelek z razredom ovoj za namestitev animacije.

Nato ustvarite 10 divov, ki bodo predstavljali mehurčke. Znotraj vsakega diva ustvarite razpon z razredom pika. Ti lahko naučite se teh osnovnih oznak HTML v 10 minutah če ste novi v HTML.

<body>
<sectionclass="wrapper">





instagram viewer



<h1>Animated Backgroundh1>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
section>
body>

Slog s kodo CSS

Ustvarite lahko neverjetno učinke ozadja z uporabo samo HTML. Toda za ta projekt boste uporabili CSS za oblikovanje in animiranje ozadja.

Najprej nastavite rob in oblazinjenje na 0, da zagotovite, da okoli ozadja ni presledkov.

* {
margin: 0;
padding: 0;
}

Nato oblikujte nadrejeni odsek z uporabo razreda ovoja. Ta razdelek bo imel 100 % širino in višino, da zapolni celotno stran. Nastavite njegovo barvo ozadja kot odtenek modre in mu dajte absolutni položaj.

.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}

Oblikujte H1 tudi z absolutnim položajem. Če ga želite postaviti na sredino strani, začnite tako, da nastavite njegov zgornji levi položaj na 50 %. Nato uporabite prevajalnik, da ga premaknete navzgor in v levo, tako da je njegovo središče točno na sredini.

.wrapperh1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-family: sans-serif;
word-spacing: 2px;
color: #fff;
font-size: 2rem;
font-weight: 900;
}

Nato oblikujte dive, ki bodo okrogli in bodo delovali kot animirani mehurčki. Vsakemu divu določite višino, širino in obrobo. Velik polmer obrobe zagotavlja, da je obroba krog. Nastavite tudi trajanje animacije z lastnostjo animacije CSS.

.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}

Oblikujte pike z višino in širino 5 slikovnih pik. Določite pikam polmer obrobe in belo ozadje. Vsakega postavite absolutno, blizu zgornjega desnega kota nadrejenega diva.

div.dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}

Nato uporabite izbirnik nth-child, da postavite vsak div z različnimi nastavitvami. Animacijo lahko poimenujete animirati; določili ga boste pozneje z uporabo @keyframes.

Uporaba n-ti otrok (2) nasloviti prvo div od prvega otroka .ovitek element je h1.

.wrapperdiv:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8slinearinfinite;
}
.wrapperdiv:nth-child(3) { 
top: 60%;
left: 80%;
animation: animate 10slinearinfinite;
}


.wrapperdiv:nth-child(4) { 
top: 40%;
left: 40%; 
animation: animate 3slinearinfinite;
}


.wrapperdiv:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7slinearinfinite;
}
.wrapperdiv:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9slinearinfinite;
}

Nižjim divom lahko daste višje odstotke, tako da se dvignejo na vrh v različnih intervalih.

.wrapperdiv:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5slinearinfinite;
}
.wrapperdiv:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8slinearinfinite;
}


.wrapperdiv:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10slinearinfinite;
}


.wrapperdiv:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6slinearinfinite;
}
.wrapperdiv:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10slinearinfinite;
}

Uporabite @keyframes za postopno spreminjanje in obračanje krogov in pik v različnih intervalih. V naslednji kodi se pike vrtijo za 70 stopinj, krogi pa za 360. To vrtenje ustvari učinek mehurčkov.

@keyframes animate {
 0% {
transform: scale(0) translateY(0) rotate(70deg);
 }
 100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
 }
}

Ti lahko naredite ozadja bolj elegantna z uporabo vzorcev CSS. Vzorci vam omogočajo ustvarjanje valov, mrež, listov in drugih vzorcev, ki vam pomagajo ustvariti neverjetne animacije.

S CSS lahko animirate številne lastnosti

Z uporabo CSS lahko ustvarite različne vrste animacij. Ti vključujejo spreminjanje barve ozadja in zakasnitev časa izvajanja animacije.

Nastavite lahko tudi, kako pogosto naj se animacija izvaja, tudi do neskončnosti. Nastavite lahko tudi smer gibanja animacije: naprej ali nazaj. Zabavno se je igrati z animacijami in z njimi lahko oživite svoje aplikacije.