Fatal编程技术网
  • css/
  • Css 如何在文本上设置发光效果的动画？

Css 如何在文本上设置发光效果的动画？

css

Css 如何在文本上设置发光效果的动画？,css,Css,我还没有找到任何好的简单教程来制作辉光效果的动画。如何设置文本上发光的动画？您可以使用循环到选定的颜色来创建“高亮”效果，这大概就是“发光”的含义 注意：彩色动画需要使用彩色动画插件或jQuery UI（我假设您已经在使用它，因为它已经包含在您的小提琴中）。如果您只想使用CSS3，您甚至不必使用任何jQuery/JavaScript。只需在CSS中执行以下操作： .confirm_selection { -webkit-transition: text-shadow 0.2s line

我还没有找到任何好的简单教程来制作辉光效果的动画。如何设置文本上发光的动画？

您可以使用循环到选定的颜色来创建“高亮”效果，这大概就是“发光”的含义

注意：彩色动画需要使用彩色动画插件或jQuery UI（我假设您已经在使用它，因为它已经包含在您的小提琴中）。

如果您只想使用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 */
}
这是小提琴：

如果希望元素自行运行（不悬停），请执行以下操作：

CSS:

JavaScript:

var glow = $('.confirm_selection');
setInterval(function(){
    glow.toggleClass('glow');
}, 1000);
您可以在CSS/JavaScript中调整时间，以获得所需的确切效果

最后，这里是小提琴：

2013年10月更新：由于所有主流浏览器现在都支持CSS动画，您只需要以下内容：

。确认所选内容{
动画：辉光。5s无限交替；
}
@关键帧发光{
到{
文本阴影：0 10px红色；
}
}
.确认您的选择{
字体系列：无衬线；
字体大小：36px；
字体大小：粗体；
}

[确认选择]
您可以通过纯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; 
}
例如：

注意：发光文本在深色背景下效果最好

灵感（以及大部分代码）来自这里：

这是一个动画效果，我发现它在过去通过向jQuery fx对象添加一个新的步长函数非常有用

$.fx.step.myBlurRedEffect = function (fx) {
    $(fx.elem).css({
        textShadow: '0 0 ' + Math.floor(fx.now) + 'px #FF0000'
    });
}
这是以通常的方式调用的（例如半秒钟内模糊6px）：

这应该让您开始，您应该找到许多有趣的方法来扩展它，添加其他CSS参数等等：）

请尝试以下代码：

<!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>


$（文档）.ready（函数（）
{
变量辉光=$（'h1'）；
setInterval（函数（）
{
glow.toggleClass（'glow'）；
}, 1000);
});
h1{
-webkit转换：文本阴影1s线性；
-moz过渡：文本阴影1s线性；
-ms过渡：文本阴影1s线性；
-o-过渡：文本阴影1s线性；
过渡：文本阴影1s线性；
宽度：725px；
}
h1：悬停，
h1.发光
{
文本阴影：0 10px绿色；
}
此文本具有发光动画效果


J查询
没有人提到css3关键帧，它可以在摆脱javascript的情况下为发光效果设置动画（这来自javascript开发人员）


：root{--颜色：蓝色；}
span.vjs{--color:#F3E5AB；}
span.cv{--颜色：天蓝色；}
正文{背景：灰色；}
.vjs、.cv、h1{
文本对齐：居中；
字体大小：30磅；
字号：100；
字体系列：草体2；
}
.vjs{
文本阴影：0 0 2px#333，0 0 4px#333；
颜色：var（--颜色）；
}
.简历{
文本阴影：0 0 2px#fff，0 0 4px#fff；
颜色：2965f1；
}
h1{
文本阴影：0 0 2px#fff，0 0 4px#fff；
颜色：黑色；
}
.cv:hover、.vjs:hover、h1:hover{
动画：辉光1s线性无限；
颜色：var（--颜色）；
}
@关键帧发光{
0%{文本阴影：0px变量（--颜色）；}
50%{文本阴影：0 10px变量（--颜色）；}
100%{文本阴影：0px变量（--颜色）；}
}
此文本具有真实的辉光动画效果
变量和CSS变量。将鼠标悬停在所有文本上！
A

我们需要的不仅仅是“设置光晕效果的动画”。您希望此动画看起来像什么？换颜色？改变辉光半径？任何事情，一旦我开始，我可以从那里调整它。因为这只是css属性。好吧，我想我应该指定我的意思是CSS3属性，更具体地说是文本/框阴影。我只是假设当人们想到辉光时，他们会想到有光环的东西。。。就像辐射一部分能量。哦，别忘了jQuery本身并不支持彩色动画。您必须使用jQuery UI或彩色动画插件。您实际上可以使用CSS3转换制作动画。CSS3属性如何？我可以为文本阴影设置动画吗？发光的定义：发光。我以为这是众所周知的=D@TheLindyHop-我对“发光元素”的理解恰好是先亮后暗：这很性感。有没有办法让它跳动？喜欢在没有：hover？@TheLindyHop的情况下执行动画我添加了一个工作版本。您将CSS属性设置为无效值“text shadow:4[x]px#FFFFFF”（4 what？）。@尽管10月13日的更新可能是现代浏览器的首选方法，但Lindyhop只是将其再次显示出来，跨浏览器方法规则。设置间隔循环以获得胜利！很好的更新。对我的“脉冲”文本效果非常有效。我使用了ease-in-out和一点延迟，但基于此。即使您使用了
transition
，您也不必在它前面加前缀： 
$.fx.step.myBlurRedEffect = function (fx) {
    $(fx.elem).css({
        textShadow: '0 0 ' + Math.floor(fx.now) + 'px #FF0000'
    });
}

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

<!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>

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
        :root { --color: blue; }
        span.vjs { --color: #F3E5AB; }
        span.cv { --color: skyblue; }
        body {background:gray;}
        .vjs, .cv, h1 {
          text-align: center;
          font-size: 30pt;
          font-weight: 100;
          font-family: cursive2;
        }
        .vjs {
          text-shadow: 0 0 2px #333333, 0 0 4px #333333;
          color: var(--color);
        }
        .cv {
          text-shadow: 0 0 2px #fff, 0 0 4px #fff;
          color: #2965f1;
        }
        h1 {
          text-shadow: 0 0 2px #fff, 0 0 4px #fff;
          color:black;
        }
        .cv:hover, .vjs:hover, h1:hover {
            animation: glow 1s linear infinite;
            color: var(--color);
        }
        @keyframes glow {
            0% {text-shadow: 0 0 0px var(--color);}
            50% {text-shadow: 0 0 10px var(--color);}
            100% {text-shadow: 0 0 0px var(--color);}
        }
    </style>
    <script src="vanilla-js.com/lib/vanilla.4.1.min.js"></script>
    </head>

    <body>
    <h1>This text has Real Glow Animation Effect with 
<span class="vjs">Vanilla JS</span>And <span class="cv">CSS Variables</span>. Hover over all the texts!</h1>
    </body>

    </html>