皈依 （学习黑黑光盘加细线效果）
<style>#papa {
margin: 120px 0 0 calc(50% - 681px);
width: 1200px;
height: 600px;
display: grid;
place-items: center;
user-select: none;
background: #666 url('https://pic.imgdb.cn/item/637f87bb16f2c2beb15c8478.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#pic {
position: absolute;
left: 340px;
bottom: 120px;
width: 180px;
height: 180px;
}
#pic1{ position: absolute; width: 1000px; height: 400px; top: 0px; left: 100px; }
</style>
<div id="papa">
<img id="pic" src="https://pic.imgdb.cn/item/637f883016f2c2beb15dc9ef.gif" alt="" />
<img id="pic1" src="https://pan.365.tf/uploads/lxx/20221118/dd.gif" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29538095.mp3" loop autoplay></audio>
<script>
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',playerCode: `<style>#mplayer {--ww: 360px;--color: snow;--track: #eee;--prog: red;position: absolute;width: var(--ww);height: 60px;font: normal 14px sans-serif;color: var(--color);z-index: 999;}#mplayer::before, #mplayer::after {position: absolute;width: 100%;height: 50%;margin: 15px 0;}#mplayer::before {content: attr(data-cur);}#mplayer::after {content: attr(data-dur);text-align: right;}#btnplay {--state: paused;position: absolute;left: calc(50% - 15px);width: 30px;height: 30px;border-radius: 50%;background: conic-gradient(red, magenta, blue, aqua, lime, yellow, red);cursor: pointer;z-index: 1001;animation: rot linear 4s infinite;animation-play-state: var(--state);}#prog {--posX: 0px;position: absolute;bottom: 10px;width: 100%;height: 1px;background: var(--track);cursor: pointer;}#prog::before,#prog::after {position: absolute;content: '';left: 0;}#prog::before {width: var(--posX);height: 1px;background: var(--prog);}#prog::after {left: var(--posX);top: calc(50% - 5px);width: 3px;height: 10px;background: var(--color);}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6), hsla(0, 100%, 50%, .75));position: absolute;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));z-index: 1000;}#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;animation-play-state: var(--state);}@keyframes cover1 { from { width: 0; } to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }@keyframes rot { to { transform: rotate(1turn); } }</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer" data-cur="00:00" data-dur="00:00"><span id="btnplay"></span><span id="prog"></span></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();mplayer.onmousemove = (e) => { mplayer.style.cursor = e.offsetY > mplayer.offsetHeight / 1.5 ? 'pointer' : 'default' };mplayer.onclick =(e) => { if(e.offsetY > mplayer.offsetHeight / 1.5) aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth; };aud.addEventListener('timeupdate', () => {prog.style.setProperty('--posX', prog.offsetWidth * aud.currentTime / aud.duration + 'px');mplayer.dataset.cur = toMin(aud.currentTime);mplayer.dataset.dur = toMin(aud.duration);for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--state', 'running'));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');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};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;}};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
HCPlayer({
lrcAr: lrcAr,
lrc_css: `top: 50px; left: 260px; --bg:linear-gradient(180deg, hsla(0, 0%, 85%, .45), hsla(0, 0%, 75%, .6), hsla(0, 0%, 65%, .75)); color: hsl(0,0%,70%); `,
player_css: `left: 300px; bottom: 40px; --color: hsla(0,0%,48%,.92); --ww: 260px; --track: hsla(0,0%,50%,.95); --prog: color: hsl(234,40%,50%) `,
});
})();
</script> 测试了一下光盘加细线的效果，没看出来什么地方有问题啊@马黑黑{:4_204:} 借用了不语回帖里的小和尚，觉得这个动图特别好玩。谢谢不语@闲言不语{:4_173:} 本来想弄个月亮效果，黑黑说要测试一下这个，那就用这个吧，反正每个都应该学习的{:4_173:} 呀，这么晚了呢，撤~~{:4_193:} 细线进度条配上这个简笔画，各元素浑然天成。红影好设计。 红影 发表于 2022-11-25 00:08
测试了一下光盘加细线的效果，没看出来什么地方有问题啊@马黑黑
现在才知道是醉美水芙蓉的需求是什么 欣赏精美音画佳作！ 醉美水芙蓉 发表于 2022-11-25 07:01
欣赏红影美女佳作！
这个就是用14号做的，不知水芙蓉说的问题是？我没看出来啊{:4_173:} 马黑黑 发表于 2022-11-25 07:25
细线进度条配上这个简笔画，各元素浑然天成。红影好设计。
想起你也做过一个素色元素的帖子呢，其实素色也挺好。
那个佛手应该再淡点才好，光顾着调大小了{:4_173:} 马黑黑 发表于 2022-11-25 07:26
现在才知道是醉美水芙蓉的需求是什么
哦，是什么？我到现在都没明白{:4_173:} 相约爱晚亭 发表于 2022-11-25 08:09
欣赏精美音画佳作！
多谢爱晚亭鼓励，下午好{:4_187:} 红影 发表于 2022-11-25 12:49
想起你也做过一个素色元素的帖子呢，其实素色也挺好。
那个佛手应该再淡点才好，光顾着调大小了{:4_173: ...
可以了的 红影 发表于 2022-11-25 12:50
哦，是什么？我到现在都没明白
{:5_105:} 亲爱的，这个是几号封装播放器？ 好有趣的帖，欣赏老师的精彩！{:4_178:} 红影 发表于 2022-11-25 12:48
这个就是用14号做的，不知水芙蓉说的问题是？我没看出来啊
这个是14好封装播放器？ 红影 发表于 2022-11-25 00:10
借用了不语回帖里的小和尚，觉得这个动图特别好玩。谢谢不语@闲言不语
俺那小和尚是对外出租的，每日300银子，长期租赁可以优惠，微信私聊{:4_189:} 马黑黑 发表于 2022-11-25 13:14
可以了的
做在图里的，我也懒得再改了{:4_173:}
页:
[1]
2