Բովանդակություն
- 01. Rollover տեքստի էֆեկտ
- 02. Ստեղծեք CSS
- 03. Տեղադրեք բառը
- 04. Վեր ու վեր
- 05. Սավառնում է ներքև
- 06. Ավտոմատ մարդկանց համար
- 07. Ավելացրեք հերթափոխի դասեր
Rollover հղումները հիանալի միջոց են օգտագործողի ուշադրությունը գրավելու համար, հատկապես, եթե նրանք ինչ-որ անսովոր կամ օրիգինալ բան են անում: Middle Child- ը մեծ ազդեցություն է ունենում, որը հազվադեպ է հանդիպում այլուր, որը գրավում է յուրաքանչյուր տառ և բաժանում դրանք անիմացիայով, որը սկսում է ներս մտնել, երբ այցելուը սավառնում է բառի վրա: Անիմացիան օգնում է փոխանցել բուտերբրոդների ապրանքանիշի խաղային բնավորությունը:
Այս հոդվածում մենք ձեզ ցույց ենք տալիս, թե ինչպես վերստեղծել ազդեցությունը ձեր կայքի վրա: Լրացուցիչ ոգեշնչման համար նայեք CSS- ի անիմացիայի լավագույն օրինակների մեր ուղեցույցին (դրանք ծածկագրելու կարգի հրահանգներով): Մի փոքր այլ բանի համար փորձեք վեբ կայք ստեղծող կամ ամպային պահեստի լավագույն ընտրություն: Եվ եթե ձեր կայքը ավելի բարդ եք դարձնում, համոզվեք, որ ձեր վեբ հոստինգը միացված է:
01. Rollover տեքստի էֆեկտ
Middle Child կայքում տեղադրված հիանալի տեքստային էֆեկտներից մեկը ցանկի մեջ պտտվող էֆեկտների համար է, որտեղ տառերը բաժանվում են տեքստի վրա և փոքր-ինչ պտտվում են: Սկսեք սա մի քանի պարզ HTML պիտակներով:
div> div> Նախաճաշ / div> / div>
02. Ստեղծեք CSS
Օգտագործեք առանձին CSS ֆայլ կամ ոճի հատկորոշիչներ ՝ CSS- ի հետևյալ կանոնները ավելացնելու և էջը լրացնելու զննարկչի ամբողջ չափով ՝ ապահովելով, որ թափքը և փաթաթան ամբողջությամբ հասնեն:
մարմին {լայնությունը `100%; բարձրությունը `100%; լուսանցք ՝ 0; լիցքավորում ՝ 0; } .wrapper {ցուցադրում: ցանց; բարձրությունը `100%; }
03. Տեղադրեք բառը
Ի խոսք դասը կենտրոնացնում է բառը ցանցում: Textանկացած տեքստ, որը տրվում է խոսք դասը կարող է կիրառել սա: Ի վեր դասը կիրառվելու է յուրաքանչյուր այլ տառի վրա, և դրանք կտեղափոխվեն վեր:
.բառ {font-size: 3em; լուսանցք ՝ ավտո ավտո; } .բառ .up {ցուցադրում ՝ inline-block; փոխակերպել. translate3d (0px, 0px, 0px) rotate (0deg); անցում. բոլոր 0.5-ները հեշտությամբ ներթափանցում են; }
04. Վեր ու վեր
Հիմա ներքև դասը կիսում է շատ նման կարգավորումները վեր բայց սավառնակը ցույց է տալիս շարժումը դեպի վեր դեպի վեր շրջում Դեպի վերևը նույնպես փոքր-ինչ պտտվում է տեսքը բարելավելու համար:
.բառ .down {ցուցադրում. inline-block; փոխակերպել. translate3d (0px, 0px, 0px) rotate (0deg); անցում. բոլոր 0.5-ները հեշտությամբ ներթափանցում են; } .բառ: hover .up {transform: translate3d (0px, -8px, 0px) պտտել (12deg); գույնը ՝ # 058b05}
05. Սավառնում է ներքև
Երբ օգտագործողը սավառնում է տեքստի վրա, ներքևի դասը տեքստը տեղափոխում է դեպի ներքև: Ավելի ուշ JavaScript- ում տեքստը բաժանվելու է առանձին տողերի, դասերն ավտոմատ կերպով ավելացվում են այլընտրանքային տողերին:
.բառ ՝ hover .down {transform: translate3d (0px, 8px, 0px) rotate (-12deg); գույնը `# 058b05; }
06. Ավտոմատ մարդկանց համար
Մի փոքր քաշքշուկ է, որ պետք է յուրաքանչյուր տառը դնել տարբեր դասերի տարբեր տողերի մեջ, այնպես որ մենք ավտոմատացնելու ենք գործընթացը `JavaScript- ով պահանջելով ընտրիչին հարցնել և վերցնել յուրաքանչյուր տառը: Այստեղ փող փոփոխականը գրավում է ընթացիկ նամակը, երբ այն անցնում է տեքստի մեջ:
սցենար> var տարրեր = document.querySelectorAll ('. բառ'); համար (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; տարրեր [i] .innerHTML = ’’;
07. Ավելացրեք հերթափոխի դասեր
Այժմ մեկ այլ օղակ յուրաքանչյուր տառը տեղադրում է իր span տարրում և ավելացնում կամ մեկը վեր կամ ներքև դասը մինչեւ տևողությունը: Եթե դիտեք զննարկչում, կտեսնեք, որ տեքստը բաժանված է յուրաքանչյուր տառով վերև և ներքև, մի փոքր պտտվելով:
Գործողության արդյունքը կարող եք տեսնել Middle Child կայքում:
համար (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); տարրեր [i] .appendChild (spn); spn.textContent = str [j]; թող pos = (j% 2): 'Up': 'down'; spn.classList.add (pos); }} / սցենար>
Այս հոդվածն ի սկզբանե տպագրվել է վեբ ձևավորման ստեղծագործական ամսագրում Վեբ դիզայներ.Գնիր 286-րդ համարը կամ բաժանորդագրվել.
