Многострочный текст фон с анимацией

Что я ищу сделать, это добавить цвет фона за текстом на парении, что я уже сделал здесь:Многострочный текст фон с анимацией

https://jsfiddle.net/95utp3g2/9/

Есть ли способ анимировать цвет фона таким образом, чтобы он отображался слева направо, строка за строкой? Я имею в виду, что при наведении фон должен анимироваться слева направо только на первой строке. Затем, спустя пару миллисекунд, фон должен анимироваться для второй строки. Затем через пару миллисекунд фон должен анимироваться для третьей строки.

Есть ли способ сделать это с помощью CSS?

HTML:

<div class="container"> 
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, eiusmod tempor incididunt.</div> 
</div>

CSS:

body { 
    margin: 50px; 
} 

.container { 
    display: block; 
    width: 250px; 
} 

.text { 
    font-family: "Arial"; 
    font-size: 16px; 
    font-weight: bold; 
    display: inline; 
    line-height: 26px; 
} 

.text:hover { 
    background: gold; 
    padding: 2px 0; 
}

источник

2016-08-07 Anonymous

Добро пожаловать на переполнение стека! Ожидается, что вы, по крайней мере, попытаетесь закодировать это для себя. Stack Overflow не является службой записи кода. Я бы предположил, что вы делаете некоторые [** дополнительные исследования **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) , либо через Google, либо путем поиска SO, сделайте попытку и. если у вас все еще есть проблемы, вернитесь ** с кодом ** и объясните, что вы пробовали, и почему это не сработало. –

Единственное, что пришло в голову, это позиционирование, но я не уверен, как бы я специально разместил цвет фона. –

Вам понадобится javascript. Вам понадобится располагаемый диапазон для каждой строки текста и оживить его на месте ... один за другим ... чистый CSS будет возможен, но это будет корабельный код. JS будет намного лучше. –

Ближайший я мог придумать , которые все еще требуются некоторые 1x1px изображений (так как, по-видимому линейных градиентов не может быть анимированным еще) , должен был убедиться, что каждая строка имеет определенный размер (из вашего существующего CSS это выглядело так, как было в порядке), затем используйте несколько фонов с определенными размерами и анимируйте их фоновые позиции с помощью некоторых анимаций @keyframe. Соответствующий CSS я добавил:

.text { 
    display: block; 
    background: linear-gradient(red, red), linear-gradient(green, green), linear-gradient(red, red); 
    background-size: 250px 26px, 250px 26px, 250px 26px; 
    background-position: -250px 0, -250px 26px, -250px 52px; 
    background-repeat: no-repeat, no-repeat, no-repeat; 
}  

.text:hover { 
    animation: myanim 2s; 
    background-position: 0 0, 0 26px, 0 52px; 
} 

@keyframes myanim { 
    0% { 
    background-position: -250px 0, -250px 26px, -250px 52px; 
    } 
    33% { 
    background-position: 0 0, -250px 26px, -250px 52px; 
    } 
    67% { 
    background-position: 0 0, 0 26px, -250px 52px; 
    } 
    100% { 
    background-position: 0 0, 0 26px, 0 52px; 
    } 
}

Fiddle

источник

2016-08-07 21:23:26

Нет проблем с анимацией линейных градиентов ... https://jsfiddle.net/hbxw5sw0/ – vals

Doh, я стою исправлено. Спасибо! Я, должно быть, неправильно понял синтаксис, тогда проблема «подтвердилась» с устаревшим S.O. ответы. Я обновил ответ. –

Многострочный текст фон с анимацией

ответ

Смежные вопросы