css缓慢渐变 |css文本输入框

1.使用transition实现缓慢渐变：

.box{
width:100px;
height:100px;
background-color:#f00;
transition:background-color 1s ease;
}
.box:hover{
background-color:#0f0;
}

上述代码中，box元素的背景颜色在鼠标悬浮时会缓慢渐变为绿色，transition属性设置了背景颜色变化的时间和速度。

2.使用animation实现缓慢渐变：

.box{
width:100px;
height:100px;
background: linear-gradient(to right, #FFC107, #FF9800, #FF5722);
animation: gradient 3s linear infinite;
}
@keyframes gradient {
0% {
background-position: 0% center;
}
100% {
background-position: 100% center;
}
}

上述代码中，box元素的背景颜色使用了线性渐变，animation属性控制背景颜色平滑滚动的速度和方向。

3.使用javascript实现缓慢渐变：

.box{
width:100px;
height:100px;
background-color:#f00;
}
var box= document.querySelector('.box');
var color= '#f00';
var interval = setInterval(function() {
var r= parseInt(color.slice(1,3), 16);
var g= parseInt(color.slice(3,5), 16);
var b= parseInt(color.slice(5,7), 16);
if (b< 255) {
b++;
} else if (g< 255) {
g++;
} else if (r< 255) {
r++;
} else {
clearInterval(interval);
}
box.style.backgroundColor = "rgb(" + r + ", " + g + ", " + b + ")";
color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
}, 5);

上述代码中，使用javascript控制了box元素的背景颜色在5毫秒内缓慢从红色渐变到蓝色。

以上三种方法都可以实现缓慢渐变的效果，具体使用还需根据实际需求选择合适的方法。