寂静之声
<style>#papa { left: -214px; 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; }
#mplayer { position: absolute; top: 20px; left: calc(50% - 60px); display: grid; place-items: center; }
#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; }
#btnplay::before, #btnplay::after { position: absolute; width: 100%; height: 100%; content: ''; background: inherit; border-radius: inherit; transform-origin: 0 0; transform: rotate(120deg); }
#btnplay::after { transform: rotate(240deg); }
#tmsg { fill: hsla(0,20%,100%,0.55); font: normal 1em sans-serif; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<div id="mplayer">
<span id="btnplay"></span>
<svg id="msvg" width="120" height="120" shape-rendering="geometricPrecision">
<g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer;">
<circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(0,0%,90%,0.55)" />
<circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(120,30%,20%,.75)" />
</g>
<path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/>
<path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/>
<g id="tmsg">
<text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text>
<text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text>
</g>
</svg>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=27571228.mp3" autoplay loop>audio api</audio>
</div>
<script>
(function() {
let cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), len: track.getTotalLength(), };
prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('seeked', () => aud.play());
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;};
aud.addEventListener('pause', () => mState());
aud.addEventListener('play',() => mState());
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);});
let mState = () => btnplay.style.animationPlayState = aud.paused ? 'paused' : 'running';
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;};
(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);}})();
}());
</script>
本帖测试三叶草按钮。代码
<style>
#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; }
#mplayer { position: absolute; top: 20px; left: calc(50% - 60px); display: grid; place-items: center; }
#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; }
#btnplay::before, #btnplay::after { position: absolute; width: 100%; height: 100%; content: ''; background: inherit; border-radius: inherit; transform-origin: 0 0; transform: rotate(120deg); }
#btnplay::after { transform: rotate(240deg); }
#tmsg { fill: hsla(0,20%,100%,0.55); font: normal 1em sans-serif; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<div id="mplayer">
<span id="btnplay"></span>
<svg id="msvg" width="120" height="120" shape-rendering="geometricPrecision">
<g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer;">
<circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(0,0%,90%,0.55)" />
<circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(120,30%,20%,.75)" />
</g>
<path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/>
<path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/>
<g id="tmsg">
<text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text>
<text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text>
</g>
</svg>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=27571228.mp3" autoplay loop>audio api</audio>
</div>
<script>
(function() {
let cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), len: track.getTotalLength(), };
prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('seeked', () => aud.play());
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;};
aud.addEventListener('pause', () => mState());
aud.addEventListener('play',() => mState());
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);});
let mState = () => btnplay.style.animationPlayState = aud.paused ? 'paused' : 'running';
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;};
(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);}})();
}());
</script>
这个纯播放器的，里面加了小风扇{:4_199:} 三叶草我以为是小风扇{:4_189:} 小辣椒 发表于 2022-11-2 12:38
这个纯播放器的，里面加了小风扇
三叶草，什么小风扇{:4_170:} 小辣椒 发表于 2022-11-2 12:39
三叶草我以为是小风扇
我为了避免让人误会为扇叶，还特地加了随机的叶子，以此给出正确的引导暗示，你倒好，小风扇{:4_196:} 马黑黑 发表于 2022-11-2 12:41
我为了避免让人误会为扇叶，还特地加了随机的叶子，以此给出正确的引导暗示，你倒好，小风扇
哈哈~~~看见了这么多树叶 小辣椒 发表于 2022-11-2 12:43
哈哈~~~看见了这么多树叶
{:4_169:} 这个小树叶走路径的 黑黑，你好强大，这种制作真漂亮。这个效果也是可以用其他帖里面 小辣椒 发表于 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度，就形成了三叶草