transform导致的border-radius失效

2024年3月31日 197次阅读 来源: Guoye

在写一个移动端的类似进度条的动画时遇到了一个问题，父元素设置了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-->

<style>
    .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%);}  
    }
</style>
    原文作者：Guoye
    原文地址: https://segmentfault.com/a/1190000018892328
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞