En animert bakgrunn kan gi nettsiden eller applikasjonen din et unikt og engasjerende preg. En kreativ bakgrunn kan vekke følelser og forbedre brukeropplevelsen.
Det finnes mange måter å skape en animert bakgrunn på, men en enkel kombinasjon av HTML og CSS er en effektiv tilnærming. La oss utforske et eksempel, forstå hvordan koden fungerer, og se en live demonstrasjon av den endelige animerte bakgrunnen.
Oppsett av HTML-strukturen
Vi skal lage en blå bakgrunn med bobler som vokser og flyter oppover. Du kan se det ferdige resultatet på denne Codepen.
Start med å opprette en seksjon med klassen «wrapper» for å inneholde animasjonen.
Deretter lager du ti div-elementer som vil representere boblene. Inne i hvert div-element lager du et span-element med klassen «dot». Hvis HTML er nytt for deg, kan du lære det grunnleggende på kort tid.
<body>
<section class="wrapper">
<h2>Animert Bakgrunn</h2>
<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>
Styling med CSS
Du kan oppnå imponerende visuelle effekter med HTML alene. I dette prosjektet bruker vi CSS til å style og animere bakgrunnen.
Start med å sette margin og padding til null for å fjerne uønsket mellomrom rundt bakgrunnen.
* {
margin: 0;
padding: 0;
}
Deretter styler du det overordnede elementet med klassen «wrapper». Dette elementet skal fylle hele siden med 100 % bredde og høyde. Sett bakgrunnsfargen til en blå nyanse og angi absolutt posisjonering.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
Styler også H2-elementet med absolutt posisjonering. For å sentrere det, setter du først øvre venstre posisjon til 50 %. Deretter bruker du `translate` for å flytte det opp og til venstre, slik at midten er nøyaktig i sentrum.
.wrapper h2 {
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;
}
Deretter styler du div-elementene som skal fungere som de animerte boblene. Hvert div-element får høyde, bredde og kantlinje. En stor `border-radius` gjør kantene sirkulære. Definer også en animasjonsvarighet ved hjelp av 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;
}
Styler prikkene med 5px høyde og bredde. Gi prikkene `border-radius` og en hvit bakgrunn. Plasser hver prikk litt forskjøvet oppe til høyre i det overordnede div-elementet.
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}
Bruk `nth-child`-velgeren for å plassere hver div med forskjellige innstillinger. Animasjonen kalles «animate», og den defineres senere med `@keyframes`.
Bruk `nth-child(2)` for å referere til det første div-elementet siden det første barnet til «wrapper»-elementet er h2.
.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;
}
Gi de følgende div-elementene høyere verdier slik at de stiger oppover 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 størrelse og rotere sirklene og prikkene med forskjellige intervaller. I koden under roterer prikkene med 70 grader og sirklene med 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 bakgrunnen mer iøynefallende ved å bruke CSS-mønstre. Mønstre gir deg muligheten til å lage bølger, rutenett og andre design som kan hjelpe deg å lage interessante animasjoner.
Animeringsmuligheter med CSS
CSS gir deg muligheten til å lage forskjellige animasjonstyper. Dette inkluderer å endre bakgrunnsfarge og forsinke starttidspunktet for en animasjon.
Du kan også definere hvor ofte en animasjon skal spilles av, til og med uendelig mange ganger. Du kan også spesifisere retningen animasjonen skal bevege seg i: fremover eller bakover. Eksperimentering med animasjoner er morsomt, og de kan brukes til å gjøre applikasjonene dine mer dynamiske og levende.