将进酒·见千山
<style>#papa {margin: -80px 0 0 calc(50% - 593px);width: 1024px;height: 640px;background: lightgreen url('https://638183.freep.cn/638183/t23/1/qmuj.jpeg') center/cover no-repeat;box-shadow: 3px 3px 20px #000;position: relative;z-index: 1;--state: paused;}#papa::before, #papa::after {position: absolute;content: '';background: url('https://638183.freep.cn/638183/t22/gif/drink.gif') center/cover no-repeat;left: 54%; bottom: 0; width: 100px; height: 100px;}
#papa::after {transform: rotateY(-180deg) translate(100px);}
#lrc {--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6));position: absolute;left: 50%;top: 10px;transform: translate(-50%);font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));}
#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards var(--state);}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }</style>
<div id="papa">
<css-doodle id="mplayer">:doodle {@grid: 3 / 160px;cursor: pointer;position: absolute;left: calc(50% - 80px);top: 60px;animation: rot 6s infinite linear var(--state);}@place-cell: center;background: linear-gradient(45deg, green 49.5%, lightblue 50.5%, green 0);border-radius: 0 100%;transform: rotate(calc(360deg / (@size() - 1) * @i())) translate(50px);@at(1,1) {border-radius: 50%;background: radial-gradient(snow, green 60%, green 0);transform: rotate(0) translate(0);}@keyframes rot { to { transform: rotate(-1turn); } }</css-doodle>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1894342165" autoplay="autoplay" loop="loop"></audio>
<script>
(function () {
let mKey = 0, mFlag = true, script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js';
document.head.appendChild(script);
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('seeked', () => calcKey());
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, 'n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
})();
</script> 欣赏老师佳作！{:4_204:} 欣赏老师的精彩，感谢分享！{:4_187:} 黑黑这个小緑叶播放器我打开会看见一闪几行代码，然后就是播放器出来了 黑黑，我本地预览看不见緑叶播放器 小辣椒 发表于 2023-4-25 21:21
黑黑这个小緑叶播放器我打开会看见一闪几行代码，然后就是播放器出来了
刷新看看 小辣椒 发表于 2023-4-25 21:23
黑黑，我本地预览看不见緑叶播放器
这里，为了引用 css-doodle 代码，需要通过追加的方式将组件添加到页面。打开网页时，可能会先看到代码，因为，组件尚未加载完毕。本地测试也会如此，不过，如果直接俺常规方式引入组件即 JS 文档，则不会出现你所说的情况。至于本地测试不通过，应与代码错误有关，你可以在浏览器当前页面按下 F12，查看control（控制台），看看是哪里出了问题 我电脑刷新出来 而且刚才等了一下就出来的，是不是我的速度问题？ 小辣椒 发表于 2023-4-25 21:53
我电脑刷新出来
嗯，这是css-doodle组件下载在后导致的 小辣椒 发表于 2023-4-25 21:54
而且刚才等了一下就出来的，是不是我的速度问题？
有时候不一定是网速问题。浏览器缓存过多，也会导致种种意外，应定期清理 马黑黑 发表于 2023-4-25 21:54
有时候不一定是网速问题。浏览器缓存过多，也会导致种种意外，应定期清理
好的 马黑黑 发表于 2023-4-25 21:54
嗯，这是css-doodle组件下载在后导致的
这个我手机看不见 小辣椒 发表于 2023-4-25 21:57
好的
你用什么浏览器 马黑黑 发表于 2023-4-25 21:57
你用什么浏览器
现在换了QQ浏览器 小辣椒 发表于 2023-4-25 21:57
这个我手机看不见
手机看不到是浏览器问题。这个组件，使用较新的CSS属性，例如 clip-path ，老版本浏览器都支持不好，而手机默认浏览器为了节约开发成本，基本停留在老内核上。所以，我一直不主张使用手机默认的厂家推出的浏览器。 小辣椒 发表于 2023-4-25 22:00
现在换了QQ浏览器
换。 马黑黑 发表于 2023-4-25 22:01
换。
这个浏览器刚换系统的时候给我弄上去的，以前是你的百分百 小辣椒 发表于 2023-4-25 22:04
这个浏览器刚换系统的时候给我弄上去的，以前是你的百分百
百分浏览器挺好的
页:
[1]
2