Šiame trumpame patarime parodysime, kaip lengva pagyvinti fono gradientą naudojant CSS.
Neseniai paskelbtame straipsnyje mes parodėme kaip nustatyti teksto fono gradientą. Žemiau pateikta „CodePen“ demonstracinė versija rodo rezultatą.
Būtinai perskaitykite šį straipsnį, jei nesate tikri, kaip pasiekėme šį rezultatą, nes remsimės šiuo toliau pateiktu pavyzdžiu.
Šios demonstracinės versijos sumetimais pridėkime prie gradiento fono papildomų spalvų:
h1 {
background-image: linear-gradient(
45deg,
#ffb3ba,
#c49c6e,
#bfbf76,
#77b084,
#ff7e74,
#3b82f6,
#c084fc,
#db2777
);
}
Jei išjungsime background-clip: text
ir text-color: transparent
akimirką geriau suvokiame, kaip mūsų gradientas užpildo teksto turinio laukelį.
Dabar pereikime prie fono gradiento animavimo žingsnių.
1 veiksmas: fono dydžio reguliavimas
Norėdami pagyvinti gradiento foną, turime padaryti jį didesnį nei teksto turinio laukelis, kad nematytume viso jo vienu metu. Mes galime tai padaryti naudodami ranką background-size
nuosavybė. (Tu gali skaitykite viską apie fono dydį čia.)
Aš nustatysiu mūsų fono gradiento plotį tris kartus didesnį už antraštės elemento plotį:
h1 {
background-size: 300% 100%;
}
Dabar vienu metu bus matomas tik trečdalis gradiento fono, kaip parodyta toliau.
2 veiksmas: animacijos nustatymas
Tada sukursime animaciją, kuri perkels foną, kad laikui bėgant matytume skirtingas jo dalis.
Galime nustatyti paprastą animacijos taisyklę, pavyzdžiui:
h1 {
animation: gradientAnimation 8s linear infinite;
}
Tai perkels foną pirmyn ir atgal kas 16 sekundžių.
Toliau mes nustatysime an @keyframes
pareiškimas:
@keyframes gradientAnimation {
0% {
background-position: 0;
}
to {
background-position: 100%;
}
}
Šis paprastas @keyframes
pareiškimas perkels mūsų foną iš viršaus į kairę į apačią dešinėje kas aštuonias sekundes.
Toliau esančiame rašiklis vėl išjungė background-clip: text
ir color: transparent
kad galėtume matyti, kas vyksta fone.
Kai vėl įjungsime background-clip: text
ir color: transparent
matome gatavą produktą.
Gana kietas!
Fono vaizdo animavimas
Straipsnyje apie gradiento efektų ir raštų pridėjimą prie teksto taip pat naudojome gėlių fono paveikslėlį. (Matyti čia skirtas rašiklis.)
Pabandykime animuoti ir tą foną. Darysime tai šiek tiek kitaip, nes nenorime iškraipyti fono vaizdo.
Išimkime background-size: contain
iš pradinės demonstracinės versijos ir visai nenustatyti fono dydžio. Tai palieka mums tai:
h1 {
color: transparent;
-webkit-background-clip: text;
background-clip: text;
background-image: url(floral.jpg);
-webkit-text-stroke: 1px #7512d7;
text-stroke: 1px #7512d7;
animation: gradientAnimation 20s linear infinite;
animation-direction: alternate;
}
@keyframes gradientAnimation {
0% {
background-position: 0;
}
to {
background-position: 100%;
}
}
Rezultatas parodytas žemiau esančioje CodePen demonstracijoje.
Pabandykite išjungti background-clip: text
ir text-color: transparent
akimirką, jei norite pamatyti, kas vyksta fone.
Mūsų fono vaizdas kartojasi pagal numatytuosius nustatymus, o tai nėra labai blogai šiam vaizdui. (Tiesiog dėl susidomėjimo pabandykite pridėti background-repeat: no-repeat
kad pamatytumėte, kas atsitiks be pasikartojančio fono.) Kitose situacijose, kai fono paveikslėlis nėra toks geras, galbūt norėsite neleisti, kad vaizdas pasikartotų ir tada background-size
kad vaizdas būtų didesnis, kaip tai padarėme su aukščiau esančiu gradiento fonu. Pavyzdžiui:
h1 {
background-repeat: no-repeat;
background-size: 120%;
}
Štai kaip tai padarė mūsų gėlių demonstracinei versijai.
Išvada
Galėtume sukurti daug įspūdingesnių animacijų, bet čia buvo siekiama, kad viskas būtų paprasta. Galite gilintis į CSS pagrindinius kadrus ir animacijas Kaip pradėti naudotis CSS animacija. Taip pat galite žaisti su animacijos laiku, gradiento kampu ir pan.
Kaip minėta ankstesniame straipsnyje, mėgaukitės tuo, bet nepersistenkite, nes per daug tokios animacijos gali erzinti. Subtilus animuotas fonas antraštėje gali tiesiog suteikti susidomėjimo ar intrigos, kurios jums reikia, kad auditorija būtų įtraukta.