如何解决Windows 10 桌面 Chrome 芯片路径缩放变换鬼线出现
我想仅通过 css 创建一个动画饼图,并在悬停时放大扇区, 我在网上找到了一个完全符合我要求的示例代码。 但是我发现在Windows 10、Chrome浏览器(Edge也有,不过firefox完美),在做扇区动画时会出现鬼线,macos的chrome没有问题。
知道为什么会这样吗?以及如何解决这个问题?
代码:
HTML:
<div id="skills">
<div id="part1" class="circle animate"></div>
<div id="part2" class="circle animate"></div>
<div id="part3" class="circle animate"></div>
<div id="part4" class="circle animate"></div>
<div id="part5" class="circle animate"></div>
<div id="part6" class="circle animate"></div>
</div>
CSS:
#skills {
position: relative;
width: 300px;
height: 300px;
margin: 30px auto;
}
.circle {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
}
.animate {
-webkit-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
-moz-transition: 0.2s cubic-bezier(.74,1.2);
-o-transition: 0.2s cubic-bezier(.74,1.2);
transition: 0.2s cubic-bezier(.74,1.2);
}
.animate:hover {
transform: scale(1.1);
transform-origin: center center;
}
#part1 {
background-color: #E64C65;
-webkit-clip-path: polygon(50% 0,50% 50%,100% 41.2%,100% 0);
clip-path: polygon(50% 0,100% 0);
}
#part2 {
background-color: #11A8AB;
-webkit-clip-path: polygon(50% 50%,100% 100%,63.4% 100%);
clip-path: polygon(50% 50%,63.4% 100%);
}
#part3 {
background-color: #4FC4F6;
-webkit-clip-path: polygon(50% 50%,36.6% 100%,63.4% 100%);
}
#part4 {
background-color: #FFED0D;
-webkit-clip-path: polygon(50% 50%,0 100%,36.6% 100%);
clip-path: polygon(50% 50%,36.6% 100%);
}
#part5 {
background-color: #F46FDA;
-webkit-clip-path: polygon(50% 50%,0 36.6%,0 100%);
clip-path: polygon(50% 50%,0 100%);
}
#part6 {
background-color: #15BFCC;
-webkit-clip-path: polygon(50% 50%,0 0,50% 0);
clip-path: polygon(50% 50%,50% 0);
}
这是我创立的在线资源, https://codepen.io/Garnel/pen/eNLaWj
视频: https://www.youtube.com/watch?v=eztSWXiIHLY
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。