Ši paprasta demonstracinė versija paaiškina, kaip naudoti CSS animaciją įdomiems vaizdiniams efektams gauti.

Animacinio fono pridėjimas prie svetainės ar programos gali prisidėti prie unikalaus, įdomaus dizaino. Kūrybinis fonas gali sukelti emocijų ir pagerinti vartotojo patirtį.

Yra daug būdų, kaip sukurti animuotą programos foną, tačiau paprastas paprasto HTML ir CSS derinys veikia ypač gerai. Peržiūrėkite šį pavyzdį, sužinokite, kaip veikia jo kodas, ir peržiūrėkite tiesioginę galutinio animacinio fono demonstraciją.

Sukurkite HTML struktūrą

Sukursite mėlynos spalvos foną su burbuliukais, kurie auga ir plaukia aukštyn. Čia galite pamatyti galutinį rezultatą Kodas.

Pradėkite kurdami a skyrius su klase vyniojamasis popierius sukurti animaciją.

Tada sukurkite 10 divų, kurie atspindės burbulus. Kiekviename div viduje sukurkite intervalą su klase taškas. Tu gali išmokite šias esmines HTML žymas per 10 minučių jei nesate naujokas HTML.

<body>
<sectionclass="wrapper">
<h1>Animated Backgroundh1>
<div>





instagram viewer


<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>

Stilius su CSS kodu

Galite sukurti neįtikėtiną fono efektai naudojant tik HTML. Tačiau šiame projekte fonui stilizuoti ir animuoti naudosite CSS.

Pirmiausia nustatykite paraštę ir užpildymą 0, kad aplink foną nebūtų tarpų.

* {
margin: 0;
padding: 0;
}

Tada sukurkite pagrindinio skyriaus stilių naudodami įvyniojimo klasę. Šios skilties plotis ir aukštis bus 100 %, kad užpildytų visą puslapį. Nustatykite jo fono spalvą kaip mėlyną atspalvį ir suteikite jam absoliučią padėtį.

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

Sukurkite H1 stilių taip pat absoliučia pozicija. Norėdami įdėti jį į puslapio centrą, pirmiausia nustatykite jo viršutinę kairę padėtį į 50%. Tada naudokite vertimą, kad perkeltumėte jį aukštyn ir į kairę, kad jo centras būtų tiksliai viduryje.

.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;
}

Tada sukurkite apvalių elementų stilių, kad jie veiktų kaip animuoti burbulai. Suteikite kiekvienam div aukštį, plotį ir kraštinę. Didelis kraštinės spindulys užtikrina, kad kraštinė būtų apskritimas. Be to, nustatykite animacijos trukmę naudodami CSS animacijos ypatybę.

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

Sukurkite 5 pikselių aukščio ir pločio taškus. Suteikite taškams kraštinės spindulį ir baltą foną. Kiekvieną iš jų padėkite absoliučiai, arti viršutinio dešiniojo pirminio div.

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

Tada naudokite n-tąjį vaiko parinkiklį, kad nustatytumėte kiekvieno dalinio padėtį skirtingais nustatymais. Galite pavadinti animaciją pagyvinti; vėliau jį apibrėžsite naudodami @keyframes.

Naudokite n-tas vaikas (2) kreiptis į pirmąjį div nuo pirmojo vaiko gimimo .vyniojamasis popierius elementas yra 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;
}

Žemesniems divams galite suteikti didesnius procentus, kad jie kiltų į viršų skirtingais intervalais.

.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;
}

Naudokite @keyframes, kad palaipsniui keistumėte ir sukite apskritimus ir taškus skirtingais intervalais. Toliau pateiktame kode taškai sukasi 70 laipsnių, o apskritimai - 360. Šis sukimas sukuria burbulo efektą.

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

Tu gali padaryti foną stilingesnį naudojant CSS šablonus. Raštai leidžia kurti bangas, tinklelius, lapus ir kitus raštus, kurie padės sukurti nuostabias animacijas.

Naudodami CSS galite animuoti daugybę savybių

Naudodami CSS galite kurti įvairių tipų animacijas. Tai apima fono spalvos keitimą ir animacijos vykdymo atidėjimą.

Taip pat galite nustatyti, kaip dažnai turi būti rodoma animacija, net iki begalybės. Taip pat galite nustatyti animacijos judėjimo kryptį: pirmyn arba atgal. Smagu žaisti su animacijomis ir galite jas panaudoti savo programoms pagyvinti.