Tilføjelse af en animeret baggrund til dit websted eller din applikation kan bidrage til et unikt, interessant design. Kreative baggrunde kan fremkalde følelser og forbedre brugeroplevelsen.
Der er mange måder at skabe en animeret baggrund til din applikation på, men en simpel kombination af almindelig HTML og CSS fungerer særligt godt. Tjek dette eksempel, lær hvordan dens kode fungerer, og se en live demo af den endelige animerede baggrund.
Indholdsfortegnelse
Opret HTML-strukturen
Du vil skabe en blå baggrund med bobler, der vokser og flyder opad. Du kan se slutresultatet på dette Codepen.
Start med at oprette en sektion med klasseindpakningen til at huse animationen.
Opret derefter 10 divs, der repræsenterer boblerne. Inde i hver div skal du oprette et spænd med klasseprikken. Du kan lære disse vigtige HTML-tags på 10 minutter, hvis du er ny til 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 skabe utrolige baggrundseffekter ved kun at bruge HTML. Men til dette projekt vil du bruge CSS til at style og animere baggrunden.
Indstil først margenen og polstringen til 0 for at sikre, at der ikke er mellemrum omkring baggrunden.
* {
margin: 0;
padding: 0;
}
Stil derefter den overordnede sektion ved hjælp af wrapper-klassen. Denne sektion vil have 100 % bredde og højde til at fylde hele siden. Indstil dens baggrundsfarve som en blå nuance og giv den en absolut position.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
Style også H1 med en absolut position. For at placere den i midten af siden, start med at indstille dens øverste venstre position til 50 %. Brug derefter translate til at flytte den op og til venstre, så dens centrum er præcis 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 derefter div’erne, som vil være cirkulære, så de fungerer som animerede bobler. Giv hver div en højde, bredde og kant. Den store kantradius sikrer, at grænsen er en cirkel. Indstil også en animationsvarighed ved hjælp af CSS-animationsegenskaben.
.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 prikkerne med en højde og bredde på 5 px. Giv prikkerne en kantradius og en hvid baggrund. Placer hver enkelt helt tæt på øverst til højre i dens overordnede div.
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}
Brug derefter den n. underordnede vælger til at placere hver div med forskellige indstillinger. Du kan navngive animationen animate; du vil definere det senere ved hjælp af @keyframes.
Brug nth-child(2) til at adressere den første div, da det første underordnede af .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 give de lavere divs højere procenter, så de stiger til tops med forskellige 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;
}
Brug @keyframes til gradvist at ændre og rotere cirklerne og prikkerne med forskellige intervaller. I den følgende kode roterer prikkerne ved 70 grader og cirklerne ved 360. Denne rotation skaber bobleeffekten.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}
Du kan gøre baggrunde mere stilfulde ved at bruge CSS-mønstre. Mønstre giver dig mulighed for at skabe bølger, gitter, blade og andre mønstre for at hjælpe dig med at skabe fantastiske animationer.
Du kan animere mange egenskaber ved hjælp af CSS
Du kan oprette forskellige typer animationer ved hjælp af CSS. Disse omfatter ændring af baggrundsfarven og forsinkelse af køretiden for en animation.
Du kan også indstille, hvor ofte en animation skal køre, selv til uendeligt. Du kan også indstille den retning, animationen skal bevæge sig: frem eller tilbage. Det er sjovt at lege med animationer, og du kan bruge dem til at bringe dine applikationer til live.