Å legge til en animert bakgrunn på nettstedet eller applikasjonen din kan bidra til et unikt, interessant design. Kreativ bakgrunn kan fremkalle følelser og forbedre brukeropplevelsen.
Det er mange måter å lage en animert bakgrunn for programmet på, men en enkel kombinasjon av vanlig HTML og CSS fungerer spesielt godt. Sjekk ut dette eksemplet, lær hvordan koden fungerer, og se en live demo av den endelige animerte bakgrunnen.
Innholdsfortegnelse
Lag HTML-strukturen
Du skal lage en blå fargebakgrunn med bobler som vokser og flyter oppover. Du kan se sluttresultatet på denne Codepen.
Begynn med å lage en seksjon med klasseomslaget for å huse animasjonen.
Deretter lager du 10 divs som vil representere boblene. Inne i hver div, lag et spenn med klasseprikken. Du kan lære disse viktige HTML-taggene på 10 minutter hvis du er ny på 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 med CSS-kode
Du kan lage utrolige bakgrunnseffekter med kun HTML. Men for dette prosjektet vil du bruke CSS til å style og animere bakgrunnen.
Sett først margen og polstring til 0 for å sikre at det ikke er mellomrom rundt bakgrunnen.
* {
margin: 0;
padding: 0;
}
Stil deretter den overordnede delen ved å bruke wrapper-klassen. Denne delen vil ha 100 % bredde og høyde for å fylle hele siden. Sett bakgrunnsfargen som en nyanse av blått og gi den en absolutt posisjon.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
Style H1 med en absolutt posisjon også. For å plassere den midt på siden, start med å sette den øverste venstre posisjonen til 50 %. Bruk deretter translate for å flytte den opp og til venstre, slik at midten er nøyaktig i midten.
.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;
}
Stil deretter divene som vil være sirkulære for å fungere som animerte bobler. Gi hver div en høyde, bredde og kantlinje. Den store kantradiusen sikrer at kanten er en sirkel. Angi også en animasjonsvarighet ved å bruke CSS-animasjonsegenskapen.
.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;
}
Style prikkene med 5 px høyde og bredde. Gi prikkene en kantradius og en hvit bakgrunn. Plasser hver enkelt helt, nær øverst til høyre i den overordnede div.
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}
Deretter bruker du nth-child-velgeren til å plassere hver div med forskjellige innstillinger. Du kan navngi animasjonen animate; du vil definere det senere ved å bruke @keyframes.
Bruk nth-child(2) for å adressere den første div siden det første barnet til .wrapper-elementet er 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;
}
Du kan gi de lavere divene høyere prosenter slik at de stiger til topps med forskjellige intervaller.
.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;
}
Bruk @keyframes for å gradvis endre og rotere sirkler og prikker med forskjellige intervaller. I den følgende koden roterer prikkene i 70 grader og sirklene ved 360. Denne rotasjonen skaper bobleeffekten.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}
Du kan gjøre bakgrunner mer stilige ved å bruke CSS-mønstre. Mønstre lar deg lage bølger, rutenett, blader og andre mønstre for å hjelpe deg med å lage fantastiske animasjoner.
Du kan animere mange egenskaper ved å bruke CSS
Du kan lage forskjellige typer animasjoner ved hjelp av CSS. Disse inkluderer å endre bakgrunnsfargen og forsinke kjøretiden til en animasjon.
Du kan også angi hvor ofte en animasjon skal kjøres, selv til uendelig. Du kan også angi retningen animasjonen skal bevege seg: fremover eller bakover. Det er morsomt å leke med animasjoner, og du kan bruke dem til å gjøre applikasjonene dine levende.