我需要一种方法来制作带有CSS3的缩放动画,并使用border-radius
。但正如你可以看到下面,它不能很好地工作:CSS3缩放动画带边框半径
工作代码:https://jsfiddle.net/n5owxmch/
CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
border-radius: 10px;
border: 1px solid #333;
margin: 2%;
overflow: hidden;
width: 540px;
}
.item img {
max-width: 100%;
-moz-transition: all 21s;
-webkit-transition: all 21s;
transition: all 21s;
}
.item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
HTML:
<div class="item">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s600x600/e35/17661731_634657496725091_8999479055321399296_n.jpg" alt="pepsi" width="540" height="548">
<div class="item-overlay top"></div>
</div>
有没有办法解决这个问题?
以何种方式它不能很好地工作? – LGSon
你的例子对我很好,什么工作不好? –
@LGSon在动画过程中,边框不像上图和jsFiddle中所示的那样是圆形的。 – xRobot