小辣椒 发表于 2023-1-26 14:24

太湖纯--古筝（学习黑黑山鬼效果制作）

<style>
#papa { margin: 120px 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: gray url('https://pan.365.tf/uploads/lxx/20230222/thc.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; position: relative; z-index: 1; }
</style>

<div id="papa"></div>
<audio id="aud" src="https://pan.365.tf/uploads/lxx/20230222/thc.mp3" loop autoplay></audio>

<script >
(function() {
        (function(mkPlayer) {let defaults = { player_css: 'bottom: 20px; left: calc(50% - var(--ww) / 2);', playerCode: `<style>#mplayer {position: absolute;display: flex;align-items: center;gap: 6px;opacity: 0;transition: opacity .75s;--ww: 40px;--state: paused;--bg: black;--border: snow;}#btnplay {background: conic-gradient(red,orange,yellow,green,teal,blue,purple);mask: radial-gradient(transparent 3px,red 0);-webkit-mask: radial-gradient(transparent 3px,red 0);border-radius: 50%;width: var(--ww);height: var(--ww);cursor: pointer;animation: rot linear 3s infinite;animation-play-state: var(--state);}#btnMsg { color: var(--border); background: var(--bg); border: 2px solid var(--border); border-radius: 8px; font: normal 15px sans-serif; padding: 3px; cursor: pointer; }@keyframes rot { to { transform: rotate(1turn); } }</style><div id="mplayer"><span id="btnplay"></span><span id="btnMsg">全屏观赏</span></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);let timerId, fs = false;papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => aud.play());let mState = () => btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');btnMsg.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();papa.onmousemove = (e) => {clearTimeout(timerId);mplayer.style.opacity = '.95';timerId = setTimeout('mplayer.style.opacity = "0"', 3000);};document.addEventListener("fullscreenchange", () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkPlayer.HCPlayer = playCode;})(this);
        HCPlayer({
                player_css: 'left: 850px; bottom: 20px; --ww: 45px; --bg: green; border: --snow;',
        });
})();

</script>
<br><br>

小辣椒 发表于 2023-1-26 14:25

按黑黑教程，移动了一下播放器位子left: 850px

小辣椒 发表于 2023-1-26 14:26

也是为了学习，稍微修改一下看看效果
bottom: 20px; --ww: 45px;

小辣椒 发表于 2023-1-26 14:27

感谢黑黑的教程分享，小辣椒套一个@马黑黑

雨中悄然 发表于 2023-1-26 14:31

清新大自然风，看起来好舒服的贴子。

雨中悄然 发表于 2023-1-26 14:31

试了一下，播放器看不到，鼠标移动扫到后才看到{:4_204:}

小辣椒 发表于 2023-1-26 14:33

雨中悄然 发表于 2023-1-26 14:31
试了一下，播放器看不到，鼠标移动扫到后才看到

是的，播放器位子移动了一下

雨中悄然 发表于 2023-1-26 14:35

小辣椒 发表于 2023-1-26 14:33
是的，播放器位子移动了一下

你是真的厉害。连播也好，单播也好，播放器随便放啊。

雨中悄然 发表于 2023-1-26 14:35

听的贴子我也想移播放器，结果没成。只能原模原样抄了下来{:5_117:}等等还得研究研究

小辣椒 发表于 2023-1-26 14:41

雨中悄然 发表于 2023-1-26 14:31
清新大自然风，看起来好舒服的贴子。

谢谢悄然欣赏{:4_187:}

小辣椒 发表于 2023-1-26 14:42

雨中悄然 发表于 2023-1-26 14:35
你是真的厉害。连播也好，单播也好，播放器随便放啊。

这个黑黑前面都教了的，我也是学习了的

小辣椒 发表于 2023-1-26 14:42

雨中悄然 发表于 2023-1-26 14:35
听的贴子我也想移播放器，结果没成。只能原模原样抄了下来等等还得研究研究

在黑黑帖里面有注明的，你仔细看看

庶民来了 发表于 2023-1-26 15:34

这个也蛮好的，大自然的舒展。

马黑黑 发表于 2023-1-26 16:03

小辣椒 发表于 2023-1-26 14:25
按黑黑教程，移动了一下播放器位子left: 850px

移到右边，可以考虑用 right。比如:

right: 20x;

这样，不论是否全屏，都在右边。

红影 发表于 2023-1-26 16:05

这么多动态效果，很清新的效果，亲爱的真棒{:4_199:}

梦缘 发表于 2023-1-26 16:11

好有意境的音乐，欣赏点赞！{:4_179:}

雨中悄然 发表于 2023-1-26 16:35

小辣椒 发表于 2023-1-26 14:42
这个黑黑前面都教了的，我也是学习了的

{:4_173:}看来我得补课

梦油 发表于 2023-1-26 16:42

还有布谷鸟叫声呐，真好听。

千羽 发表于 2023-1-27 21:19

小辣椒的学习帖做的真好，赏心悦目，看点多多{:4_187:}

千羽 发表于 2023-1-27 21:21

动图加的好，是点睛的一笔，{:4_185:}
页: [1] 2
查看完整版本: 太湖纯--古筝（学习黑黑山鬼效果制作）