html 颜色渐变动画效果,js实现按钮颜色渐变动画效果

本文实例讲述了js实现按钮颜色渐变动画效果的方法。分享给大家供大家参考。具体如下：

这里演示js实现按钮慢慢变色的方法，鼠标移到按钮上，按钮的背景色就发生变化，是慢慢的变化，点击按钮会打开指定链接，这里主要是演示按钮变色的代码实现方法。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

按钮慢慢变色

BODY {

MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"

}

A {

FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: black; TEXT-DECORATION: none

}

A:hover {

FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: red; TEXT-DECORATION: underline

}

A:active {

FONT: 9pt "宋体"; CURSOR: hand; COLOR: #ff0033

}

.STYLE1 {

color: #000099;

font-weight: bold;

font-family: "华文新魏";

font-size: 30px;

}

.STYLE2 {

color: #FF3399;

font-size: 40px;

font-family: "华文行楷";

}

按钮慢慢变色

效果显示

hexColor = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]; function mOver() { for (i = 0; i < 13; i++) { setTimeout('document.myForm.button.style.background = "#'+hexColor[12-i]+'0'+hexColor[12-i]+'0c0";', i * 40); } } function mOut() { document.myForm.button.value = "进入脚本之家"; for (i = 0; i < 12; i++) { setTimeout('document.myForm.button.style.background = "#'+hexColor[i]+'0'+hexColor[i]+'0c0";', i * 40); } } // End -->

希望本文所述对大家的javascript程序设计有所帮助。