添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
由于hover伪类添加的动画效果,仅当 鼠标 放在元素上时会被触发,而当 鼠标 离开 时,效果会中断,会显得很生硬。 大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦, CSS 3 便可以帮你解决这些问题。 <!DOCTYPE html> <html lang="en"> <meta charset="UTF - 8"> <meta name="viewport" content="width=device - width, initial - scale=1.0"> CSS 3 实现 鼠标 移动到 图片 图片 变大( 缓慢 变大,有过渡效果, 放大 的过程是有动画过渡的,这个过渡的时间可以自定义) CSS 3 的transform:scale()可以实现按比例 放大 或者缩小功能。 CSS 3 的transition允许 CSS 的属性值在一定的时间区间内平滑地过渡。这种效果可以在 鼠标 单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变 CSS 的属性值。 参考文档: http://blog.csdn.net/u014175572/article/details/515 3 5768 .newli_img:hover img{ - webkit - transform:scale(1.2);/*在Safari 和 Chrome兼容下 还原 */ - moz - transform:scale(1.2);/*在Fire... 浏览器打开