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