前段时间看到有些网站上有这种效果,鼠标悬停到图上它会自己收缩,于是尝试实现一下,CSS3的动画,定义了两个类,然后用JQ hover事件分别分别给标签添加对应的动画类名,不过效果不好,在迅速来回移动鼠标的时候,动画会衔接不上,突然变大的感觉,原因是在CSS动画中写死了变化的起始和终止时图片的缩放比例,只有完全放大或者缩小之后再进行后续的动画才会感觉流畅,但用户鼠标不可能在图上悬停超过0.5秒再离开。
<li class="flex-item"><a href=""><img src="./image/digital/03.jpg" alt=""><p>暖手宝<br/><em>¥99.00</em></p></a></li>
.productLargeAnimation{animation:ProtoLarge 0.5s ease 0s 1 normal; animation-fill-mode:both; -webkit-animation:ProtoLarge 0.5s ease 0s 1 normal; -webkit-animation-fill-mode:both; }
.productSmallAnimation{animation:ProtoSmall 0.5s ease 0s 1 normal; animation-fill-mode:both; -webkit-animation:ProtoSmall 0.5s ease 0s 1 normal; -webkit-animation-fill-mode:both; }
@keyframes ProtoLarge{0% {transform: scale(1);} 100% {transform: scale(1.03);} }
@-webkit-keyframes ProtoLarge {0% {-webkit-transform: scale(1);} 100% {-webkit-transform: scale(1.03);} }
@-moz-keyframes ProtoLarge {0% {-moz-transform: scale(1);} 100% {-moz-transform: scale(1.03);} }
@-o-keyframes ProtoLarge {0% {-o-transform: scale(1);} 100% {-o-transform: scale(1.03);} }
@keyframes ProtoSmall{0% {transform: scale(1.03);} 100% {transform: scale(1);} }
@-webkit-keyframes ProtoSmall {0% {-webkit-transform: scale(1.03);} 100% {-webkit-transform: scale(1);} }
@-moz-keyframes ProtoSmall {0% {-moz-transform: scale(1.03);} 100% {-moz-transform: scale(1);} }
@-o-keyframes ProtoSmall {0% {-o-transform: scale(1.03);} 100% {-o-transform: scale(1);} }
@keyframes ProtoSmall{0% {transform: scale(1.03);} 100% {transform: scale(1);} }
@-webkit-keyframes ProtoSmall {0% {-webkit-transform: scale(1.03);} 100% {-webkit-transform: scale(1);} }
@-moz-keyframes ProtoSmall {0% {-moz-transform: scale(1.03);} 100% {-moz-transform: scale(1);} }
@-o-keyframes ProtoSmall {0% {-o-transform: scale(1.03);} 100% {-o-transform: scale(1);} }
$("a").hover(function() {
var thatImage = $(this).children('img');
thatImage.removeClass('productSmallAnimation').addClass('productLargeAnimation');
}, function() {
var thatImage = $(this).children('img');
thatImage.addClass("productSmallAnimation").removeClass('productLargeAnimation');
});
今天无意翻看到同类的效果,瞬间明白怎么回事,根本就不需要那么麻烦。
于是乎,自己试了一下:
<div class="c"><a href=""><img src="a.jpg" alt=""></a><p>缩放动画</p></div>
.c{
width: 448px;
height: 400px;
}
.c a{
display: block;
width: 100%;
height: 247px;
overflow: hidden;}
.c img{
-moz-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
transition: all 1s ease 0s;
}
.c a:hover img{
transform: scale(1.15);
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
-o-transform: scale(1.15);
}
所以思维不能受局限了,看到这样的效果就去匆忙写动画, 实际上只是过渡效果。