Плавный эффект заливки контурного текста

See the Pen 1 elem, no pseudo text fill effect in 5 declarations by Ana Tudor (@thebabydino) on CodePen.
HTML
<h1 class='text-fill'>text fill effect</h1>
CSS
/* relevant styles */.text-fill {background: /* 1 */linear-gradient(#a7c957 0 0)0/ 100% repeat-y text;color: #0000; /* 2 */-webkit-text-stroke: 2px #386641;animation: text-fill 8scubic-bezier(.35, 0, .35, 1)infinite alternate /* 4 */}@keyframes text-fill {0% { background-size: 0 /* 5 */ }}/* layout, prettifying,* not relevant for fill effect */html, body { display: grid }html { min-height: 100% }body {background:radial-gradient(#f2e8cf, #bc4749)}h1 {place-self: center;font: 900clamp(2em, min(43vh, 15vw), 15em)advent pro, cursive;text-transform: capitalize;}
1-elem-no-pseudo-text-fill-effect-in-5-declarations.zip
0
5.69 Kb
Нашли ошибку? Сообщите нам, мы исправим!
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!