所以我一直想在博客上的图标上进行这种缩放转换。缓入正常工作,但缓出不正常......我读了一些东西,但没有一个是关于比例转换的,所以我一直很难将它应用到我的案例中...... 希望你能帮助我谢谢 这是我的代码:
#avatar {
margin:auto;
margin-top:15px;
width:50px;
height:50px;
border-radius:60px;
border:0px solid {color:Main icon background};
z-index:10;
}
#avatar img {
width:100%;
height:100%;
border-radius:100%;
}
#avatar img:hover{
-webkit-transition: all 0.7s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-ms-transform: scale(1.5, 1.5); /* IE 9 */
-webkit-transform: scale(1.5, 1.5); /* Safari */
transform: scale(1.5, 1.5);
}
<div id="avatar"><img src="https://us.123rf.com/450wm/valentint/valentint1503/valentint150302008/37824182-examples-icon-internet-button-on-colored-background.jpg?ver=6"></div>
最佳答案
更新了代码段以包含
#avatar img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
使缓出过渡有效。
#avatar {
margin: auto;
margin-top: 15px;
width: 50px;
height: 50px;
border-radius: 60px;
border:0px solid {
color: Main icon background
}
;
z-index:10;
}
#avatar img {
width: 100%;
height: 100%;
border-radius: 100%;
}
#avatar img:hover {
-webkit-transition: all 0.7s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-ms-transform: scale(1.5, 1.5);
/* IE 9 */
-webkit-transform: scale(1.5, 1.5);
/* Safari */
transform: scale(1.5, 1.5);
}
#avatar img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
<div id="avatar"><img src="https://us.123rf.com/450wm/valentint/valentint1503/valentint150302008/37824182-examples-icon-internet-button-on-colored-background.jpg?ver=6"></div>
关于html - CSS 缩放过渡缓和不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43835462/