See lihtne demo selgitab, kuidas kasutada CSS-animatsioone huvitavate visuaalsete efektide saamiseks.

Animeeritud tausta lisamine veebisaidile või rakendusele võib aidata luua ainulaadset ja huvitavat kujundust. Loominguline taust võib tekitada emotsioone ja parandada kasutajakogemust.

Rakenduse jaoks animeeritud tausta loomiseks on palju võimalusi, kuid lihtsa HTML-i ja CSS-i kombinatsioon toimib eriti hästi. Vaadake seda näidet, uurige, kuidas selle kood töötab, ja vaadake lõpliku animeeritud tausta reaalajas demo.

Looge HTML-struktuur

Loote sinise värvi tausta mullidega, mis kasvavad ja hõljuvad ülespoole. Lõpptulemust näete sellel teemal Codepen.

Alustage a osa klassiga ümbris animatsiooni majutamiseks.

Seejärel looge 10 lahtrit, mis esindavad mulle. Igas osas looge klassiga vahemik punkt. Sa saad Õppige need olulised HTML-i sildid 10 minutiga selgeks kui olete HTML-i uus kasutaja.

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

Stiil CSS-koodiga

Saate luua uskumatuid taustaefektid, kasutades ainult HTML-i. Kuid selle projekti puhul kasutate tausta stiilimiseks ja animeerimiseks CSS-i.

Esmalt määrake veeris ja polsterdus väärtusele 0, et taustal ei oleks tühikuid.

* {
margin: 0;
padding: 0;
}

Seejärel kujundage ümbrisklassi abil ülemjaotise stiil. Selle jaotise laius ja kõrgus on 100%, et täita kogu leht. Määrake selle taustavärv siniseks ja andke sellele absoluutne positsioon.

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

Stiilige H1 ka absoluutse positsiooniga. Selle paigutamiseks lehe keskele alustage selle ülemise vasakpoolse positsiooni määramisest 50%. Seejärel liigutage tõlke abil seda üles ja vasakule, nii et selle keskpunkt oleks täpselt keskel.

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

Järgmisena kujundage ümmargused divid, mis toimivad animeeritud mullidena. Määrake igale divile kõrgus, laius ja ääris. Suur piiriraadius tagab, et piir on ring. Samuti määrake animatsiooni kestus, kasutades CSS-i animatsiooni atribuuti.

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

Stiilige punktid 5 piksli kõrguse ja laiusega. Andke punktidele äärise raadius ja valge taust. Paigutage igaüks absoluutselt, oma emadivisjoni parema ülanurga lähedale.

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

Järgmiseks kasutage n-ndat alamvalijat, et positsioneerida iga div erinevate sätetega. Saate animatsioonile nime anda animeerima; määrate selle hiljem @keyframes abil.

Kasuta n-laps (2) esimese poole pöördumiseks div alates esimesest lapsest .ümbris element on 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;
}

Saate anda madalamatele dividele suuremad protsendid, et need tõuseksid erinevate intervallidega tippu.

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

Kasutage @keyframes ringide ja punktide järkjärguliseks muutmiseks ja pööramiseks erinevate intervallidega. Järgmises koodis pöörlevad punktid 70 kraadi ja ringid 360 kraadi. See pööramine loob mulliefekti.

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

Sa saad muuta taustad stiilsemaks, kasutades CSS-i mustreid. Mustrid võimaldavad teil luua laineid, ruudustikke, lehti ja muid mustreid, mis aitavad teil luua hämmastavaid animatsioone.

CSS-i abil saate animeerida paljusid omadusi

CSS-i abil saate luua erinevat tüüpi animatsioone. Nende hulka kuuluvad taustavärvi muutmine ja animatsiooni käitusaja viivitamine.

Samuti saate määrata, kui tihti animatsioon peaks käima, isegi lõpmatuseni. Samuti saate määrata animatsiooni liikumise suuna: edasi või tagasi. Animatsioonidega on lõbus mängida ja saate neid kasutada oma rakenduste ellu äratamiseks.