马黑黑 发表于 2022-1-26 11:59

用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 11:59

<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 12:00

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

马黑黑 发表于 2022-1-26 12:08

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

红影 发表于 2022-1-26 14:27

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

红影 发表于 2022-1-26 14:28

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

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

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

完全可以

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

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

不急

红影 发表于 2022-1-26 20:43

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

这样切割后，那个按钮还在的，真不错呢{:4_187:}

红影 发表于 2022-1-26 20:43

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

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

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

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

可用

马黑黑 发表于 2022-1-26 20:58

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

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

红影 发表于 2022-1-26 21:17

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

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

红影 发表于 2022-1-26 21:19

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

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

马黑黑 发表于 2022-1-26 21:53

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

也不多，很少的

红影 发表于 2022-1-27 11:02

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

你对这些太熟了，佩服{:4_187:}

马黑黑 发表于 2022-1-27 11:23

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

{:4_206:}
页: [1]
查看完整版本: 用clip-path切割网易云音乐播放器的简单示例