Ova jednostavna demonstracija objašnjava kako koristiti CSS animacije za zanimljive vizualne efekte.
Dodavanje animirane pozadine vašoj web stranici ili aplikaciji može pridonijeti jedinstvenom, zanimljivom dizajnu. Kreativne pozadine mogu izazvati emocije i poboljšati korisničko iskustvo.
Postoji mnogo načina za stvaranje animirane pozadine za vašu aplikaciju, ali jednostavna kombinacija običnog HTML-a i CSS-a djeluje posebno dobro. Pogledajte ovaj primjer, saznajte kako njegov kod funkcionira i pogledajte demo konačne animirane pozadine uživo.
Napravite HTML strukturu
Stvorit ćete plavu pozadinu s mjehurićima koji rastu i lebde prema gore. Na ovome možete vidjeti krajnji rezultat Codepen.
Započnite stvaranjem a odjeljak s razredom omot za smještaj animacije.
Zatim izradite 10 divova koji će predstavljati mjehuriće. Unutar svakog diva stvorite raspon s klasom točka. Možeš naučite ove bitne HTML oznake u 10 minuta ako ste novi u HTML-u.
<body>
<sectionclass="wrapper">
<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>Stil s CSS kodom
Možete stvoriti nevjerojatno pozadinske efekte koristeći samo HTML. Ali za ovaj projekt, koristit ćete CSS za stiliziranje i animiranje pozadine.
Najprije postavite marginu i ispunu na 0 kako biste osigurali da nema razmaka oko pozadine.
* {
margin: 0;
padding: 0;
}Zatim stilizirajte roditeljski odjeljak pomoću klase omotača. Ovaj odjeljak će imati 100% širine i visine da ispuni cijelu stranicu. Postavite boju pozadine kao nijansu plave i dajte joj apsolutni položaj.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}Stilizirajte i H1 s apsolutnom pozicijom. Da biste ga postavili u središte stranice, počnite postavljanjem gornjeg lijevog položaja na 50%. Zatim upotrijebite prijevod da ga pomaknete gore i ulijevo, tako da mu središte bude točno u 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;
}Zatim stilizirajte divove koji će biti kružni da djeluju kao animirani mjehurići. Svakom divu dodijelite visinu, širinu i obrub. Veliki radijus granice osigurava da je granica krug. Također, postavite trajanje animacije pomoću CSS svojstva animacije.
.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}Stilizirajte točke s visinom i širinom od 5 piksela. Dodijelite točkama radijus ruba i bijelu pozadinu. Svaki od njih postavite apsolutno, blizu gornjeg desnog dijela nadređenog diva.
div.dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}Zatim upotrijebite selektor nth-child za postavljanje svakog diva s različitim postavkama. Možete dati naziv animaciji animirati; definirat ćete ga kasnije pomoću @keyframes.
Koristiti n-to dijete (2) obratiti se prvom div od prvog djeteta .omot 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žim divovima možete dati veće postotke tako da se penju na vrh u različitim intervalima.
.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;
}
Upotrijebite @keyframes za postupnu promjenu i rotiranje krugova i točkica u različitim intervalima. U sljedećem kodu, točke se okreću za 70 stupnjeva, a krugovi za 360. Ova rotacija stvara efekt mjehurića.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}Možeš učinite pozadinu elegantnijom pomoću CSS uzoraka. Uzorci vam omogućuju stvaranje valova, rešetki, lišća i drugih uzoraka koji će vam pomoći u stvaranju nevjerojatnih animacija.
Pomoću CSS-a možete animirati mnoga svojstva
Pomoću CSS-a možete izraditi različite vrste animacija. To uključuje promjenu boje pozadine i odgodu izvođenja animacije.
Također možete postaviti koliko često bi se animacija trebala pokretati, čak i do beskonačnosti. Također možete postaviti smjer u kojem se animacija treba kretati: naprijed ili natrag. Zabavno je igrati se s animacijama i možete ih koristiti da oživite svoje aplikacije.
