猫的舞步

马黑黑

马黑黑

忙，没时间选图，旧图复用。帖子代码：

1. <style>
   
2. #mydiv {
   
3.         width: 1024px;
   
4.         height: 640px;
   
5.         background: #ccc url('https://638183.freep.cn/638183/t23/1/r3.jpg') no-repeat center / cover;
   
6.         box-shadow: 0 0 6px #000;
   
7.         pointer-events: none;
   
8.         z-index: 1;
   
9.         position: relative;
   
10.         margin: 30px auto;
    
11.         --clip: ''; --state: paused;
    
12. }
    
13. #mydiv::before, #mydiv::after {
    
14.         position: absolute;
    
15.         content: '';
    
16.         width: 200px;
    
17.         height: 200px;
    
18.         left: 180px;
    
19.         bottom: 50px;
    
20.         border-radius: 50%;
    
21.         pointer-events: auto;
    
22.         cursor: pointer;
    
23.         opacity: .75;
    
24. }
    
25. #mydiv::after {
    
26.         background: #FEFEFE;
    
27.         clip-path: var(--clip);
    
28.         animation: scale 6s infinite alternate linear var(--state);
    
29. }
    
30. #mydiv::before {
    
31.         background: url('https://638183.freep.cn/638183/t23/2/cat1b.gif') no-repeat center /cover;
    
32.         filter: hue-rotate(145deg);
    
33. }
    
34. @keyframes scale {
    
35.         0% { transform: rotate(0deg) scale(1); }
    
36.         50% { transform: rotate(360deg) scale(.8); }
    
37.         100% { transform: rotate(-360deg) scale(1); }
    
38. }
    
39. 
    
40. </style>
    
41. 
    
42. <div id="mydiv"></div>
    
43. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=523902194" autoplay="autoplay" loop="loop"></audio>
    
44. 
    
45. <script>
    
46. (function() {
    
47.         let clipBox = (xx,points,thick) => {
    
48.                 let a = xx / 2, pointsAr = [`${xx}px 0, 0 0, 0 ${xx}px, ${xx}px ${xx}px, ${xx}px ${xx/2}px`];
    
49.                 for(let i = 0; i <= points; i ++) {
    
50.                         let hudu = Math.PI / 180 * 360 / points * i;
    
51.                         let x1 = a + Math.cos(hudu) * (a - thick), y1 = a + Math.sin(hudu) * (a - thick);
    
52.                         pointsAr.push(x1 + 'px ' + y1 + 'px');
    
53.                 }
    
54.                 pointsAr.push(`${xx}px ${xx/2}px`, `${xx}px 0px`);
    
55.                 return `polygon(${pointsAr.join(',')})`;
    
56.         };
    
57. 
    
58.         mydiv.style.setProperty('--clip',clipBox(200,6,2));
    
59. 
    
60.         let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
61.         aud.addEventListener('play', mState, false);
    
62.         aud.addEventListener('pause', mState, false);
    
63. 
    
64.         mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
    
65. })();
    
66. </script>

复制代码

马黑黑

这是HTML单标签帖子。
帖子使用两个伪元素做播放控制器，尺寸、位置、边框属性一致；内容和其他一些属性则不同：伪元素 ::before 有背景图片，::after 则裁剪成内镂空、并执行关键帧动画。

梦缘

问好老师，欣赏精彩佳作，谢谢分享，点赞！

红影

这个厉害了，直接在JS里设计路径，想要多大就多大，想要几边形就几边形，太好了

红影

马黑黑 发表于 2023-6-19 11:58
这是HTML单标签帖子。
帖子使用两个伪元素做播放控制器，尺寸、位置、边框属性一致；内容和其他一些属性则 ...

这个很奇妙，伪元素 ::before 也是镂空并有动作，加的背景图却不转的也不放大。

红影

@keyframes scale 这个的变化没看懂，怎么好像变化的是镂空的厚度。

樵歌

来加分分

梦油

这个播放器设计得真有趣，听到这首乐曲，仿佛看到了猫的舞步。

南无月

马黑黑 发表于 2023-6-19 11:58
这是HTML单标签帖子。
帖子使用两个伪元素做播放控制器，尺寸、位置、边框属性一致；内容和其他一些属性则 ...

伪元素还挺厉害，啥都能解决的样子。。。

南无月

这个JS是新鲜的~~跟以住的又不一样了。。。。

马黑黑

南无月 发表于 2023-6-19 18:06
这个JS是新鲜的~~跟以住的又不一样了。。。。

控制音乐的部分是一样的。加两个自定义函数，用于裁剪。

马黑黑

南无月 发表于 2023-6-19 18:06
伪元素还挺厉害，啥都能解决的样子。。。

不是啥都能解决。物尽其用。

马黑黑

梦油 发表于 2023-6-19 17:12
这个播放器设计得真有趣，听到这首乐曲，仿佛看到了猫的舞步。

马黑黑

樵歌 发表于 2023-6-19 16:00
来加分分

谢分

马黑黑

梦缘 发表于 2023-6-19 12:38
问好老师，欣赏精彩佳作，谢谢分享，点赞！

下午好

马黑黑

红影 发表于 2023-6-19 14:50
@keyframes scale 这个的变化没看懂，怎么好像变化的是镂空的厚度。

关键帧动画，用了transform的两个方法，一是 scale，将元素变小或变大，二是 rotate，这个不用解释。

一个元素，用 scale 将其变大变小是，是按比例放大或缩小的

马黑黑

红影 发表于 2023-6-19 14:44
这个很奇妙，伪元素 ::before 也是镂空并有动作，加的背景图却不转的也不放大。

镂空伪元素仅一个

马黑黑

红影 发表于 2023-6-19 14:26
这个厉害了，直接在JS里设计路径，想要多大就多大，想要几边形就几边形，太好了

这个新改的自定义函数可以收藏起来备用

南无月

马黑黑 发表于 2023-6-19 18:08
控制音乐的部分是一样的。加两个自定义函数，用于裁剪。

控制音乐的那部分我知道，就是新加的陌生的紧