Această demonstrație simplă explică cum să utilizați animațiile CSS pentru efecte vizuale interesante.
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.
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 un secțiune cu clasa învelitoare pentru a adăposti animația.
Apoi, creați 10 div-uri care vor reprezenta bulele. În interiorul fiecărei div, creați un interval cu clasa punct. Puteți învață aceste etichete HTML esențiale în 10 minute dacă sunteți nou în HTML.
<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 cu cod CSS
Puteți crea incredibile efecte de fundal folosind numai 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.
.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;
}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.
.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}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 anima; îl vei defini mai târziu folosind @keyframes.
Utilizare al-lea copil (2) să se adreseze primului div încă de la primul copil al .înveliș elementul este 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;
}
Puteți da div-urilor inferioare procente mai mari, astfel încât acestea să se ridice în vârf la intervale diferite.
.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;
}
Utilizați @keyframes pentru a schimba și roti treptat cercurile și punctele la intervale diferite. În următorul cod, punctele se rotesc la 70 de grade, iar 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.