果糖酱的博客

  • 首页

  • 标签

  • 归档

  • 个人成长

CSS3图片放大动画

发表于 2017-04-27   |   标签 CSS3   |  

需求:产品要求图片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动作。

  • 文章目录
  • 站点概览
果糖酱的博客

关注互联网技术_IT职场_郭廷杰_个人博客

65 文章
7 标签
RSS

友情链接

Powered by Ghost
Theme - NexT.Mist