Анимированное зачеркивание текста CSS
Я имею в виду этот ответ. Очевидно, что красная линия находится позади текста из-за использования background. Как добиться того же эффекта (с поддержкой многострочности) с красной линией перед текстом?
span {
--thickness: .1em;
--strike: 0;
background: linear-gradient(90deg, transparent, red 0) no-repeat
right center / calc(var(--strike) * 100%) var(--thickness);
transition: background-size .4s ease;
font-size: 1.5em;
}
span:hover {
--strike: 1;
background-position-x: left;
}<span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</span>
Ответы 1
Вы также можете раскрасить текст, используя фон, учитывая background-clip
span {
background:
linear-gradient(red 0 0) no-repeat
left / var(--s,0%) .1em,
#000;
-webkit-background-clip: border-box, text;
background-clip: border-box, text;
color: #0000;
transition: background-size .4s ease;
font-size: 1.5em;
}
span:hover {
--s: 100%;
}<span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</span>@ThreeYearOlds вместо left используйте 0 50%, а затем отрегулируйте 50% для перемещения вверх или вниз.
Большой! 0 60% работает хорошо. Спасибо и приятных выходных!
Не могли бы вы объяснить, что такое color: #0000? С color: #000 это не работает и я не понимаю почему.
@ThreeYearOld вам следует обновлять цвета только в свойстве фона. color необходимо оставаться прозрачным (#0000 прозрачен)
Большое спасибо за ваш молниеносный ответ. Я просто не знал синтаксиса четырех значений, где #RGBA эквивалентно #RRGGBBAA и где A или AA отражает альфа-компонент. Так что color: transparent может быть более понятным. Еще раз спасибо. :)
Не могли бы вы взглянуть на мою правку?
@ThreeYearOld не редактируйте свой вопрос, включая мой ответ или другой вопрос. Не следует менять смысл вопроса и не следует использовать его как способ обсуждения решений.
Я разместил это как новый вопрос.
Это здесь. Буду рад подсунуть вам побольше очков репутации. ;)
Это умно! Спасибо! Можно ли вообще сдвинуть строку немного вверх или вниз?