CSS text-shadow унаследованный цвет ключевых кадров

Мне нужно применить класс .shglow к нескольким текстам с цветной тенью, чтобы он мог светиться. Я пробовал использовать ключевой кадр с начальным свойством цвета или вообще без цвета. Как сделать так, чтобы это работало только с css?

<div class = "sh_3 shglow">Glow this red shadow</div>
<div class = "sh_4 shglow">Glow this blue shadow</div>

.sh_3{text-shadow:1px 1px 1px red}
.sh_4{text-shadow:1px 1px 1px blue}
.shglow{animation:shglow .5s infinite alternate;}

@keyframes shglow
{
    0% {text-shadow:0 0 3px inherit;}
    50% {text-shadow:0 0 13px inherit;}
    100% {text-shadow:0 0 23px inherit;}
}

Без изменения HTML или использования JavaScript не обойтись.

— 18.03.2018 17:30

@BoltClock да, мы можем с CSS :) stackoverflow.com/a/49351158/8620333

— 18.03.2018 18:57

@Temani Afif: Ну да, переменные.

— 18.03.2018 18:57

css css-animations

18.03.2018 17:19

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

340

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете сделать это с помощью переменных CSS:

.sh_3 {
  --c: red;
  text-shadow: 1px 1px 1px var(--c);
}

.sh_4 {
  --c: blue;
  text-shadow: 1px 1px 1px var(--c);
}

.shglow {
  animation: shglow .5s infinite alternate;
}

@keyframes shglow {
  0% {
    text-shadow: 0 0 3px var(--c, yellow);
  }
  50% {
    text-shadow: 0 0 13px var(--c, yellow);
  }
  100% {
    text-shadow: 0 0 23px var(--c, yellow);
  }
}

<div class = "sh_3 shglow">Glow this red shadow</div>
<div class = "sh_4 shglow">Glow this blue shadow</div>
<div class = "shglow">Default one</div>

Вы также можете не указывать цвет, поэтому будет рассматриваться цвет по умолчанию, а цвет по умолчанию - это цвет элемента. Кстати, с помощью этого решения вы обязаны изменить цвет элемента.

.sh_3 {
  color: red;
  text-shadow: 1px 1px 1px;
}

.sh_4 {
  color: blue;
  text-shadow: 1px 1px 1px;
}

.shglow {
  animation: shglow .5s infinite alternate;
}

@keyframes shglow {
  0% {
    text-shadow: 0 0 3px;
  }
  50% {
    text-shadow: 0 0 13px;
  }
  100% {
    text-shadow: 0 0 23px;
  }
}

<div class = "sh_3 shglow">Glow this red shadow</div>
<div class = "sh_4 shglow">Glow this blue shadow</div>
<div class = "shglow">Default one</div>

18.03.2018 18:56

Другие вопросы по теме

Почему моя CSS-анимация не применяется к правильному элементу?

Переходы CSS не влияют на замененный узел

Анимируйте вращающуюся всплывающую подсказку без вращения самого текста (CSS)

Margin-right не работает с изображением

Css анимация часов с начальной позицией, установленной в js?

В чем причина такой длинной рамки

Как использовать свойства CSS преобразования в Choreographer JS?

Загрузчики CSS, отображают несколько на странице

Проблемы с z-index при CSS-анимации

Проблема с анимацией по ключевым кадрам для циклической текстовой карусели

CSS text-shadow унаследованный цвет ключевых кадров

Ответы 1

Другие вопросы по теме

Похожие вопросы