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

最新推荐文章于 2023-12-12 09:38:43 发布

一颗小行星!

最新推荐文章于 2023-12-12 09:38:43 发布

阅读量6.2k

点赞数 4

分类专栏： CSS 前端开发文章标签： CSS3

本文链接：https://blog.csdn.net/w20101310/article/details/52298636

版权

前端开发同时被 2 个专栏收录

120 篇文章 2 订阅

订阅专栏

CSS

9 篇文章 0 订阅

订阅专栏

最近在做加速球(效果如上)时遇到问题,在使用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>