用clip-path切割网易云音乐播放器的简单示例

马黑黑

网易云音乐播放器不好美化，那切割总可以的，虽然粗鲁了一点儿。这里给出两种切割法示例：圆形和椭圆切割。

网易云音乐播放器播放按钮和暂停是跳着来的，它们不在同一个位置，所以需要兼顾的东西很多，切割效果无法完美，将就着吧。下面给代码，效果我放在二楼：

<style>
/* 圆形 */
.wyyCircle {
        width: 330px;
        height: 86px;
        /* 半径 33px 圆心 {43px, 43px} */
        clip-path: circle(33px at 43px 43px);
}

/* 椭圆 */
.wyyEllipse {
        width: 330px;
        height: 86px;
        /* 半径 {33px, 28px } 圆心 {43px, 43px} */
        clip-path: ellipse(33px 28px at 43px 43px);
}
</style>

<iframe class="wyyCircle" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=29843065&auto=1&height=66"></iframe>

马黑黑

马黑黑

马黑黑

实际操作时可以试着改变一下圆心位置以达到更佳的效果

红影

想起我那个帖子里去不掉网易云的边，看到这个，我可以去修改一下了

红影

我单位的破网看不到播放器，要等到回家再看效果了

马黑黑

红影 发表于 2022-1-26 14:27
想起我那个帖子里去不掉网易云的边，看到这个，我可以去修改一下了

完全可以

马黑黑

红影 发表于 2022-1-26 14:28
我单位的破网看不到播放器，要等到回家再看效果了

不急

红影

马黑黑 发表于 2022-1-26 16:16
完全可以

这样切割后，那个按钮还在的，真不错呢

红影

马黑黑 发表于 2022-1-26 16:16
不急

也可以四周切的吧，看到这个两个都是切的弧形的。

马黑黑

红影 发表于 2022-1-26 20:43
这样切割后，那个按钮还在的，真不错呢

可用

马黑黑

红影 发表于 2022-1-26 20:43
也可以四周切的吧，看到这个两个都是切的弧形的。

集合切割有的是方法，这里只展示园和椭圆，还可以是多边形，无限多边，就看你怎么设置路径，我怕麻烦

红影

马黑黑 发表于 2022-1-26 20:57
可用

是啊，挺不错的。黑黑一天做这么多帖子，太厉害了。我就学一个式样还学得磕磕绊绊的呢

红影

马黑黑 发表于 2022-1-26 20:58
集合切割有的是方法，这里只展示园和椭圆，还可以是多边形，无限多边，就看你怎么设置路径，我怕麻烦

嗯嗯，这里是展示一个思路，思路会了就可以做那些样式了。虽然我还是不会做

马黑黑

红影 发表于 2022-1-26 21:17
是啊，挺不错的。黑黑一天做这么多帖子，太厉害了。我就学一个式样还学得磕磕绊绊的呢

也不多，很少的

红影

马黑黑 发表于 2022-1-26 21:53
也不多，很少的

你对这些太熟了，佩服

马黑黑

红影 发表于 2022-1-27 11:02
你对这些太熟了，佩服