2013-09-25 4 views
2

Возможно ли создать светящийся текст следующим образом: Flash Example в CSS?Эффект светящегося стиля

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

+0

Нет, это невозможно без 1000+ строк JavaScript. –

+0

@NielsKeurentjes Это неверно, как показывают два ответа. –

+0

@LegoStormtroopr, сравнивающий эти 2 ответа на данный пример Flash, который он пытается воспроизвести, сродни тому, что Fiat Multipla идентичен Ferrari, потому что они могут привести вас в ближайший супермаркет. Воспроизведение точного эффекта или даже что-то рядом с ним просто невозможно с текущим состоянием CSS без тысяч строк кода. –

ответ

0

Я не имею права ссылаться на W3Schools, но я нахожусь на компьютере, у которого нет возможности CSS3 на данный момент.

Вы можете получить необходимый эффект, используя the text-shadow property. Давая тени яркий цвет, а не темный, вы можете получить неоновый эффект. Вы не собираетесь быть в состоянии получить эффект анимации без JavaScript, но код эффекта:

<a class='neon' href='http://example.com'>My cool effect</a> 

С соответствующим правилом CSS из:

a.neon:hover { 
    text-shadow:0 0 3px #eaeaff 
} 

Если приблизиться к эффекту тебе нужно.

+2

Почему бы не связаться с MDN, то? https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow – Ryan

+0

@minitech В W3Schools явно упоминается эффект «неона», который близок к тому, что хочет OP. И я не мог проверить это ... чертовски работа ПК :( –

1

Хорошо, хотя пример показывает анимацию эффекта свечения, вместо этого вы можете использовать текстовую тень в селекторе hover в CSS.

HTML

<body> 
    <ul> 
     <li class="link">Link</li>  
     <li class="link">Link2</li> 
     <li class="link">Link3</li> 
    </ul>  
</body> 

CSS

body{ 
    background-color:steelblue; 
} 

.link{ 
    font-size:2em; 
} 

.link:hover{ 
    text-shadow: 0px 0px 20px rgba(192, 192, 192, 1); 
} 

http://jsfiddle.net/fRwGA/

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