需求:产品要求图片hover有个放大动画效果
技术点: transform scale transition
img.hover {
transform: scale(1.1, 1.1);
transition: .3s transform;
}
transform:scale():
含义:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。
transition: W3C标准中对CSS3的transition这是样描述的:
CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
通过W3C描述,我们可以很容易得到下面的结论:
.3s 表示0.3秒, 执行transform动作。