Мазмун
- 01. Текшерүү текстинин эффектиси
- 02. CSS түзүү
- 03. Сөздү жайгаштырыңыз
- 04. Өйдө-ылдый
- 05. Ылдый түшүп
- 06. Эл үчүн автоматтык
- 07. Кезектешкен класстарды кошуу
Ролловер шилтемелери колдонуучунун көңүлүн буруунун мыкты жолу, айрыкча, алар адаттан тыш же оригиналдуу нерсе жасашса. Ортоңку баланын башка жерде сейрек кездешүүчү таасири чоң, ал ар бир тамганы басып алып, анимация менен бөлүп салат, бул конок сөздүн үстүнөн чыкканда башталат. Анимация сэндвич брендинин ойноок мүнөзүн жеткирүүгө жардам берет.
Бул макалада биз сиздин сайтыңызга кандайча таасир эте тургандыгын көрсөтөбүз. Көбүрөөк илхам алуу үчүн, CSS анимациясынын эң мыкты мисалдары боюнча көрсөтмөнү карап чыгыңыз (аларды кантип коддоо керектиги жөнүндө нускамалар менен). Бир аз башкача нерсе үчүн, мыкты веб-сайт куруучусун же мыкты булут сактагычын тандап алыңыз. Эгер сиз өзүңүздүн сайтыңызды татаалдаштырып жатсаңыз, анда веб-хостингдин ошол жерде экендигин текшерип алыңыз.
01. Текшерүү текстинин эффектиси
Middle Child веб-сайтындагы эң сонун тексттик эффекттердин бири - тамгалар текст боюнча бөлүнүп, бир аз айланып турган менюдагы оодарылып эффекттер. Муну жөнөкөй HTML тегдеринен баштаңыз.
div> div> завтрак / div> / div>
02. CSS түзүү
Төмөнкү CSS эрежелерин кошуу үчүн өзүнчө CSS файлын же стил тэгдерин колдонуңуз жана баракча браузердин толук көлөмүн толтуруп, тулку боюна жана оромо толук бойдон жеткиликтүүлүгүн камсыз кылыңыз.
тулку {туурасы: 100%; бийиктиги: 100%; margin: 0; толтуруу: 0; } .wrapper {дисплей: тор; бийиктиги: 100%; }
03. Сөздү жайгаштырыңыз
The сөз клеткадагы сөздү борборго бөлөт. Берилген ар кандай текст сөз класс колдонсо болот. The өйдө класс башка ар бир тамгага колдонулат жана алар жогору карай жылышат.
.word {font-size: 3em; маржа: auto auto; } .word .up {дисплей: inline-block; өзгөртүү: translate3d (0px, 0px, 0px) айландыруу (0deg); өткөөл: бардык 0,5s жеңилдетилген; }
04. Өйдө-ылдый
Азыр ылдый класс окшош параметрлерди бөлүшөт өйдө бирок жылдыруучу үчүн жогору кыймылын көрсөтөт өйдө жылдыруу. Жогору карай дагы бир аз бурулуп, көрүнүшүн жакшыртат.
.word .down {дисплей: inline-block; өзгөртүү: translate3d (0px, 0px, 0px) айландыруу (0deg); өткөөл: бардык 0,5s жеңилдетилген; } .word: hover .up {transform: translate3d (0px, -8px, 0px) rotate (12deg); color: # 058b05}
05. Ылдый түшүп
Колдонуучу тексттин үстүнөн жылдырганда, ылдый класс текстти ылдый жылдырат. Кийинчерээк JavaScriptте текст өзүнчө аралыктарга бөлүнүп, класстар автоматтык түрдө кошумча орундарга кошулат.
.word: hover .down {transform: translate3d (0px, 8px, 0px) rotate (-12deg); color: # 058b05; }
06. Эл үчүн автоматтык
Ар бир тамганы ар башка класстарга алмаштыруучу аралыгы менен жазуу керектиги бир аз убара, андыктан JavaScriptти тандап, ар бир тамганы алып, автоматташтырабыз. Бул жерде str өзгөрмө учурдагы тамганы басып өтүп, текстти аралап өтүп жатат.
скрипт> var elements = document.querySelectorAll (’.word’); for (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; элементтер [i] .innerHTML = ’’;
07. Кезектешкен класстарды кошуу
Эми дагы бир цикл ар бир тамганы өзүнүн span элементине жайгаштырып, же өйдө же ылдый класска чейинки аралыктарга. Эгер сиз бул нерсени браузерден карасаңыз, анда текст ар бир тамгага өйдө-ылдый бөлүнүп, бир аз айланып турат.
Иш-аракеттердин натыйжасын Middle Child веб-сайтынан көрө аласыз.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); elements [i] .appendChild (spn); spn.textContent = str [j]; pos = (j% 2) болсунбу? 'Өйдө': 'ылдый'; spn.classList.add (pos); }} / скрипт>
Бул макала алгач чыгармачыл веб-дизайн журналында жарыяланган Веб дизайнер.286 чыгарылышын сатып алуу же жазылуу.
