Hvordan lage enkle CSS -spinnere?

I nettutvikling kan en spinner brukes til å vise lastetilstanden på websiden eller et prosjekt. Det kan ganske enkelt utformes gjennom HTML- og CSS -egenskaper. Dessuten kan det ikke kreve noen harde og raske regler, for eksempel å bruke JavaScript og andre programmeringsspråk. For å gjøre det, CSS “Border-Radius”Eiendom kan brukes.

Dette innlegget vil oppgi hvordan du designer en enkel CSS -spinner.

Hvordan lage enkle CSS -spinnere?

For å lage en enkel CSS -spinner, oppretter du først en DIV -beholder og bruker deretter "Border-Radius”Eiendom. Etter det, bruk de spesielle CSS -egenskapene, inkludert "animasjon”,“Border-Radius”,“forvandle", og andre.

For praktiske implikasjoner, prøv de gitte trinnene.

Trinn 1: Lag en div container

Opprinnelig lag en div container ved hjelp av “”Element. Sett også inn en "klasse”Attributt med et bestemt navn:

Trinn 2: Lag enkel spinner

Få tilgang til den opprettede beholderen ved hjelp av klassenavnet og bruk de under-uttalte CSS-egenskapene:

.spin-container :: før
Animasjon: 1.9em;
Animasjonsspill-state: arve;
Border: Solid 5px #C2DFFC;
Margin: 10%;
Border-Radius: 50%;
Border-Bottom-Color: #064E18;
Transform: Translate3D (-50%,-50%, 0);
innhold: "";
Høyde: 100px;
Bredde: 100px;
Posisjon: Absolutt;
Topp: 40%;
Venstre: 40%;
Will-Change: Transform;

Her:

• • “animasjon”Er en korthånds CSS -eiendom som brukes til å bruke en animasjon mellom stiler.
  • “Animasjonsspill-state”Bestemmer om animasjonen er i løpende tilstand eller gikk til pause.
  • “grense”Eiendom definerer en grense rundt et bestemt element.
  • “margin”Definerer et rom utenfor den definerte grensen.
  • “Border-Radius”Angir radius for elementets hjørner.
  • “Border-Bottom-Color”Brukes for å sette fargen på undersiden av den definerte grensen.
  • “forvandle”Forvandrer et element på en 2D- eller 3D -måte. Denne egenskapen tillater brukerne å skalere, skjeve, flytte og rotere elementer.
  • “innhold”Brukes til å sette inn teksten inne i elementet.
  • “høyde”Og“bredde”Egenskaper brukes til å spesifisere elementets størrelse.
  • “posisjon”Angir elementets posisjonsmetodetype.
  • “topp”Og“venstre”Egenskaper fordeler elementets posisjon.
  • “Kommer til å endres”Hint til nettleserne om hvordan et element kan endre seg.

Det kan observeres at den enkle spinneren er opprettet og designet med hell:

Det handler om å lage og style en enkel CSS -spinner.

Konklusjon

For å lage den enkle CSS -spinneren, designer du først en div container. Bruk deretter de spesielle CSS -egenskapene, inkludert "animasjon”,“Border-Radius”,“forvandle”,“Border-Radius”,“Border-Bottom-Color", og andre. Dette innlegget har vist metoden for å designe den enkle CSS -spinneren.