Kaip sukurti animuotą spausdinimo efektą

Gerai naudojant, CSS animacija gali padidinti jūsų svetainės susidomėjimą ir asmenybę. Šiame straipsnyje mes apžvelgsime, kaip sukurti animuotą efektą, kuris palaipsniui parodys jūsų tipografiją, tarsi ji būtų rašoma rašomąja mašinėle. Galite pamatyti svetainėje veikiančios animacijos pavyzdį Kriptonas , kriptovaliutų prekybos botas. Poveikis yra įspūdingas ir jį lengva įgyvendinti. Skaitykite toliau ir sužinokite, kaip pasiekti šią animaciją savo svetainėje.

  • Naršykite naują CSS animacijos sritį

01. Dokumento inicijavimas

Pirmasis žingsnis - inicijuoti tinklalapio struktūrą. Tai susideda iš HTML talpyklos, atsakingos už galvos ir kūno dalių saugojimą. Nors pagrindinė skyriaus atsakomybė yra išorinio CSS įkėlimas, kūno skyriuje bus išsaugotas 2 veiksme sukurtas HTML turinys.

Typing Effect *** STEP 2 HERE

02. HTML turinys

HTML turinį sudaro sudėtinis rodinys, kuriame naudojama klasė „typing“. Tai naudos CSS, kad pritaikytų spausdinimo efektą bet kuriems antriniams elementams. Antrinis turinio elementas yra pagamintas iš „h1“ žymos, tačiau kurdami elementą kaip pastraipą, galite naudoti kitą elementą, pvz., „P“.



kaip padaryti 3D teksto

Put your title here...

03. CSS inicijavimas

Sukurkite failą, pavadintą „styles.css“. Pirmasis CSS žingsnis apibrėžia dokumentų ir turinio talpyklas, kad jos apimtų visą naršyklės langą be jokių matomų sienų tarpų. Šiame žingsnyje taip pat nustatytos numatytosios juodojo puslapio fono ir baltojo teksto spalvos. Puslapio turinio elementai paveldės šiame etape nustatytą spalvą kaip numatytąją spalvą.

body,html{ display: block; width: 100%; height: 100%; background: #000; color: #fff; padding: 0; margin: 0; }

04. Rašyti vaikus

Visi vaikai, esantys spausdinimo talpykloje, turi būti rodomi vienoje eilutėje nenaudodami teksto. Svarbiausia, kad šiems vaikų elementams būtų taikoma „spausdinimo“ animacija. Nustatyta, kad ši animacija bus leidžiama per penkias sekundes su 50 kadrų momentinių nuotraukų - tai leis sukurti laipsnišką spausdinimo efektą.

.typing > *{ overflow: hidden; white-space: nowrap; animation: typingAnim 5s steps(50); }

05. Veido akys

Efektą taip pat lydi animacinis veidas, kuris, atrodo, pasakoja spausdintą tekstą. Šis žingsnis sukuria šio veido akis kaip CSS „virtualų“ elementą, naudojant po to selektorius. Akys dedamos pirminio teksto atžvilgiu, o jo turinys nustatytas kaip du taškiniai teksto simboliai.



.typing > *::after{ content: '. .'; display: block; position: absolute; top: 1em; left: .35em; }

06. Veido burna

Kaip ir akimis, veido burna daroma iš CSS virtualaus elemento - šį kartą naudojant prieš tai selektorius. Burna yra išdėstyta pagrindinio teksto elemento atžvilgiu, taip pat turi krašto spindulį, kad būtų suapvalinta forma.

padarų dizaino mokslas: gyvūnų anatomijos supratimas

The typingSpeak taikoma animacija; tai truks 0,5 sekundės naudojant du animacijos kadrus. Kartojant animaciją penkis kartus, bendras animacijos laikas bus 2,5 sekundės.

.typing > *::before{ content: ''; position: absolute; display: block; top: 2.1em; left: .25em; width: 1em; height: .1em; border-radius: 100%; background: #fff; animation: typingSpeak .5s steps(2); animation-iteration-count: 5; }

07. Animacijos apibrėžimai

Šis žingsnis apibrėžia animacijas, nurodytas elementų, sukurtų ankstesniuose žingsniuose. The spausdinti gyvūną animacija, kuri buvo naudojama spausdinimo efektui, pakeičia elemento plotį be pločio. The typingSpeak veido burnai naudojama animacija keičia elementą iš plokščio į atviresnį.

samsung - 29 "vedamas lenktas HD 21: 9 ultragarsinis monitorius
@keyframes typingAnim{ from { width: 0 } to { width: 100% } } @keyframes typingSpeak{ 0% { width: 1em; height: .1em } 100% { width: 1em; height: .5em; } } ***

Šis straipsnis iš pradžių buvo paskelbtas kūrybinio interneto dizaino žurnalo „Web Designer“ 275 numeryje. Įsigykite 275 numerį čia arba užsiprenumeruokite „Web Designer“ čia .

Susiję straipsniai: