Din titel er en af de vigtigste dele af din hjemmeside. Dette er normalt hvad du ser først, og derfor bestemmer det første indtryk. Som ethvert andet første indtryk vil du have det godt. Nu, hvis du leder efter en kreativ måde at præsentere din titel på, vil du nyde denne tutorial, da vi viser dig, hvordan du tilføjer CSS-tekstblokanimationer til din titel, og du kan også downloade layout JSON-filen gratis!
undersøgelse
Før vi dykker ned i vejledningen, lad os se på resultatet på forskellige skærmstørrelser.
Lad os starte designet
Tilføj sektion # 1
Gradient baggrund
Start med at tilføje et almindeligt afsnit til en ny side eller til den side, du arbejder på. Åbn sektionsindstillingerne og anvend følgende gradientbaggrund:
- Farve 1: # f0f2b
- Farve 2: # c10b1a
- Gradienttype: lineær
- Gradientretning: 63deg
afstand
Skift til sektionsdesignfanen, og anvend følgende tilpassede top- og bundfyldningsværdier på forskellige skærmstørrelser:
- Øvre polstring: 7vw (desktop), 20vw (tablet), 25vw (telefon)
- Bundpolstring: 7vw (skrivebord), 20vw (tablet), 25vw (telefon)
Border
Tilføj også en kant til sektionen.
- Kantbredde: 2vw (øverste, venstre, højre)
- Nederste kantbredde: 0vw
- Kantfarve: #ffffff
Tilføj en ny linje
Kolonne struktur
Fortsæt med at tilføje en ny linje til sektionen ved hjælp af følgende kolonnestruktur:
dimensionering
Åbn linjeparametrene og ændre dimensioneringsparametrene i overensstemmelse hermed:
- Bredde: 100%
- Maks bredde: 100%
Føj et tekstmodul til kolonnen
Tilføj H1 indhold
Tilføj derefter et tekstmodul med en H1-titel efter eget valg.
Føj Div-tags til hvert ord i H1-titlen
Skift til tekstfanen i din titelkopi, og tilføj en anden div til hvert ord i din titel. CSS-ID'et skal være forskelligt for hvert ord.
Parat
på
Byg
Smuk
Hjemmesider?
H1 tekstindstillinger
Skift til moduldesignfanen, og rediger H1-tekstindstillingerne i overensstemmelse hermed:
- Titeltype: Work Sans
- Vægt på titeltype: medium
- Sidehovedtekstfarve: #ffffff
- Overskriftstekststørrelse: 4vw (desktop), 5vw (tablet), 6vw (telefon)
- Hovedliniehøjde: 1,4 em
afstand
Skift derefter margenværdierne på forskellige skærmstørrelser.
- Venstre margen: 20vw (skrivebord og tablet), 15vw (telefon)
- Højre margen: 35vw (desktop), 20vw (tablet), 15vw (telefon)
Føj et kodemodul til kolonnen
Indsæt CSS-kode
For at tekstblokanimationen skal gælde for vores titel, har vi brug for en CSS-kode. Vi tilføjer denne CSS-kode til et nyt kodemodul.
<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>
afstand
Skift til moduldesignfanen og fjern al standard bundpolstring.
- Nederste margin: 0px
Føj et knapmodul til kolonnen
Tilføj en kopi
Det næste modul, vi har brug for, er et knapmodul. Indtast en kopi efter eget valg.
Knapindstillinger
Skift til moduldesignfanen, og skift knappens indstillinger i overensstemmelse hermed:
- Brug brugerdefinerede stilarter til knappen: Ja
- Knaptekststørrelse: 1vw (desktop), 2vw (tablet), 3vw (telefon)
- Knappen tekstfarve: #ffffff
- Knappens baggrundsfarve: # 000000
- Knapkantbredde: 0px
- Knapfont: Work Sans
afstand
Gå derefter til afstandsindstillingerne, og anvend brugerdefinerede margen- og polstringsværdier på forskellige skærmstørrelser.
- Øverste margen: 3vw (kontor),
- Venstre margen: 20vw (skrivebord og tablet), 15vw (telefon)
- Øvre polstring: 1.2vw (desktop), 2vw (tablet), 4vw (telefon)
- Bundpolstring: 1.2vw (skrivebord), 2vw (tablet), 4vw (telefon)
- Venstre polstring: 1.8vw (desktop), 3vw (tablet), 6vw (telefon)
- Højre polstring: 1.8vw (skrivebord), 3vw (tablet), 6vw (telefon)
Animation
Tilpas også animationsindstillingerne.
- Animationsstil: Vend
- Animationsretning: ned
- Animationsforsinkelse: 2000 ms
- Animationsintensitet: 100%
- Animation starter uigennemsigtighed: 100%
- Animationshastighedskurve: let ind-ud
- Gentagelse af animation: en gang
Tilføj sektion # 2
Fortsæt med at tilføje et nyt regelmæssigt afsnit lige under det foregående.
afstand
Åbn sektionsindstillingerne, og fjern standard øvre polstring.
- Øvre polstring: 0px
Tilføj en ny linje
Kolonne struktur
Fortsæt med at tilføje en ny række ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje flere moduler skal du åbne linjeparametrene og lade linjen besætte hele bredden af sektionsbeholderen.
- Bredde: 100%
- Maks bredde: 100%
Føj et tekstmodul til kolonnen
Tilføj indhold
Tilføj derefter et tekstmodul med en indhold beskrivelse af dit valg.
Baggrundsfarve
Tilføj en hvid baggrundsfarve.
- Baggrundsfarve: #ffffff
Tekstindstillinger
Skift til moduldesignfanen og rediger tekstindstillingerne i overensstemmelse hermed:
- Tekst font: Work Sans
- Tekstfarve: # 9b9b9b
- Tekststørrelse: 1vw (desktop), 2vw (tablet), 3vw (telefon)
- Højde på tekstlinjen: 2.6em
afstand
Tilføj også brugerdefinerede afstandsværdier på forskellige skærmstørrelser.
- Øverste margen: -5vw (desktop), -20vw (tablet), -27vw (telefon)
- Venstre margen: 20vw (skrivebord), 13vw (tablet), 8vw (telefon)
- Højre margen: 20vw (desktop), 13vw (tablet), 8vw (telefon)
- Øvre polstring: 5vw (desktop), 7vw (tablet og telefon)
- Bundpolstring: 5vw (skrivebord), 7vw (tablet og telefon)
- Venstre polstring: 3vw (desktop), 5vw (tablet), 6vw (telefon)
- Højre polstring: 3vw (skrivebord), 5vw (tablet), 6vw (telefon)
Skyggeæske
Og fuldfør modulindstillingerne ved at anvende en subtil bokseskygge. Det er det!
- Box Shadow Blurstyrke: 50px
- Skygge farve: rgba (0,0,0,0,1)
undersøgelse
Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på, hvordan det ser ud på forskellige skærmstørrelser.
endelige tanker
I denne artikel viste vi dig, hvordan du tilføjer CSS-tekstblokanimationer til din titel. Det er vigtigt at sikre, at din titel er synlig og læses fra starten, og det kan helt sikkert hjælpe at tilføje animation til din titel! Du var også i stand til at downloade JSON-filen gratis. Hvis du har spørgsmål eller forslag, er du velkommen til at efterlade en kommentar i kommentarfeltet nedenfor.
Oversat fra: ElegantThemes
