Nick's Blog

如何在CSS3中实现颜色渐变

本篇将介绍如何在CSS3中实现颜色渐变。

在提到颜色渐变的时候肯定要提到Transition,Transition有两个属性,一个是过度属性名称,另外一个是过度时间。

在Chrome和Safari下需要写成-webkit-transition

在Firefox下要写成-moz-transition

在Opera下要写成-o-transition

然后就建立一个简单的DIV,然后定义为block。

<body>
<div id="block">
</div>
</body>

然后在CSS中来定义block的属性

 #block{
width:400px;
height:400px;
background-color:blue;
margin:0 auto;
}
#block:hover{
background-color:red;
}

此时的变色会是生硬的,如果想要平滑的变色,你需要加上transition的属性,在这里我就是用Chrome的transition属性。

-webkit-transition: background-color 1s;

整体代码:

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

<head>
<meta content="zh-cn" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style>
#block{
width:400px;
height:400px;
background-color:blue;
margin:0 auto;
-webkit-transition: background-color 1s;
}
#block:hover{
background-color:red;
}

</style>
</head>

<body>
<div id="block">
</div>
</body>

</html>