css-transition和transform实现图⽚悬浮移动动画
今天在京东⾸页上看到⼀个效果，⿏标悬浮在图⽚上时，图⽚发⽣移动，⿏标移⾛时再移回，并且有⼀个过渡效果。
貌似很简单，⾃⼰做做试试吧jquery在线图片
我⾸先使⽤的是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);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。