最新消息:专注互联网,专注前端,多分享,多学习!

transform导致的border-radius失效问题

html

在写一个移动端的类似进度条的动画时遇到了一个问题,父元素设置了border-radius属性,然后overflow:hidden,子元素最初没有问题,但是加上了一个animate动画后,原先边界处圆角应该隐藏的地方溢了出来,最开始以为是position定位的问题,但是改用了margin方式定位还是不行,后来发现可能是由于transform的问题,在父元素上加上一行-webkit-transform:rotate(0deg);即解决了,附上代码

<div class="div-1">  
    <div class="div-1-box">  
        <div class="div-1-animate animate-move"></div>  
    </div><!--div-1-box-->  
</div><!--div-1-->
.div-1{width:70%; height:2rem; margin-top:35%; margin-left:15%; background-color:#3a1c98; border-radius:30px; position:relative; box-shadow:0 0 10px 3px #a376d4;}  
.div-1 .div-1-box{width:60%; height:100%; border-radius:30px; overflow:hidden; -webkit-transform:rotate(0deg);}  
.div-1 .div-1-box .div-1-animate{width:400%; height:100%; margin-left:-300%; background:url(../images/img_08.png) repeat-x 0 0; background-size:auto 100%;}  
.animate-move{  
    animation:move 4s linear infinite both;  
    -webkit-animation:move 4s linear infinite both;  
}  
@keyframes move{  
    from{}  
    to{transform:translateX(75%);}  
}  
@-webkit-keyframes move{  
    from{}  
    to{-webkit-transform:translateX(75%); transform:translateX(75%);}  
}

转载请注明:圆点网 » transform导致的border-radius失效问题

与本文相关文章