css-transition和transform实现图片悬浮移动动画
2016-12-09 17:33
846 查看
今天在京东首页上看到一个效果,鼠标悬浮在图片上时,图片发生移动,鼠标移走时再移回,并且有一个过渡效果。
貌似很简单,自己做做试试吧
我首先使用的是jquery在鼠标悬浮到图片上给图片增加一个类,这个类的样式使用animation实现动画效果。表面上是实现了,然后实际情况是,滚动页面时有些卡,应该是滚动时鼠标经过N个图片,大量的DOM操作严重消耗性能,所以还是采用了伪类hover,给hover应用样式实现动画。而且简单的移动使用animation有些复杂,利用transform和transition完全就够了。
1、:hover样式,我这里把moveleft应用到了图片的上层li元素。效果是水平方向向左10px,0.4s完成。注意在transform里,坐标代表left和top。
2、移动完成后,发现鼠标移走后,图片立刻回了原地,这样不太好……所以直接把过渡样式加入到img声明中(:hover里的transition声明可以删除),这样图片就可以0.4s回到原地了~
关键时刻还是得靠W3school http://www.w3school.com.cn/cssref/pr_transform.asp
貌似很简单,自己做做试试吧
我首先使用的是jquery在鼠标悬浮到图片上给图片增加一个类,这个类的样式使用animation实现动画效果。表面上是实现了,然后实际情况是,滚动页面时有些卡,应该是滚动时鼠标经过N个图片,大量的DOM操作严重消耗性能,所以还是采用了伪类hover,给hover应用样式实现动画。而且简单的移动使用animation有些复杂,利用transform和transition完全就够了。
1、:hover样式,我这里把moveleft应用到了图片的上层li元素。效果是水平方向向左10px,0.4s完成。注意在transform里,坐标代表left和top。
.moveleft:hover img{ -webkit-transition: transform 0.4s; -o-transition: transform 0.4s; transition: transform 0.4s; -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); }
2、移动完成后,发现鼠标移走后,图片立刻回了原地,这样不太好……所以直接把过渡样式加入到img声明中(:hover里的transition声明可以删除),这样图片就可以0.4s回到原地了~
.findbrandrank-list-brand-content-list li img{ -webkit-transition: transform 0.4s; -o-transition: transform 0.4s; transition: transform 0.4s; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
关键时刻还是得靠W3school http://www.w3school.com.cn/cssref/pr_transform.asp
相关文章推荐
- VC实现图片移动(动画效果)
- CSS实现鼠标移动到图片,更换图片
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
- JS实现动画兼容性的transition和transform实例分析
- css实现鼠标移动图片上放大效果
- 图片的左右移动,js动画效果实现代码
- Qt移动应用开发(三):使用精灵图片实现帧动画
- Qt移动应用开发(三):使用精灵图片实现帧动画
- MDN404页的图片中眼睛的动画竟然是用CSS实现的
- 【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动
- 完全用CSS实现鼠标移动到图片并更换图片
- CSS图片翻转动画技术详解(IE也实现了)
- flash与动画:AS3图片移动 实现
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- 使用WPF Resource以及Transform等技术实现鼠标控制图片缩放和移动的效果
- 简单图片3D变换动画的制作(使用transition、transform)
- CSS3 transition实现超酷图片墙动画效果
- 1.纯css实现鼠标移动图片切换的效果
- 用react的ReactCSSTransitionGroup插件实现简单的弹幕动画
- css 动画 transform transition animation