无风无雨无心，也无你（但好像有谁）

马黑黑 · 发表于 2022-6-30 12:37

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

LRC Loading ...

0:0 | 0:0

山人 · 发表于 2022-6-30 12:59

CSS：

<style>
.papa { margin: auto; width: 1024px; height: 640px; background: #eee url('https://638183.freep.cn/638183/t22/51/g1.jpg') no-repeat center / cover; box-shadow: 0px 4px 30px rgba(0,0,0,.85); border-radius: 6px; position: relative; }
.smallpic { display: flex; gap: 4px; padding: 10px; width: 90px; position: absolute; overflow: hidden; }
.smallpic:hover { width: fit-content; cursor: pointer; }
.smallpic img { width: 100px; height: 100px; border-radius: 50%; filter: brightness(100%) opacity(80%); }
.smallpic img:hover { filter: brightness(110%) opacity(100%); }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; bottom: 10px; left: 10px; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: tan; background: rgba(255,255,255,.25); backdrop-filter: blur(2px); overflow: hidden; box-shadow: 1px 2px 2px #000; text-shadow: 1px 1px 1px #000; z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
@keyframes fadein { from { filter: brightness(80%); } to {filter: brightness(100%); } }
@keyframes fadeout { from { filter: brightness(100%); } to {filter: brightness(80%); } }
</style>

复制代码

山人 · 发表于 2022-6-30 12:59

HTML：

<div class="papa">
<div class="smallpic"></div>
<div class="playbox">
<p id="geci" style="font-size: 1.2em">LRC Loading ... </p>
<p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
<input id="btnplay" type="button" value=">" />
<input id="slider" type="range" min="0" max="100" value="0" />
<span id="per">0:0 | 0:0</span>
</p>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1920271471.mp3" autoplay="autoplay" loop="loop"></audio>

复制代码

山人 · 发表于 2022-6-30 13:00

JavaScript：

<script>
let papa = document.querySelector('.papa'),
spic = document.querySelector('.smallpic'),
slider = document.querySelector('#slider'),
aud = document.querySelector('#aud'),
per = document.querySelector('#per'),
btnplay = document.querySelector('#btnplay'),
geci = document.querySelector('#geci');
let flag = 0, slip = 0;
let picar = [
'https://638183.freep.cn/638183/t22/51/g1.jpg',
'https://638183.freep.cn/638183/t22/51/g2.jpg',
'https://638183.freep.cn/638183/t22/51/g3.jpg',
'https://638183.freep.cn/638183/t22/51/g4.jpg',
'https://638183.freep.cn/638183/t22/51/g5.jpg',
'https://638183.freep.cn/638183/t22/51/g6.jpg',
'https://638183.freep.cn/638183/t22/51/g7.jpg'
];
let lrcAr = [
['0.00','无风无雨无心，也无你- 纯音乐'],
['50.00','作曲 : 野浪吉他社'],
['160.00','音乐使灵魂洁净']
];
for(url of picar) {
let pic = document.createElement('img');
pic.src = url;
pic.className = 'ss';
spic.appendChild(pic);
}
let ss = document.querySelectorAll('.ss');
ss.forEach((item,key) => {
item.onclick = () => {
papa.style.background = 'url(' + item.src + ') no-repeat center / cover';
flag == 0 ? (papa.style.animation = 'fadein .8s', flag = 1) : (papa.style.animation = 'fadeout .8s', flag = 0);
}
});
slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
slider.value = prog;
per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr[j][0] - slip){
geci.innerHTML = lrcAr[j][1];
}
}
});
let toMin = (sec) => {
if(!sec) return '0:00';
sec = parseInt(sec);
return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}
</script>

复制代码

山人 · 发表于 2022-6-30 13:08

左上角圆形图片弹出原理解析：

利用装载图片的选择器 .smallpic 加以实现：固定宽度（90px）, css hover 事件令其宽度为 fit-content ，亦即其宽度自动适应内部元素总尺寸。图片为 100px 宽度，为何只设父盒子 90 px？原因是，.smallpic 选择器有 10px 的 padding 设定。

此外，.smallpic 选择器设定 display 为 flex 布局，除设置了 gap 值，其余使用默认设置，这是确保选择器展开时图片是横向排列的。

山人 · 发表于 2022-6-30 13:14

鼠标移动到小图片时“点亮”效果的实现技法：

本帖采用 CSS hover 触发鼠标经过事件，使用两个滤镜营造动态效果，代码如下，

filter: brightness(110%) opacity(100%);

birghtness 值为 100% 时是原图亮度，超过这个值是增亮；opacity 为 100% 时是完全不透明（之前图片设置了些许透明度）。其实也可以简单用 opacity 简单制作效果：

opacity: 值;

单独使用 opacity，其值在 0 - 1 之间，0 完全透明，1完全不透明。