При разработке веб-приложения разработчики всегда стремятся эффективно реализовать свойства стилей CSS. CSS предоставляет несколько свойств стиля, таких как цвет, положение, выравнивание и многие другие. В дополнение к этим свойствам он позволяет нам устанавливать действие анимации для элементов. С этой целью « @ключевой кадр с будут использоваться правила ».
Эта статья продемонстрирует, как мы можем сделать мигающий/мигающий текст с помощью CSS.
Как сделать мигающий текст с помощью CSS?
Чтобы текст мигал, CSS « непрозрачность ” недвижимость с “ @ключевые кадры можно применить правило. Посмотрите примеры ниже.
Пример 1: сделать мигающий текст
В HTML добавьте « <дел> ” и назначьте ему “ мигающий стиль ' класс. Далее добавьте « », чтобы указать заголовок между элементом div:
< див класс знак равно 'мигающий стиль' >
< h3 > линукс h3 >
див >
Давайте перейдем к стилизации HTML-элементов.
Стиль div «blink-style»
.blink-стиль {фон: RGB ( 0 , 0 , 0 ) ;
}
CSS « задний план » применяется к элементу div с классом « мигающий стиль ».
Элемент стиля «h3»
h3 {выравнивание текста: по центру;
семейство шрифтов: Verdana;
цвет: #ffc310;
анимация: блинк-текст 1.9с линейная бесконечная;
размер шрифта: 6em;
}
HTML « ” украшен следующими свойствами CSS:
- “ выравнивание текста » задает выравнивание текста элемента.
- “ семейство шрифтов ” определяет стиль шрифта для текста.
- “ цвет ” используется для окрашивания текста элемента.
- “ анимация ” — это сокращенное свойство, которое указывает имя анимации, продолжительность анимации, функцию синхронизации анимации и значения свойства подсчета итераций анимации.
- “ размер шрифта » регулирует размер шрифта в основном в единицах «px» и «em».
Примените «правило @keyframe» к анимации «blink-text»
@ ключевые кадры {0 % {
непрозрачность: 0 ;
}
50 % {
непрозрачность: один ;
}
100 % {
непрозрачность: 0 ;
}
Название анимации ' мигающий текст ” указывается в свойстве анимации. “ @ключевой кадр » добавляется перед именем анимации, что означает поведение анимации через разные промежутки времени, как указано ниже:
- В ' 0% », непрозрачность текста устанавливается равной 0.
- В ' 50% », непрозрачность текста установлена на 1.
- В ' 100% », непрозрачность текста установлена на 0.
Вывод
Пример 2: создание многократно мигающего текста
Чтобы сделать несколько мигающих текстов в HTML, выполните следующие действия:
- Сначала поставьте « <дел> » элемент и присвоить ему класс « текстовый div ».
- Затем добавьте два « », чтобы включить некоторый текст.
- Первому элементу «
» присваивается класс « мигающий ».
- Второму присваивается два класса», мигающий ' и ' один ». Оба класса доступны в CSS для объявления свойств стиля:
< п класс знак равно 'мигающий' > Сверкай сверкай п >
< п класс знак равно 'мигающий один' > Маленькая звезда * п >
див >
Теперь ознакомьтесь с разделом CSS, чтобы стилизовать HTML. <р> элементы.
Стиль div «text-div»
.text-div {ширина: 400 пикселей;
маржа: авто;
цвет фона: rgb ( 42 , 49 , 49 ) ;
отступ: 8px;
}
“ .text-div ” используется для доступа к элементу
- “ ширина » регулирует ширину элемента.
- “ прибыль ” добавляет пространство вокруг элемента.
- “ фоновый цвет ” задает цвет фона.
- “ набивка » создает пространство внутри границы элемента.
Стиль «мигающий» класс
.мигает {цвет: желтый;
размер шрифта: 40px;
семейство шрифтов: скоропись;
вес шрифта: полужирный;
анимация: мигающий стиль 0,6 с, линейный, бесконечный;
}
“ .мигает ” используется для доступа к тегам HTML
. В этом классе реализованы следующие свойства:
- “ вес шрифта ” указывает толщину шрифта.
- Другие свойства описаны в предыдущем разделе.
Примените «правило @keyframe» к анимации «мигающего стиля»
@ ключевые кадры {0 % {
непрозрачность: 0 ;
}
}
Отрегулируйте поведение « мигающий стиль ” анимация с использованием “ @ключевой кадр ' правила. В начале анимации непрозрачность текста будет равна 0, что указывает на полный уровень прозрачности элементов.
Чтобы сделать анимацию на втором “ <р> » элемент немного отличается, класс « один ” объявлен со следующими стилями анимации:
Стиль «один» класс
.один {анимация: одна 1с линейная бесконечная;
}
@ ключевые кадры один {
50 % {
непрозрачность: 0 ;
}
}
Вывод
Мы эффективно узнали, как сделать мигающий текст, используя различные свойства стилей CSS.
Заключение
В HTML используется несколько свойств CSS, чтобы сделать стиль текста мерцающим. “ анимация ' и ' непрозрачность ” свойства обычно определяются в этом контексте. Чтобы настроить поведение моргания, « @ключевой кадр » объявлено для свойства анимации. В этой статье объясняется, как сделать мигающий или мерцающий текст в HTML с помощью CSS.