Denne enkle demoen forklarer hvordan du bruker CSS-animasjoner for interessante visuelle effekter.
Å 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.
Lag HTML-strukturen
Du skal lage en blå fargebakgrunn med bobler som vokser og flyter oppover. Du kan se sluttresultatet på denne Codepen.
Start med å lage en seksjon med klassen innpakning for å huse animasjonen.
Deretter lager du 10 divs som vil representere boblene. Inne i hver div, lag et spenn med klassen punktum. Du kan lær disse viktige HTML-taggene på 10 minutter hvis du er ny på HTML.
<body>
<sectionclass="wrapper">
<h1>Animated Backgroundh1>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="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.
.wrapperh1 {
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.
.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}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 animere; du vil definere det senere ved å bruke @keyframes.
Bruk n. barn (2) å ta opp det første div siden det første barnet til .wrapper elementet er h1.
.wrapperdiv:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8slinearinfinite;
}.wrapperdiv:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10slinearinfinite;
}.wrapperdiv:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3slinearinfinite;
}.wrapperdiv:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7slinearinfinite;
}
.wrapperdiv:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9slinearinfinite;
}
Du kan gi de lavere divene høyere prosenter slik at de stiger til topps med forskjellige intervaller.
.wrapperdiv:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5slinearinfinite;
}.wrapperdiv:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8slinearinfinite;
}.wrapperdiv:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10slinearinfinite;
}.wrapperdiv:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6slinearinfinite;
}
.wrapperdiv:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10slinearinfinite;
}
Bruk @keyframes for å gradvis endre og rotere sirkler og prikker med forskjellige intervaller. I den følgende koden roterer prikkene 70 grader og sirklene 360 grader. 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ør 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.
