NEXT
PREV
您現在的位置:首頁/知識中心

CSS3實現鼠標移動到圖片上圖片變大,有過渡效果

文章作者:道成科技發布時:2016-04-01點擊:501次

CSS3的transition允許CSS的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發,并圓滑地以動畫效果改變CSS的屬性值。

效果演示

其中-moz-transform: scaleY(1); 數字1是放大的倍數, -webkit-transition: all 0.4s ease-in-out;0.4s是完成的時間

CSS代碼如下:
.img-k-left a img{width:400;height:300px; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.img-k-left:hover a img { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=.7); opacity: .7; }
0
加拿大快乐8开奖网站