Adăugarea unui fundal animat site-ului sau aplicației dvs. poate contribui la un design unic și interesant. Fundalurile creative pot invoca emoții și pot îmbunătăți experiența utilizatorului.
Există multe modalități de a crea un fundal animat pentru aplicația dvs., dar o combinație simplă de HTML simplu și CSS funcționează deosebit de bine. Consultați acest exemplu, aflați cum funcționează codul său și vedeți o demonstrație live a fundalului animat final.
Cuprins
Creați structura HTML
Veți crea un fundal de culoare albastră cu bule care cresc și plutesc în sus. Puteți vedea rezultatul final la aceasta Codepen.
Începeți prin a crea o secțiune cu învelișul clasei pentru a găzdui animația.
Apoi, creați 10 div-uri care vor reprezenta bulele. În interiorul fiecărei div, creați un interval cu punctul de clasă. Puteți învăța aceste etichete HTML esențiale în 10 minute dacă sunteți nou în HTML.
<body>
<section class="wrapper">
<h1>Animated Background</h1>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
</section>
</body>
Stil cu cod CSS
Puteți crea efecte de fundal incredibile folosind doar HTML. Dar pentru acest proiect, veți folosi CSS pentru a stila și a anima fundalul.
Mai întâi, setați marginea și umplutura la 0 pentru a vă asigura că nu există spații în jurul fundalului.
* {
margin: 0;
padding: 0;
}
Apoi, stilați secțiunea părinte folosind clasa wrapper. Această secțiune va avea 100% lățime și înălțime pentru a umple întreaga pagină. Setează-i culoarea de fundal ca o nuanță de albastru și da-i o poziție absolută.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
Modelați H1-ul cu o poziție absolută. Pentru a-l plasa în centrul paginii, începeți prin a seta poziția din stânga sus la 50%. Apoi folosiți translate pentru a o muta în sus și la stânga, astfel încât centrul său să fie exact în mijloc.
.wrapper h1 {
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;
}
Apoi, stilați div-urile care vor fi circulare pentru a acționa ca bule animate. Dați fiecărei div o înălțime, lățime și margine. Raza mare a chenarului asigură că granița este un cerc. De asemenea, setați o durată de animație folosind proprietatea de animație CSS.
.wrapper div {
height: 60px;
width: 60px;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4s linear infinite;
}
Stilați punctele cu o înălțime și lățime de 5 pixeli. Dați punctelor o rază de margine și un fundal alb. Poziționați fiecare absolut, aproape de partea din dreapta sus a div-ului părinte.
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}
Apoi, utilizați selectorul al-lea pentru a poziționa fiecare div cu setări diferite. Puteți denumi animația animată; îl vei defini mai târziu folosind @keyframes.
Utilizați nth-child(2) pentru a adresa primul div, deoarece primul copil al elementului .wrapper este h1.
.wrapper div:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8s linear infinite;
}.wrapper div:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3s linear infinite;
}
.wrapper div:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7s linear infinite;
}
.wrapper div:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9s linear infinite;
}
Puteți da div-urilor inferioare procente mai mari, astfel încât acestea să se ridice în vârf la intervale diferite.
.wrapper div:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5s linear infinite;
}.wrapper div:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8s linear infinite;
}
.wrapper div:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6s linear infinite;
}
.wrapper div:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10s linear infinite;
}
Utilizați @keyframes pentru a schimba și roti treptat cercurile și punctele la intervale diferite. În codul următor, punctele se rotesc la 70 de grade și cercurile la 360. Această rotație creează efectul de bule.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}
Puteți face fundalurile mai elegante folosind modele CSS. Modelele vă permit să creați valuri, grile, frunze și alte modele pentru a vă ajuta să creați animații uimitoare.
Puteți anima multe proprietăți folosind CSS
Puteți crea diferite tipuri de animații folosind CSS. Acestea includ schimbarea culorii de fundal și întârzierea timpului de rulare a unei animații.
De asemenea, puteți seta cât de des ar trebui să ruleze o animație, chiar și la infinit. De asemenea, puteți seta direcția în care ar trebui să se miște animația: înainte sau înapoi. Este distractiv să te joci cu animațiile și le poți folosi pentru a da viață aplicațiilor tale.