HTML5做文字渐变的方法_随笔

这个简单啊，就用CSS3的新属性过渡 transition 就好了，代码如下：

<!DOCTYPE html>

<html>

<head>

<title>文字渐变效果</title>

div{

width: 100px

height: 30px

color: #000

transition: color 1s

}

div:hover{

color: yellow

}

</style>

</head>

<body>

<div>移入试试看</div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

.linear {

font-size:18px

font-weight:400

width:250px

height:40px

line-height:40px

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=##218ee1, endColorStr=#ffffff)/*IE*/

background:-moz-linear-gradient(left, #218ee1, #fafafa)/*火狐*/

background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#15A216), to(#ffffff))/*谷歌*/

background-image: -webkit-gradient(linear, left bottom, left top, color-start(0, #218ee1), color-stop(1, #ffffff))/* Safari &Chrome*/

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#15A216', endColorstr='#fafafa')/*IE6 &IE7*/

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#15A216', endColorstr='#fafafa')"/* IE8 */

}

</style>

</head>

<body>

<div class="linear">申请鉴定流程便捷</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

HTML5做文字渐变的方法