border-radius遇到transform,overflow:hidden失效



最近在做加速球(效果如上)时遇到问题,在使用border-radius样式元素的子元素使用transform,overflow会失效.效果如下:
网络上查找的解决方案多为 mask-image, 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加速器</title>
    <style type="text/css">
        body,html{
            height: 100%;
            margin: 100px
        }
        @-webkit-keyframes wave {
           from {
                -webkit-transform: rotateZ(0deg) ;
                transform: rotateZ(0deg);
            }
            to {
                -webkit-transform: rotateZ(360deg);
                transform: rotateZ(360deg);
            }
        }

        @keyframes wave {
            from {
                -webkit-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
            }
            to {
                -webkit-transform: rotateZ(360deg);
                transform: rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
<div>
    <div style="display:inline-block;width:300px;height:300px;border-radius:50%;overflow:hidden;background-color:rgba(255,0,0,0.2);-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); ">
            <div style="width:600px;height:600px;border-radius:40%;background-color:red;position:relative;top:45%;left:-50%;-webkit-animation:wave 5s linear infinite;z-index:66"></div>        
        </div>         
    </div>
</div>
</body>
</html>
查阅资料后找到另一种方法  transform-style:preserve-3d 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加速器</title>
    <style type="text/css">
        body,html{
            height: 100%;
            margin: 100px
        }
        @-webkit-keyframes wave {
           from {
                -webkit-transform: rotateZ(0deg) ;
                transform: rotateZ(0deg);
            }
            to {
                -webkit-transform: rotateZ(360deg);
                transform: rotateZ(360deg);
            }
        }

        @keyframes wave {
            from {
                -webkit-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
            }
            to {
                -webkit-transform: rotateZ(360deg);
                transform: rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
<div> 
    <div style="display:inline-block;width:300px;height:300px;border-radius:50%;overflow:hidden;background-color:rgba(255,0,0,0.2);transform-style:preserve-3d">
            <div style="width:600px;height:600px;border-radius:40%;background-color:red;position:relative;top:45%;left:-50%;-webkit-animation:wave 5s linear infinite;z-index:66"></div>        
        </div>         
    </div>
</div>
</body>
</html>


posted @ 2022-04-09 21:15  一颗小行星-  阅读(173)  评论(0)    收藏  举报