Denne enkle demo forklarer, hvordan man bruger CSS-animationer til interessante visuelle effekter.
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.
Opret HTML-strukturen
Du vil skabe en blå farvebaggrund med bobler, der vokser og flyder opad. Du kan se slutresultatet på dette Codepen.
Start med at oprette en afsnit med klassen indpakning at huse animationen.
Opret derefter 10 divs, der repræsenterer boblerne. Inde i hver div skal du oprette et spænd med klassen prik. Du kan lær disse vigtige HTML-tags på 10 minutter hvis du er ny til 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 skabe utrolige baggrundseffekter kun ved hjælp af 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.
.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 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.
.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}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 animere; du vil definere det senere ved hjælp af @keyframes.
Brug n. barn (2) at tage fat på det første div siden det første barn af .indpakning element 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 give de lavere divs højere procenter, så de stiger til tops med forskellige 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;
}
Brug @keyframes til gradvist at ændre og rotere cirklerne og prikkerne med forskellige intervaller. I den følgende kode roterer prikkerne 70 grader og cirklerne 360 grader. 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ør baggrunde mere stilfulde ved hjælp af 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.
