寂静之声

马黑黑

马黑黑

本帖测试三叶草按钮。代码

1. <style>
   
2. #papa { margin: auto; width: 1024px; height: 806px; background: gray url('https://638183.freep.cn/638183/t22/webp/jjvu.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
   
3. #mplayer { position: absolute; top: 20px; left: calc(50% - 60px); display: grid; place-items: center; }
   
4. #btnplay { position: absolute; width: 40px; height: 20px; left: 50%; top: 50%; background: hsla(120,30%,80%,.6); border-radius: 0 100%; transform-origin: 0 0; cursor: pointer; animation: rot linear 4s infinite; animation-play-state: paused; }
   
5. #btnplay::before, #btnplay::after { position: absolute; width: 100%; height: 100%; content: ''; background: inherit; border-radius: inherit; transform-origin: 0 0; transform: rotate(120deg); }
   
6. #btnplay::after { transform: rotate(240deg); }
   
7. #tmsg { fill: hsla(0,20%,100%,0.55); font: normal 1em sans-serif; }
   
8. @keyframes rot { to { transform: rotate(1turn); } }
   
9. </style>
   
10. 
    
11. <div id="papa">
    
12.         <div id="mplayer">
    
13.                 <span id="btnplay"></span>
    
14.                 <svg id="msvg" width="120" height="120" shape-rendering="geometricPrecision">
    
15.                         <g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer;">
    
16.                                 <circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(0,0%,90%,0.55)" />
    
17.                                 <circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(120,30%,20%,.75)" />
    
18.                         </g>
    
19.                         <path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/>
    
20.                         <path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/>
    
21.                         <g id="tmsg">
    
22.                                 <text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text>
    
23.                                 <text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text>
    
24.                         </g>
    
25.                 </svg>
    
26.         </div>
    
27.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27571228.mp3" autoplay loop>audio api</audio>
    
28. </div>
    
29. 
    
30. <script>
    
31. (function() {
    
32.         let cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), len: track.getTotalLength(), };
    
33.         prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;
    
34.         btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
    
35.         aud.addEventListener('seeked', () => aud.play());
    
36.         mama.onclick = (e) => {let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * deg / 360;};
    
37.         aud.addEventListener('pause', () => mState());
    
38.         aud.addEventListener('play',() => mState());
    
39.         aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration + 'px';curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = toMin(aud.duration);});
    
40.         let mState = () => btnplay.style.animationPlayState = aud.paused ? 'paused' : 'running';
    
41.         let toMin = (val)  => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;};
    
42.         (function() {for(j=0; j<30; j++) {let leaf = document.createElement('span');leaf.style.cssText = `position: absolute;width: 40px;height: 20px;background: hsla(0,0%,100%,.25) linear-gradient(135deg,hsla(120,100%,50%,.35),hsla(60,100%,50%,.45));border-radius: 0 100%;transform: rotate(${Math.random() * 360}deg);left: ${Math.random() * 960}px;top: ${Math.random() * 700}px;`;papa.appendChild(leaf);}})();
    
43. }());
    
44. </script>

复制代码

小辣椒

这个纯播放器的，里面加了小风扇

小辣椒

三叶草我以为是小风扇

马黑黑

小辣椒 发表于 2022-11-2 12:38
这个纯播放器的，里面加了小风扇

三叶草，什么小风扇

马黑黑

小辣椒 发表于 2022-11-2 12:39
三叶草我以为是小风扇

我为了避免让人误会为扇叶，还特地加了随机的叶子，以此给出正确的引导暗示，你倒好，小风扇

小辣椒

马黑黑 发表于 2022-11-2 12:41
我为了避免让人误会为扇叶，还特地加了随机的叶子，以此给出正确的引导暗示，你倒好，小风扇

哈哈~~~看见了这么多树叶

马黑黑

小辣椒 发表于 2022-11-2 12:43
哈哈~~~看见了这么多树叶

小辣椒

这个小树叶走路径的

小辣椒

黑黑，你好强大，这种制作真漂亮。这个效果也是可以用其他帖里面

马黑黑

小辣椒 发表于 2022-11-2 12:45
这个小树叶走路径的

没有，静态的

马黑黑

小辣椒 发表于 2022-11-2 12:46
黑黑，你好强大，这种制作真漂亮。这个效果也是可以用其他帖里面

应该可以吧

小辣椒

马黑黑 发表于 2022-11-2 12:46
没有，静态的

静态可以这个效果？

小辣椒

和播放器转动按钮一样

马黑黑

小辣椒 发表于 2022-11-2 12:47
静态可以这个效果？

当然。每次打开帖子，叶子的分布都会不同，但在帖子里面，叶子是静态的。

马黑黑

小辣椒 发表于 2022-11-2 12:47
和播放器转动按钮一样

两种叶子各自制作：

按钮的三叶草，在CSS里完成；随机分布的叶子，在JS里设定，最后一行。

小辣椒

马黑黑 发表于 2022-11-2 12:48
当然。每次打开帖子，叶子的分布都会不同，但在帖子里面，叶子是静态的。

哦，晚上再欣赏了

小辣椒

马黑黑 发表于 2022-11-2 12:50
两种叶子各自制作：

按钮的三叶草，在CSS里完成；随机分布的叶子，在JS里设定，最后一行。

还是有点复杂的，叶子还得二次

马黑黑

小辣椒 发表于 2022-11-2 12:47
和播放器转动按钮一样

随机分布的叶子（全部由JS制作）：

(function() {
        for (j = 0; j < 30; j++) {
                let leaf = document.createElement('span');
                leaf.style.cssText = `
                        position: absolute;
                        width: 40px;
                        height: 20px;
                        background: hsla(0,0%,100%,.25) linear-gradient(135deg,hsla(120,100%,50%,.35),hsla(60,100%,50%,.45));
                        border-radius: 0 100%;
                        transform: rotate(${Math.random() * 360}deg);
                        left: ${Math.random() * 960}px;
                        top: ${Math.random() * 700}px;
                `;
                papa.appendChild(leaf);
        }
})();

马黑黑

小辣椒 发表于 2022-11-2 12:53
还是有点复杂的，叶子还得二次

播放按钮的叶子，一拖二，一个元素带两个伪元素，两个伪元素依次扭转120度、240度，就形成了三叶草