在一周的实际上班过程中觉得用到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:延迟的时间。过渡不光可以是背景,像宽度,高度等也都可以。