Šajā vienkāršajā demonstrācijā ir paskaidrots, kā izmantot CSS animācijas interesantu vizuālo efektu iegūšanai.
Animēta fona pievienošana savai vietnei vai lietojumprogrammai var veicināt unikālu, interesantu dizainu. Radošs fons var izraisīt emocijas un uzlabot lietotāja pieredzi.
Ir daudz veidu, kā lietojumprogrammai izveidot animētu fonu, taču īpaši labi darbojas vienkārša vienkārša HTML un CSS kombinācija. Apskatiet šo piemēru, uzziniet, kā darbojas tā kods, un skatiet pēdējā animētā fona demonstrāciju.
Izveidojiet HTML struktūru
Jūs izveidosit zilu fonu ar burbuļiem, kas aug un peld uz augšu. Šajā sadaļā jūs varat redzēt gala rezultātu Codepen.
Sāciet, izveidojot a sadaļā ar klasi iesaiņojums animācijas izvietošanai.
Pēc tam izveidojiet 10 divs, kas attēlos burbuļus. Katrā divdaļā izveidojiet span ar klasi punkts. Jūs varat iemācieties šos būtiskos HTML tagus 10 minūšu laikā ja esat iesācējs 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>Stils ar CSS kodu
Jūs varat radīt neticami fona efekti, izmantojot tikai HTML. Bet šim projektam jūs izmantosit CSS, lai veidotu un animētu fonu.
Vispirms iestatiet piemaļus un polsterējumu uz 0, lai fonā nebūtu atstarpes.
* {
margin: 0;
padding: 0;
}Pēc tam izveidojiet vecāku sadaļas stilu, izmantojot iesaiņojuma klasi. Šai sadaļai būs 100% platums un augstums, lai aizpildītu visu lapu. Iestatiet tā fona krāsu kā zilu nokrāsu un piešķiriet tai absolūtu pozīciju.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}Izveidojiet H1 stilu arī ar absolūtu pozīciju. Lai to novietotu lapas centrā, sāciet, iestatot tā augšējo kreiso pozīciju uz 50%. Pēc tam izmantojiet tulkotāju, lai pārvietotu to uz augšu un pa kreisi, lai tā centrs būtu tieši vidū.
.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;
}Pēc tam izveidojiet apļveida elementu stilu, lai tie darbotos kā animēti burbuļi. Piešķiriet katram divam augstumu, platumu un apmali. Lielais apmales rādiuss nodrošina, ka apmale ir aplis. Iestatiet arī animācijas ilgumu, izmantojot CSS animācijas rekvizītu.
.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}Veidojiet punktu stilu ar 5 pikseļu augstumu un platumu. Piešķiriet punktiem apmales rādiusu un baltu fonu. Novietojiet katru absolūtā vietā, tuvu augšējam labajam elementam.
div.dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}Pēc tam izmantojiet n-to bērnu atlasītāju, lai pozicionētu katru div ar dažādiem iestatījumiem. Jūs varat nosaukt animāciju animēt; jūs to definēsit vēlāk, izmantojot @keyframes.
Izmantot n-tais bērns (2) lai risinātu pirmo div kopš pirmā bērna dzimšanas .iesaiņojums elements ir 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;
}
Zemākiem diviem varat piešķirt lielākus procentus, lai tie paceltos uz augšu ar dažādiem intervāliem.
.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;
}
Izmantojiet @keyframes, lai pakāpeniski mainītu un pagrieztu apļus un punktus dažādos intervālos. Nākamajā kodā punkti griežas par 70 grādiem un apļi par 360. Šī rotācija rada burbuļa efektu.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}Jūs varat padariet fonus stilīgākus, izmantojot CSS modeļus. Raksti ļauj izveidot viļņus, režģus, lapas un citus rakstus, lai palīdzētu jums izveidot pārsteidzošas animācijas.
Izmantojot CSS, varat animēt daudzus rekvizītus
Izmantojot CSS, varat izveidot dažāda veida animācijas. Tie ietver fona krāsas maiņu un animācijas izpildes laika aizkavēšanu.
Varat arī iestatīt, cik bieži animācijai jādarbojas pat līdz bezgalībai. Varat arī iestatīt animācijas virzienu: uz priekšu vai atpakaļ. Ir jautri spēlēties ar animācijām, un jūs varat tās izmantot, lai atdzīvinātu savas lietojumprogrammas.