如何在CSS3中实现颜色渐变

NICK

10 years ago

本篇将介绍如何在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>