巫娜 - 竹间语

马黑黑

马黑黑

帖子代码：

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/css/yslrc.css';
   
3.         #tz { --ox: 81px; --lrc-top: calc(100% - 80px); --lrc-bg: radial-gradient(cyan, white, orange) center/120px 60px; width: 1080px; height: 655px; background: url('https://638183.freep.cn/638183/t24/3/vjy.jpeg') no-repeat center/cover; margin: 30px 0; }
   
4.         #player { position: absolute; left: calc(50% - 110px); bottom: 20px; width: 45px; height: 45px; border-radius: 50%; border: thick groove; border-color: cyan orange yellow green; display: grid; place-items: center; transition: .8s; --opt: 1; }
   
5. #player::before, #player::after { position: absolute; content: '';  width: 20px; height: 20px; background: orange; transition: .3s; cursor: pointer; }
   
6.         #player::before { clip-path: polygon(0 0, 0 100%, 100% 50%); opacity: calc(var(--opt) * 1); background: cyan; }
   
7.         #player::after { mask: linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0); -webkit-mask: linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0); opacity: calc(1 - var(--opt)); }
   
8.         #player:hover { transform: scale(1.1); filter: invert(.3) drop-shadow(0 0 20px black); }
   
9.         .vid { height: calc(100% + 60px); }
   
10. </style>
    
11. 
    
12. <div id="tz" class="tz" data-lrc="竹间语">
    
13.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=35023486" autoplay loop></audio>
    
14.         <video id="vid" class="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/32/5b3f53c677460.mp4" autoplay loop muted></video>
    
15.         <div id="player"></div>
    
16. </div>
    
17. 
    
18. <script>
    
19. var mState = () => {
    
20.         player.style.setProperty('--opt', +aud.paused);
    
21.         player.title = ['暂停','播放'][+aud.paused];
    
22.         aud.paused ? vid.pause() : vid.play();
    
23. };
    
24. aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
    
25. player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
26. </script>

复制代码

本帖：

① 使用 yslrc.css 部分设置，很大程度上简化一些设计与操作；

② h5新小播 - 新颖的多彩色圈按钮（了解详情可参阅 h5播放器按钮：clip-path+mask+多彩边框 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)）

红影

太好了，这个彩色小播直接就做成帖子了，很赞

红影

简洁又漂亮，和彩色歌词相配，很有特色

南无月

看到有新贴，封了CSS的，我来瞧瞧说明。。

马黑黑

南无月 发表于 2024-6-23 09:35
看到有新贴，封了CSS的，我来瞧瞧说明。。

马黑黑

红影 发表于 2024-6-23 09:29
太好了，这个彩色小播直接就做成帖子了，很赞

马黑黑

红影 发表于 2024-6-23 09:30
简洁又漂亮，和彩色歌词相配，很有特色

这个没有歌词，纯音乐

南无月

这个代码小播精致小巧，简洁大方，好俊俏。。。
整贴绿意盎然，白色粒子如梦似幻，飞舞竹林之间。。
意境超美。。

大清早看到老师这样清新灵动的贴子，真是心情愉悦。。

马黑黑

醉美水芙蓉 发表于 2024-6-23 10:56
欣赏老师带来的精美播放器！

南无月

马黑黑 发表于 2024-6-23 10:06

保质期内的小咖来一杯

马黑黑

南无月 发表于 2024-6-23 12:23
保质期内的小咖来一杯

好哒

小辣椒

这个歌词颜色和小播颜色相配的，黑黑好思路，赞的

小辣椒

现在黑黑是没有做不到，只有想不到了

小辣椒

这纯音还蛮好听的，和背景图图特别吻合

南无月

马黑黑 发表于 2024-6-23 13:31
好哒

午休醒来有这么一杯就很惬意

马黑黑

南无月 发表于 2024-6-23 15:47
午休醒来有这么一杯就很惬意

美滋滋

马黑黑

小辣椒 发表于 2024-6-23 14:51
这纯音还蛮好听的，和背景图图特别吻合

小辣椒下午嚎

马黑黑

小辣椒 发表于 2024-6-23 14:49
现在黑黑是没有做不到，只有想不到了

夸张了