浪漫夕阳（学习马老师《可配置颜色进度条+频谱播放器》作业）
本帖最后由 寒冬残荷 于 2022-11-23 13:56 编辑 <br /><br /><style>#papa {left: calc(50% - 81px);transform: translateX(-50%);width: 1200px;height: 750px; background: #666 url('https://pic.imgdb.cn/item/637d832f16f2c2beb1796011.jpg') no-repeat center/cover;box-shadow:3px 3px 20px #000;display: grid;place-items: center;position: relative;}
#mpic {position:absolute;top: 0px;left:0px;width: 1200px;height: 750px;animation: fly 100s linear infinite; cursor:pointer; opacity:1; }
@keyframes fly {from {background-position: 0 0; }to {background-position: 100px 1600px;}}
#mpicc {position:absolute; top:0px; left:0px; width:1200px; height:6px; animation:tot 80s linear infinite; cursor:pointer; opacity:1; }
@keyframes tot {from {background-position:0 0; }to {background-position: -1600px 300px;}}
/* (black 65%, transparent 70%);*/
</style>
<div id="papa">
<div style="position:relative;width:1100px;height:650px; overflow:hidden; border-radius:50%; margin: 0px; -webkit-mask-image: radial-gradient(black 70%, transparent 75%); -webkit-mask-size:cover;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" x="0" y="0" xmlns:xml="http://www.w3.org/XML/1998/namespace" space="preserve" xlink="http://www.w3.org/1999/xlink" version="1.1" style="border:1px #FF4A20 solid; " width="1280" height="720">
<image xlink:href="https://z3.ax1x.com/2021/09/04/hRSXy4.jpg" opacity="1" width="1600" height="900" x="-160" y="-90" >
<set attributename="opacity" to="1" begin="0s;f1.begin" ></set>
<animateTransform id="f1" attributeName="transform" type="scale" from="1" to="0.8" begin="0s; l3.end" dur="7s" fill="freeze" style="transform-origin:center" />
<animateTransform id="l1" attributeName="transform" type="scale" from="0.8" to="1" begin="f1.begin+9" dur="7s" fill="freeze" style="transform-origin:center" />
<set attributename="opacity" to="0" begin="l1.end"></set>
</image>
<image xlink:href="https://desk-fd.zol-img.com.cn/t_s1600x900c5/g5/M00/0F/0B/ChMkJlb-QBuIcZQhAAbpSTlojuoAAO9XgK3rD8ABulh078.jpg" opacity="0" width="1600" height="900" x="-160" y="-90" >
<set attributename="opacity" to="1" begin="f2.begin" ></set>
<animateTransform id="f2" attributeName="transform" type="scale" from="1" to="0.8" begin="l1.end" dur="7s" fill="freeze" style="transform-origin:center" />
<animateTransform id="l2" attributeName="transform" type="scale" from="0.8" to="1" begin="f2.begin+9" dur="7s" fill="freeze" style="transform-origin:center" />
<set attributename="opacity" to="0" begin="l2.end"></set>
</image>
<image xlink:href="https://desk-fd.zol-img.com.cn/t_s1600x900c5/g5/M00/02/00/ChMkJ1bKxCCIMSvuAAx_x_i27dkAALHBwH34mkADH_f063.jpg" opacity="0" width="1600" height="900" x="-160" y="-90" >
<set attributename="opacity" to="1" begin="f3.begin" ></set>
<animateTransform id="f3" attributeName="transform" type="scale" from="1" to="0.8" begin="l2.end" dur="7s" fill="freeze" style="transform-origin:center" />
<animateTransform id="l3" attributeName="transform" type="scale" from="0.8" to="1" begin="f3.begin+9" dur="7s" fill="freeze" style="transform-origin:center" />
<set attributename="opacity" to="0" begin="l3.end"></set>
</image>
</svg>
</div>
<img id="mpic" style="width:100%; height:100%; background:url('https://pic.imgdb.cn/item/637d8dfe16f2c2beb1879bbf.gif')0 0/50% 70%" >
<img id="mpicc" style="width:100%; height:100%; background:url('https://pic.imgdb.cn/item/637d8dfe16f2c2beb1879bbf.gif')0 0/30% 40%" >
<div style="width:300px;height:50px; top: 80px; left:450px; text-align:center; line-height:180%; position : absolute;">
<span style="-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke: 1px rgb(255,0,0); background-image:url(https://pic1.imgdb.cn/item/63417abb16f2c2beb1075797.gif); line-height:180%; font:bold 3.5em 隶书">浪漫夕阳</span></div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=6879242.mp3" autoplay loop></audio>
</div>
<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 {position: absolute;display: grid;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 4px;place-items: end center;color: var(--color);font: normal 16px sans-serif;z-index: 999;--ww: 240px;--color: hsla(0,100%,100%,.95); --track: hsla(90,100%,95%,.65);--prog: linear-gradient(90deg,hsla(90,30%,50%,.55),hsla(180,100%,50%,.65));}#cur{grid-area: cur;color:var(--color);} #dur {grid-area: dur;color: var(--color);}#btnplay {grid-area: btnplay;display: grid;grid-auto-flow: column;place-items: end center;gap: 4px;height: 60px;cursor: pointer;}#btnplay>span {background: red;width: 4px;transition: .6s;}#cur { grid-area: cur; color: var(--color); }#dur { grid-area: dur; color: var(--color); }#prog {--xx: 0px;grid-area: prog;width: var(--ww);height: 10px;border-radius: 6px;background: var(--track);position: relative;cursor: pointer;}#prog::before {position: absolute;content: '';width: var(--xx);height: 100%;border-radius: 6px;background: var(--prog);}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(135deg, hsla(90, 50%, 50%, .45), hsla(120, 100%, 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));}#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%; } }</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="cur">00:00</span><span id="dur">00:00</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;(function() {for (j = 0; j < 20; j++) {let pinpu = document.createElement('span');pinpu.className = 'pinpu';pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;btnplay.appendChild(pinpu);}})();let mKey = 0, mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);prog.style.setProperty('--xx', prg + 'px');setPinpu();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 = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : '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;}};let setPinpu = () => {let eles = document.querySelectorAll('.pinpu');eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
HCPlayer({
lrcAr: lrcAr ,
player_css: 'bottom: 15px; left: 450px; --color: white; --ww: 300px; --prog:linear-gradient(90deg, lightblue, fuchsia); ',
lrc_css: 'top:590px; left:50%; transform: translateX(-50%); font: bold 3.8em 楷体; --bg: linear-gradient(90deg,red, yellow, green);' ,
});
})();
</script>
对频谱播放器“情有独钟”！{:5_117:} 图片变化的效果真好，很漂亮的频谱播放器效果，欣赏寒冬残荷好帖{:4_187:} 问好寒冬残荷，欣赏精彩的制作{:4_187:} 代码运用也是高手{:4_199:} 非常完美。赞。 红影 发表于 2022-11-23 15:09
图片变化的效果真好，很漂亮的频谱播放器效果，欣赏寒冬残荷好帖
美女，晚上好！谢谢红管理的支持与鼓励！ 醉美水芙蓉 发表于 2022-11-23 21:11
欣赏老师好贴！
美女，晚上好！谢谢芙蓉老师的支持与鼓励！ 小辣椒 发表于 2022-11-23 21:28
问好寒冬残荷，欣赏精彩的制作
美女，晚上好！谢谢小辣椒管理的支持与鼓励！ 马黑黑 发表于 2022-11-23 21:59
非常完美。赞。
谢谢马老师！是你的课程讲解得好，连我这个老太太都能仿照制作。 寒冬残荷 发表于 2022-11-23 22:22
谢谢马老师！是你的课程讲解得好，连我这个老太太都能仿照制作。
啊，女士呀？我一直以为是为先生{:4_170:}
失礼失礼 马黑黑 发表于 2022-11-23 22:25
啊，女士呀？我一直以为是为先生
失礼失礼
{:5_106:}农村老太太一枚。背景图上是我真实的名字。 寒冬残荷 发表于 2022-11-23 22:51
农村老太太一枚。背景图上是我真实的名字。
一般用“一枚”这个量词的，否是有点身份的 马黑黑 发表于 2022-11-23 22:54
一般用“一枚”这个量词的，否是有点身份的
{:5_106:}那用错了，农村老太太没文化呀！ 寒冬残荷 发表于 2022-11-23 22:57
那用错了，农村老太太没文化呀！
高文化的才用这个一枚 寒冬残荷 发表于 2022-11-23 22:18
美女，晚上好！谢谢红管理的支持与鼓励！
不客气啊，问好，再赏好帖{:4_187:} 很美的播放器，欣赏问好老师！{:4_183:}
页:
[1]