你的万水千山（测试动图频谱点击界面停止）
<style>#papa { left: -410px; width: 1400px; height: 750px; top:150px;background:url('https://pan.365.tf/uploads/lxx/20221031/05.jpg')0 0/100% 100%;display: grid;center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; user-select: none; overflow: hidden; z-index: 1; --opt: .25; }
#btnplay {position: absolute;
width: 1400px;
height: 710px;
left: 0px;
bottom: 0px;
-border: 2px solid #000000;
background: url('https://365.tf/disk/img/sx.png')0 0/100% 100%;
mask: radial-gradient(transparent 7px,#red 0);
-webkit-mask: radial-gradient(transparent 7px,red 0);
-border-radius: 50%;
cursor: pointer;
-animation: rot 4s linear infinite;
-z-index: 20;
-transform: rotateX(45deg) rotateY(20deg) rotate(0deg);}
#lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute; top: 420px;left: 700px;color: #000080; font-family: 汉仪雪峰体简;
font-size: 45px;-webkit-background-clip: text; filter: drop-shadow(#ffffff 2px 0 0)drop-shadow(#ffffff 0 2px 0)drop-shadow(#ffffff -2px 0 0) drop-shadow(#ffffff 0 -2px0); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap;background: repeating-linear-gradient(275deg, #fec108 0%,#6003fa 100%);-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%; } }
#tx { position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 700px;
animation: tx 0.25s linear infinite;
cursor: pointer;
opacity: 1; }
@keyframes tx {
to {filter:hue-rotate(360deg)contrast(100%)brightness(150%);}
}
</style>
<style>
.img_border{display:inline-block;width:1400px;height:750px;margin:0px ;position: absolute;}
.img_border #aplay{border:1px solid #000000;border-radius:0%; }
.z360z{animation: rotating 0s linear infinite;background:url('https://pan.365.tf/uploads/lxx/20221031/005.gif')0 0/100%100%;}@keyframes rotating{from {filter:hue-rotate(0deg)contrast(120%)brightness(110%);}to {filter:hue-rotate(60deg)contrast(110%)brightness(100%);}}
</style>
<div id="papa"><div id="tx">
<div class="img_border" id="aplay" style="width: 1400px; height: 750px;position: absolute;">
<img id="tupian" style="width: 100%; height: 100%;background: url()0 0/100% 100%"></div></div>
<span id="btnplay" style="animation-play-state: running;"></span>
<span id="lrc" data-lrc="花潮lrc在线" style="--state:running; --motion:cover1; --tt:9.1s;">花潮lrc在线</span>
</div>
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20230326161941.mp3" autoplay="autoplay"></audio>
<script>
(function() {
let mKey = 0, mFlag = true, slip = 0.0;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
aud.loop = false;
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime - slip >= lrcAr) {
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.animationPlayState = 'running',
lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
})();
</script>
<script type="text/javascript">
var my_audio =document.getElementById("aud");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function(){document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc); </script>
<br></div><br><br><br><br><br><br><br><br><br><br><br>
黑黑用你以前教的播放器图片按钮理念，一个动图，一个不是动图，切换停止，玩了这个频谱停止效果
@马黑黑
点击画面停止歌词和背景，再点击画面音乐和歌词出来。。。。测试完成
这个制作很简单，谢谢黑黑，感觉前面教的，现在可以用上了{:4_173:} 小辣椒 发表于 2022-10-31 21:27
黑黑用你以前教的播放器图片按钮理念，一个动图，一个不是动图，切换停止，玩了这个频谱停止效果
@马黑 ...
图片可操作性很强的，这个挺好 就是我把这个路劲的纸飞机做进了动图，结果动图是活动的，jpg图片纸飞机出来是一个位置了，这个以后只能玩纯频谱可以的，路劲效果不够完美 小辣椒 发表于 2022-10-31 21:29
这个制作很简单，谢谢黑黑，感觉前面教我，现在可以用上了
JS操作 animation 也是绰绰有余的，你可以慢慢体会：暂停↔继续，而不是停止↔重来 马黑黑 发表于 2022-10-31 21:33
图片可操作性很强的，这个挺好
谢谢黑黑，是用上前面教的东西了{:4_173:} 马黑黑 发表于 2022-10-31 21:34
JS操作 animation 也是绰绰有余的，你可以慢慢体会：暂停↔继续，而不是停止↔重来
暂停↔继续，这个还不会{:4_189:} 小辣椒 发表于 2022-10-31 21:37
暂停↔继续，这个还不会
所以叫你慢慢体会，这个体会建立在有一定CSS和JS基础之上 小辣椒 发表于 2022-10-31 21:35
谢谢黑黑，是用上前面教的东西了
前面的也有好多基础的东东的 马黑黑 发表于 2022-10-31 21:38
所以叫你慢慢体会，这个体会建立在有一定CSS和JS基础之上
那得继续认真学习{:4_189:} 小辣椒 发表于 2022-10-31 21:40
那得继续认真学习
前面的路还很艰辛 马黑黑 发表于 2022-10-31 21:38
前面的也有好多基础的东东的
是啊，其实黑黑前面教的东西很多，小辣椒基础差，许多还不会 小辣椒 发表于 2022-10-31 21:41
是啊，其实黑黑前面教的东西很多，小辣椒基础差，许多还不会
慢慢来不急，学自己能用得上的 马黑黑 发表于 2022-10-31 21:40
前面的路还很艰辛
是的，好多东西根本不会 小辣椒 发表于 2022-10-31 21:42
是的，好多东西根本不会
用一点学一点 马黑黑 发表于 2022-10-31 21:41
慢慢来不急，学自己能用得上的
总感觉要学习的东西不少，自己跟不上黑黑的进度，其实好多东西我都没有去看的 小辣椒 发表于 2022-10-31 21:37
暂停↔继续，这个还不会
lrc歌词同步就是 animation 动画的 暂停↔继续，可以研究下JS代码是怎么控制它的 小辣椒 发表于 2022-10-31 21:44
总感觉要学习的东西不少，自己跟不上黑黑的进度，其实好多东西我都没有去看的
看不全是正常的 马黑黑 发表于 2022-10-31 21:42
用一点学一点
现在也是这样，不会的去找你的教程，然后慢慢自己琢磨，