Док развијају веб апликацију, програмери увек теже да ефикасно имплементирају својства ЦСС стила. ЦСС пружа неколико својстава стилизовања, као што су боја, позиција, поравнања и још много тога. Поред ових својстава, дозвољава нам да поставимо акцију анимације на елементе. У ту сврху, „ @кеифраме с ” ће се користити правила.
Овај чланак ће показати како можемо направити текст који трепери/трепери помоћу ЦСС-а.
Како направити трепћући текст помоћу ЦСС-а?
Да би текст треперио, ЦСС “ непрозирност “ имовина са “ @кеифрамес ” може се применити правило. Погледајте примере у наставку.
Пример 1: Направите текст који трепери
У ХТМЛ, додајте „ <див> ” елемент и доделите му „ блинк-стиле ' класа. Затим додајте „ <х3> ” да бисте одредили наслов између елемента див:
< див класа = 'стил трептања' >
< х3 > Линук х3 >
див >
Идемо даље на стилизовање ХТМЛ елемената.
Стил „блинкање“ див
.блинк-стиле {позадина: ргб ( 0 , 0 , 0 ) ;
}
ЦСС “ позадини ” својство се примењује на див елемент са класом “ блинк-стиле ”.
Елемент стила „х3“.
х3 {тект-алигн: центар;
фонт-фамили: Вердана;
боја: #ффц310;
анимација: блинк-тект 1.9с линеарна бесконачна;
величина фонта: 6ем;
}
ХТМЛ “ <х3> ” елемент је украшен следећим ЦСС својствима:
- “ Поравнање текста ” својство поставља поравнање текста елемента.
- “ породица фонтова ” дефинише стил фонта за текст.
- “ боја ” се користи за бојење текста елемента.
- “ анимација ” је скраћено својство које специфицира име анимације, трајање анимације, функцију времена анимације и вредности својства броја итерација анимације.
- “ фонт-сизе ” својство прилагођава величину фонта углавном у јединицама „пк“ и „ем“.
Примените „правило @кеифраме“ на анимацију „блинк-тект“.
@ кључни кадрови трепћући текст {0 % {
непрозирност: 0 ;
}
педесет % {
непрозирност: једно ;
}
100 % {
непрозирност: 0 ;
}
Назив анимације ' блинк-тект ” је наведено у својству анимације. „ @кеифраме ” правило се додаје испред имена анимације које означава понашање анимације у различитим интервалима као што је наведено у наставку:
- у „ 0% ” анимација, непрозирност текста је постављена на 0.
- у „ педесет% ” анимација, непрозирност текста је постављена на 1.
- у „ 100% ” анимација, непрозирност текста је постављена на 0.
Излаз
Пример 2: Прављење вишеструког текста који трепери
Да бисте направили више текстова који трепћу у ХТМЛ-у, следите доле наведене кораке:
- Прво поставите „ <див> ” елемент и доделити му класу “ тект-див ”.
- Затим додајте два ' <п> ” да бисте укључили неки текст.
- Првом елементу „<п>” је додељена класа „ трепери ”.
- Другом су додељене две класе, „ трепери ' и ' једно ”. Обема класама се приступа у ЦСС-у да би се прогласила својства стила:
< стр класа = 'трепери' > Трепери трепери стр >
< стр класа = 'бљеска један' > Мала звезда * стр >
див >
Сада погледајте одељак ЦСС да бисте стилизовали ХТМЛ “ <п> ” елементи.
Стил „тект-див“ див
.тект-див {ширина: 400пк;
маргина: ауто;
боја позадине: ргб ( 42 , 49 , 49 ) ;
паддинг: 8пк;
}
„ .тект-див ” се користи за приступ елементу <див>. Унутар витичастих заграда, следећа ЦСС својства се примењују на „.тект-див“:
- “ ширина ” својство прилагођава ширину елемента.
- “ маргина ” додаје простор око елемента.
- “ боја позадине ” поставља боју позадине.
- “ паддинг ” производи простор унутар границе елемента.
Класа „блиставог“ стила
.трепери {боја: жута;
фонт-сизе: 40пк;
фонт-фамили: цурсиве;
фонт-веигхт: болд;
анимација: 0.6с линеарно бесконачно у стилу треперења;
}
„ .трепери ” се користи за приступ ХТМЛ ознакама <п>. У овој класи су имплементирана следећа својства:
- “ фонт-веигхт ” означава дебљину фонта.
- Остала својства су објашњена у горњем одељку.
Примените „правило @кеифраме“ на анимацију у „стилу трептања“.
@ кључни кадрови у треперећем стилу {0 % {
непрозирност: 0 ;
}
}
Прилагодите понашање „ трепћући стил ” анимација помоћу “ @кеифраме ' Правила. На почетку анимације, непрозирност текста ће бити 0, што указује на потпуни ниво транспарентности елемената.
Да бисте направили анимацију на другом “ <п> ” елемент мало другачији, класа “ једно ” је декларисан са следећим стиловима анимације:
Стил „један” разред
.једно {анимација: једна 1с линеарна бесконачна;
}
@ кључни кадрови један {
педесет % {
непрозирност: 0 ;
}
}
Излаз
Ефективно смо научили како да направимо трепћући текст користећи различита својства ЦСС стила.
Закључак
У ХТМЛ-у се користи неколико ЦСС својстава да би стил текста треперио. „ анимација ' и ' непрозирност ” својства се обично дефинишу у овом контексту. Да бисте подесили понашање трептаја, „ @кеифраме ” правило је декларисано за својство анимације. Овај чланак је објаснио како да направите текст који трепери или трепери у ХТМЛ-у користећи ЦСС.