Подтвердить что ты не робот

Как мне оживить сияющий эффект на текст?

Мне не удалось найти какие-либо хорошие простые обучающие программы, которые оживляют эффект свечения. Как оживить свет в тексте?

4b9b3361

ОТВЕТЫ

Ответ 1

Если вы хотите просто использовать CSS3, вам даже не нужно использовать jQuery/Javascript. Просто сделайте это в своем CSS:

.confirm_selection {
    -webkit-transition: text-shadow 0.2s linear;
    -moz-transition: text-shadow 0.2s linear;
    -ms-transition: text-shadow 0.2s linear;
    -o-transition: text-shadow 0.2s linear;
    transition: text-shadow 0.2s linear;
}
.confirm_selection:hover {
    text-shadow: 0 0 10px red; /* replace with whatever color you want */
}

Здесь скрипка: http://jsfiddle.net/zenjJ/

EDIT:

Если вы хотите, чтобы элемент работал на нем собственный (без зависания), выполните следующее:

CSS

.confirm_selection {
    -webkit-transition: text-shadow 1s linear;
    -moz-transition: text-shadow 1s linear;
    -ms-transition: text-shadow 1s linear;
    -o-transition: text-shadow 1s linear;
    transition: text-shadow 1s linear;
}
.confirm_selection:hover,
.confirm_selection.glow {
    text-shadow: 0 0 10px red;
}

JavaScript:

var glow = $('.confirm_selection');
setInterval(function(){
    glow.toggleClass('glow');
}, 1000);

Вы можете поиграть со временем в CSS/Javascript, чтобы получить точный эффект, который вы ищете.

И, наконец, здесь скрипка: http://jsfiddle.net/dH6LS/

Update Oct. 2013:, поскольку все основные браузеры теперь поддерживают анимацию CSS, вам нужно всего лишь:

.confirm_selection {
    animation: glow .5s infinite alternate;
}

@keyframes glow {
    to {
        text-shadow: 0 0 10px red;
    }
}

.confirm_selection {
    font-family: sans-serif;
    font-size: 36px;
    font-weight: bold;
}
<span class="confirm_selection">
[ Confirm Selection ]
</span>

Ответ 2

Вы можете использовать .animate для циклического перехода к выбранному цвету, чтобы создать эффект "выделения", который, по-видимому, означает "светящееся".

$(".confirm_selection").hover(function() {
    $(this).animate({
        color: "red"
    }, 2000);
}, function() {
    $(this).animate({
        color: "black"
    }, 2000);
});

Здесь вы можете попробовать.

ПРИМЕЧАНИЕ. Цветовая анимация требует использования плагина цветной анимации или пользовательского интерфейса jQuery (который, как я полагаю, вы уже используете, поскольку он был включен в вашу скрипку).

Ответ 3

Вы можете сделать это с чистыми переходами CSS3:

div.transition{
    text-decoration: none;  
    color: blue;  
    text-shadow: none;  
    -webkit-transition: 500ms linear 0s;  
    -moz-transition: 500ms linear 0s;  
    -o-transition: 500ms linear 0s;  
    transition: 500ms linear 0s;  
    outline: 0 none; 
    background-color:#000; 
    font-size:2em;
    width:300px;     
    height:100px; 
    padding:1em;
}

div.transition:hover {
    color: #fff;  
    text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff; 
}

Пример: http://jsfiddle.net/jasongennaro/z5jCB/1/

Примечание. Световой текст лучше всего работает на темном фоне.

Вдохновение (и большая часть кода) отсюда: http://www.sitepoint.com/css3-glowing-link-effect/

Ответ 4

Попробуйте этот код:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function ()
{
    var glow = $('h1');
    setInterval(function()
    {
        glow.toggleClass('glow');
    }, 1000);
});
</script>
<style type="text/css">
    h1 {
        -webkit-transition: text-shadow 1s linear;
        -moz-transition: text-shadow 1s linear;
        -ms-transition: text-shadow 1s linear;
        -o-transition: text-shadow 1s linear;
        transition: text-shadow 1s linear;
        width: 725px;
    }
    h1:hover,
    h1.glow
    {
        text-shadow: 0 0 10px Green;
    }
</style>
</head>

<body>
    <h1>This text has Glow Animation Effect</h1>
    <div class="buttons">
        <input type="text" name="txt"> <input type="button" class="btnAdd" value="Add"><br>
    </div>
    <h3>J Query</h3>
</body>

</html>

Ответ 5

Вот эффект анимации, который я нашел полезным в прошлом, добавив новую функцию шага в объект jQuery fx.

$.fx.step.myBlurRedEffect = function (fx) {
    $(fx.elem).css({
        textShadow: '0 0 ' + Math.floor(fx.now) + 'px #FF0000'
    });
}

который вызывается обычным способом (например, размытие 6px через полсекунды):

$('#myID').animate({
    myBlurRedEffect: 6
},{
    duration: 500
});

http://jsfiddle.net/whLMZ/1/

Это должно заставить вас начать, и вы должны найти много интересных способов расширить это, добавить другие параметры CSS и т.д....:)

Ответ 6

@TheLindyHop

Вы можете попробовать плагин jQuery-glow.

Вы можете скачать его здесь.

Надеюсь, это поможет вам.