Att implementera en animerad bakgrund på en webbplats eller i en applikation kan avsevärt bidra till en unik och engagerande design. Dynamiska bakgrunder har kraften att framkalla specifika känslor och därigenom berika användarens upplevelse.
Det finns flera metoder för att skapa animerade bakgrunder, men en enkel och effektiv lösning är att kombinera grundläggande HTML och CSS. I det här exemplet kommer vi att utforska hur den här kombinationen fungerar. Vi kommer att dyka ner i koden och ge dig en livedemonstration av det slutliga resultatet.
Skapa den grundläggande HTML-strukturen
Vi kommer att skapa en blå bakgrund med bubblor som gradvis växer och rör sig uppåt. Du kan se hur det färdiga resultatet ser ut på denna Codepen-länk.
Vi börjar med att skapa en sektion med klassnamnet ”wrapper”. Denna sektion kommer att fungera som behållare för animationen.
Därefter skapar vi tio ”div”-element. Dessa kommer att representera de individuella bubblorna. Inom varje ”div” placerar vi ett ”span”-element med klassen ”dot”. Om du är nybörjare inom HTML, kan du snabbt lära dig grunderna i dessa HTML-taggar på cirka 10 minuter.
<body>
<section class="wrapper">
<h2>Animerad Bakgrund</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>
Anpassa stilen med CSS
Du kan uppnå häpnadsväckande bakgrundseffekter med enbart HTML, men för det här projektet använder vi CSS för att anpassa och animera bakgrunden.
Vi börjar med att ställa in marginalen och utfyllnaden på noll. Detta säkerställer att det inte finns onödigt utrymme runt bakgrunden.
* {
margin: 0;
padding: 0;
}
Därefter stylar vi den överordnade sektionen genom att använda ”wrapper”-klassen. Den här sektionen kommer att fylla hela sidan med 100 % bredd och höjd. Vi sätter bakgrundsfärgen till en nyans av blått och positionerar den absolut.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
H2-elementet får också en absolut position. För att placera texten i mitten av sidan börjar vi med att sätta dess övre vänstra position till 50 %. Sedan använder vi ”translate”-funktionen för att flytta texten uppåt och åt vänster, så att dess centrum hamnar exakt i mitten av sidan.
.wrapper h2 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-family: sans-serif;
letter-spacing: 1px;
color: #fff;
font-size: 2rem;
font-weight: 900;
}
Nu stylar vi de ”div”-element som ska fungera som animerade bubblor. Vi ger varje ”div” en höjd, bredd och en kant. Den stora kantradien säkerställer att kanten formar en cirkel. Vi anger också en animationslängd med hjälp av CSS-egenskapen för animation.
.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;
}
Prickarna stylar vi med en höjd och bredd på 5 pixlar. Vi ger dem en kantradie och en vit bakgrund. Varje prick placerar vi absolut, nära det övre högra hörnet av sin överordnade ”div”.
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}
Med hjälp av pseudo-klassen ”nth-child” kan vi sedan placera varje ”div” med olika inställningar. Vi ger animationen namnet ”animate”, och definierar animationen senare med ”@keyframes”.
Observera att vi använder ”nth-child(2)” för att adressera den första ”div”-elementet, eftersom det första barnet till ”wrapper”-elementet är ”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;
}
Vi ger de lägre ”div”-elementen högre procentsatser, så att de stiger mot toppen med varierande 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;
}
Vi använder nu ”@keyframes” för att gradvis ändra och rotera cirklarna och prickarna med varierande intervaller. I den här koden roteras prickarna 70 grader och cirklarna 360 grader. Denna rotation skapar den bubblande effekten.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}
Du kan ge dina bakgrunder en mer sofistikerad stil genom att använda CSS-mönster. Med hjälp av mönster kan du skapa vågor, rutnät, löv och andra designs för att få till stånd ännu mer fantastiska animationer.
Du kan animera ett flertal egenskaper med CSS
Det är möjligt att skapa en mängd olika animationer med CSS, bland annat genom att ändra bakgrundsfärger och lägga till fördröjningar.
Du kan också specificera hur många gånger en animering ska spelas, inklusive oändligt antal gånger. Dessutom kan du bestämma i vilken riktning animeringen ska röra sig: framåt eller bakåt. Det är underhållande att experimentera med animationer, och du kan använda dem för att ge liv åt dina applikationer.