Измените цвет шрифта как фильтр

внешний интерфейс JavaScript анимация CSS
Измените цвет шрифта как фильтр

Что означает название? Поначалу это может показаться странным, разве цвет шрифта не просто меняется в стиле CSS?
Стиль CSS заключается в изменении цвета всего шрифта, но как изменить половину или даже0.3333...А цвет шрифта?
Сначала посмотрите на эффект,URL-адрес предварительного просмотра

font.png

Адрес CodePen:код спреи.IO/я он тебе дает/спрей/ах...

с нуля

html

<div class="box">
  <div class="down">东东么么哒</div>
  <div class="up">东东么么哒</div>
</div>

css

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  font-size: 5em;
  width: 5em;
  height: 1.2em;
}

Здесь задействовано два элемента div: элемент div цвета красной фасоли и голубой элемент div, и все содержимое — «Dong Dong Miao Da».
И они должны полностью совпадать, включая текстовое наполнение, размер шрифта, положение и т.д.
Здесь возникает проблема иерархии

第一个关键属性 z-index: n    

.up, .down {
  position: absolute;
  height: 100%;
  line-height: 1;
}
.up {
   z-index: 2; 
}
.down {
  z-index: 1;
}

визуальный анализ

是滑动的的div设置了半透明，颜色结合的部分改变的颜色？

Нет, цвет скользящего div — светло-серый, а цвет фона — цвет красной фасоли, который нельзя объединить в светло-голубой.
Это не комбинация цветов, поэтому это должен быть пользовательский цвет, то есть сам светло-голубой текст находится на скользящем элементе div.
Если слова на div должны отображаться как на картинке, то его нужно вырезать.

第二个关键属性 overflow: hidden;

Раздел .up обрабатывается как слайдер

.up {
  color: lightblue;
  z-index: 2;
  width: 1em;
  overflow: hidden;
  border-radius: 15%;
  background: #eee;
}
.down {
  color: indianred;
  z-index: 1;
}

В это время вернитесь к карте карусели, достигла ли карта карусели аналогичного эффекта, хорошо, продолжайте вниз
Карусель прокручивает последовательность картинок, которые мы по очереди понимаем, прокручивая «окно»
Затем делаем анимацию через анимацию, а прокрутку окна реализуем изменением значения left

第三个关键属性 animation

.up {
  animation: run 2.5s infinite;
  -webkit-animation: run 2.5s infinite;
}
@keyframes run {
  0% { left: -1em; }
  100% { left: 5em; }
}
@-webkit-keyframes run {
  0% { left: -1em; }
  100% { left: 5em; }
}

Однако мы обнаружили, что div не может решить эту проблему, потому что окну нужен пустой div, а текстовому содержимому нужен новый div.
На самом деле, div можно решить, мы можем построить его через псевдоэлемент после или псевдоэлемент перед

第四个关键属性 ::before || ::after

Структура html меняется, а div .up работает только как слайдер

<div class="box">
  <div class="down">东东么么哒</div>
  <div class="up"></div>
</div>

css изменения

.up::before {
  content: "东东么么哒";
  position: absolute;
  width: 5em;
}

Однако прокрутка окна также повлияет на положение псевдоэлемента!
В этом случае давайте добавим псевдоэлементу анимацию, противоположную движению окна, чтобы относительный браузер оставался статичным...

.up::before {
  animation: run2 2.5s infinite;
  -webkit-animation: run2 2.5s infinite;
}
@keyframes run2 {
  0% { left: 1em; }
  100% { left: -5em; }
}
@-webkit-keyframes run2 {
  0% { left: 1em; }
  100% { left: -5em; }
}

Выше не нужно использовать JavaScript, материал готов!

поддерживаемая оптимизация

Адрес CodePen:оптимизированный код

Перечислите пункты, которые необходимо оптимизировать:

  • Проблема DRY между значением содержимого псевдоэлемента и текстом div .down
  • Как настроить общий размер дисплея с помощью JavaScript
  • Одно и то же значение, которое неоднократно появляется в css, недостаточно DRY.
  • Трек перемещения ползунка всегда фактически над текстом (то есть, когда текстовое содержимое будет изменено в следующий раз, нет необходимости изменять левое значение в конце слайда)

Мы обнаружили, что содержимое псевдоэлементов нельзя изменить с помощью JavaScript.
Если бы вы могли изменить текст div и текст псевдоэлемента, изменив переменную JavaScript, это было бы здорово!

Ответ: да, css может получать переменные css через var(), через--属性Вы можете установить переменные css, тогда мы монтируем все переменные в свойство root:rootвыше, вы можете получить

И вы можете найти его в браузере

document.querySelector(':root') === document.documentElement // true

Объясните, что это корневой атрибут html, а затем передайтеdocument.documentElement.style.setProperty('--属性', 值)Он может не только обеспечить ремонтопригодность кода, но и оптимизировать код CSS с помощью переменных, импортировать их все в объекты JavaScript и постараться быть СУХИМ!

Категории