Att lägga till en animerad bakgrund till din webbplats eller applikation kan bidra till en unik, intressant design. Kreativa bakgrunder kan framkalla känslor och förbättra användarupplevelsen.
Det finns många sätt att skapa en animerad bakgrund för din applikation, men en enkel kombination av vanlig HTML och CSS fungerar särskilt bra. Kolla in det här exemplet, lär dig hur dess kod fungerar och se en livedemo av den slutliga animerade bakgrunden.
Innehållsförteckning
Skapa HTML-strukturen
Du kommer att skapa en blå bakgrund med bubblor som växer och flyter uppåt. Du kan se slutresultatet på detta Codepen.
Börja med att skapa ett avsnitt med klassomslaget för att hysa animationen.
Skapa sedan 10 divs som kommer att representera bubblorna. Inuti varje div skapar du ett spann med klasspunkten. Du kan lära dig dessa viktiga HTML-taggar på 10 minuter om du är 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-kod
Du kan skapa otroliga bakgrundseffekter med enbart HTML. Men för det här projektet kommer du att använda CSS för att styla och animera bakgrunden.
Ställ först in marginalen och utfyllnaden på 0 för att säkerställa att inga mellanslag runt bakgrunden.
* {
margin: 0;
padding: 0;
}
Stil sedan den överordnade sektionen med hjälp av omslagsklassen. Det här avsnittet kommer att ha 100 % bredd och höjd för att fylla hela sidan. Ställ in dess bakgrundsfärg som en nyans av blått och ge den en absolut position.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
Style H1 med en absolut position också. För att placera den i mitten av sidan, börja med att ställa in dess övre vänstra position till 50 %. Använd sedan translate för att flytta den uppåt och till vänster, så att dess mitt är exakt i mitten.
.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 sedan diverna som kommer att vara cirkulära för att fungera som animerade bubblor. Ge varje div en höjd, bredd och kant. Den stora gränsradien säkerställer att gränsen är en cirkel. Ställ också in en animeringslängd med CSS-animeringsegenskapen.
.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;
}
Styla prickarna med en höjd och bredd på 5 px. Ge prickarna en kantradie och en vit bakgrund. Placera var och en absolut, nära det övre högra hörnet av dess överordnade div.
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}
Använd sedan n:te underordnade väljaren för att placera varje div med olika inställningar. Du kan namnge animeringen animera; du kommer att definiera det senare med @keyframes.
Använd nth-child(2) för att adressera den första div eftersom det första barnet i .wrapper-elementet är 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 ge de lägre diverna högre procentsatser så att de stiger till toppen med olika intervall.
.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;
}
Använd @keyframes för att gradvis ändra och rotera cirklarna och prickarna med olika intervall. I följande kod roterar prickarna i 70 grader och cirklarna vid 360. Denna rotation skapar bubbeleffekten.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}
Du kan göra bakgrunder snyggare med CSS-mönster. Mönster låter dig skapa vågor, rutnät, löv och andra mönster för att hjälpa dig skapa fantastiska animationer.
Du kan animera många egenskaper med CSS
Du kan skapa olika typer av animationer med CSS. Dessa inkluderar att ändra bakgrundsfärgen och fördröja körtiden för en animation.
Du kan också ställa in hur ofta en animering ska köras, till och med i oändlighet. Du kan också ställa in i vilken riktning animeringen ska röra sig: framåt eller bakåt. Det är roligt att leka med animationer och du kan använda dem för att ge dina applikationer liv.
