如何实现CSS属性的渐变效果

Question

我希望在焦点元素上将边框颜色从灰色渐变到红色。

使颜色缓慢渐变是容易的，但我想让它缓慢地淡入。

HTML

<input class="timeBlock destination hours" 
    type="text" 
    name="desHours" 
    value="00" 
    maxlength="2">

CSS

input.timeBlock {
    height: 90px;
    width: 90px;
    text-align: center;
    font-size: 3.5em;
    border-radius: 10px;
    color: #444;
    border: 3px solid #ccc;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.15) inset; 
    position: absolute;
    top:0;
    bottom: 0;
    margin: auto;
}

input.focus {
    border: 3px solid #cc0000;
}

JS

$("input").focus(function() {
    $(this).fadeIn('slow', function(){
       $(this).addClass('focus');
  });
});     

- Uncle Slug

---

应用过渡效果。如果您不了解过渡效果，请在Google上搜索，因为CSS3有一个称为过渡的属性，这就是您需要的。 - Maizere Pathak.Nepal

Answer 1

您不需要使用JavaScript来实现此目的。CSS3的transition属性非常有用：

input {
    border: 3px solid #ccc;
    transition:border 1s;
}
input:focus {
    border: 3px solid #cc0000;
}

查看工作示例。

小提示：请记住，它们在Chrome和Firefox中已经工作了很长时间，但是IE<9不支持它们。您仍将获得边框颜色的变化，但没有过渡效果。

- Ian Clark

---

嗯，我比上面的解释更详细地解释了！你能不能至少给我一个0分来回答你的问题？ - Ian Clark

@lan Clark，嘿酷，由于您的第一篇帖子不完整，我已经将其投下了反对票，请编辑您的帖子，以便我可以再次给予支持。 - Maizere Pathak.Nepal

@Lan Clark，你只是在浪费时间撒谎，请不要编辑任何内容，这样我就可以点赞你的帖子了。 - Maizere Pathak.Nepal

浪费时间撒谎？直到现在我从未进行编辑，只是添加了几个空格 - 在称呼我说谎者之前，请自己查看。 - Ian Clark

哎呀，Stack Overflow 变得有点竞争了 - 记住，积分不能兑换奖品 :) - Jim W says reinstate Monica

Answer 2

使用jQuery，您可以使用addClass方法向html元素添加类，并使其淡入。

HTML：

<input class="penguin"></input>

CSS：

.foobar {
    transition:border 1s;
    border: 38px solid #cc0000;
}

JavaScript：

$(".penguin").focus(function() {
  $(this).fadeIn('slow', function(){
    $(this).addClass('foobar');
  });
});

演示：http://jsfiddle.net/ecj6Q/2/

当输入框第一次获得焦点时，它会淡入并将类foobar添加到任何具有类penguin的标签中。结果是边框在1秒钟内从0px慢慢增加到38px。

- Maizere Pathak.Nepal

---

过渡效果是一种让元素逐渐从一种状态转换到另一种状态的特效。 - Maizere Pathak.Nepal

Answer 3

http://jsfiddle.net/c6WcR/

使用Jquery UI

$("input").focus(function() {
$(this).animate({borderColor: "#ff0000" });
}); 

- Jim W says reinstate Monica

Answer 4

一个淡入的CSS文本效果示例。

HTML：

<div id="penguin">Skipper</div>

CSS：

#penguin {
    height: 90px;
    width: 250px;
    font-size: 3.5em;
    color: blue;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.15) inset; 
}
#penguin:hover {
    text-shadow: green 0 0 5px;
    transition:text-shadow 1s;
}

演示 Fiddle: http://jsfiddle.net/Gbuk6/4/ 当你悬停在 div 上时，文本会淡入并闪烁。当您停止悬停时，它会淡出回到原来的位置。

- Eric Leschinski