Анимировать сквозной текст с помощью CSS - PullRequest
Новая
       11

Анимировать сквозной текст с помощью CSS

2 голосов
/ 13 февраля 2012

Можно ли использовать анимацию / переходы Webkit для анимации зачеркнутой линии, проходящей через слово слева направо?Насколько я могу судить, я могу только сделать так, чтобы он появлялся / исчезал, а не оживлял его, выделяя текст.

Любая помощь будет принята с благодарностью.Спасибо.

1 Ответ

6 голосов
/ 13 февраля 2012

Это работает .. (Я использовал hover, не уверен, какое событие вы хотите, чтобы оно сработало)

html: 

<p>This is <span class='line_wrap'><span class='line'></span>weird</span></p>​

css: 

span.line_wrap {
    position:relative;
    display:inline-block;        
}
span.line {
    display:inline-block;
    position:absolute;
    left:0;
    top:50%;
    width:0;
    border-top:1px solid grey;
    -webkit-transition: width 0.5s ease-in;
}
span.line_wrap:hover span.line {
    width:100%;    
}​

скрипка: http://jsfiddle.net/bendog/LXKJU/

РЕДАКТИРОВАТЬ: Это действительно просто для иллюстрации, что возможно ... делает ужасную разметку, хотя.Я бы не советовал вам использовать его ...

РЕДАКТИРОВАТЬ 2: Или с помощью Javascript: http://jsfiddle.net/bendog/Kdd7K/

...