CSS3的过渡属性简单实例

在一周的实际上班过程中觉得用到js的地方不算很多，C3倒是很多，这里先简单的巩固下自己的C3的新特性之渐变。

#d1{

width:200px;

height:200px;

border:1px solid purple;

}

}

这是一个简单的紫边正方形，我再写下面的代码

#d1:hover{

background:purple;

}

它的效果就是我鼠标移入就会突变成紫色的正方形，这是很简单的，但是我如果想要不突变就要用到C3里的过渡属性，同样的代码，

#d1{

width:200px;

height:200px;

border:1px solid purple;

transition:background 3s;

}

#d1:hover{

background:purple;

}

现在在看你就会发现由白变紫是在3秒之内逐渐变化的，而与：hover伪类是不一样，给用户的体验肯定也不一样，这里只说了transition的两个属性，其实有四个属性，分别是

property:用来发生样式变化的属性，duration:发生变化持续的时间，timing-function:渐变的方式，delay:延迟的时间。过渡不光可以是背景，像宽度，高度等也都可以。