寂寞苍穹
本帖最后由 马黑黑 于 2022-9-14 06:53 编辑 <br /><br /><style>#papa{left:-214px;width:1024px;height:640px;background:tan url('/data/attachment/forum/202209/14/064823x7mz455zm69jis5z.jpg') no-repeat center/cover;box-shadow:3px 3px 20px #000;display:grid;place-items:center;position:relative;z-index:1}#mplayer{position:absolute;left:20px;bottom:0;width:300px;height:80px;user-select:none;display:grid;place-items:center;cursor:pointer}#mplayer:hover #btnwrap,#mplayer:hover #prog{transform:translateY(var(--yy))}#mplayer:hover #btnwrap{background:linear-gradient(to top right,rgba(0,0,255,.45),rgba(255,0,0,.35));border-radius:50%;opacity:.75}#btnwrap,#prog{position:absolute;display:grid;place-items:center;transition:.5s}#btnwrap{--yy:-15px;width:40px;height:40px;transform:rotate(45deg);border:1px solid gray;border-radius:6px;opacity:.25}#btnplay{width:20px;height:20px;background:rgba(255,255,255,.15);clip-path:polygon(0 0,0 100%,100% 50%)}#btnpause{width:2px;height:20px;border-style:solid;border-width:0 4px;border-color:transparent rgba(255,255,255,.15);display:none}#prog{--yy:20px;width:300px;height:16px;border-radius:10px;background:linear-gradient(90deg,rgba(0,0,255,.45),rgba(255,0,0,.35) 100%,transparent 0);border:1px solid gray;font:400 14px / 16px sans-serif;color:gray}#lrc{position:absolute;top:60px;font:700 2em sans-serif;color:transparent;letter-spacing:2px;background:linear-gradient(-90deg,#8b0000,gold,orange,snow) 100% 0 / 200% 100%;background-clip:text;-webkit-background-clip:text;animation:bgMerge 5s linear infinite}.ball{--ss:0s;position:absolute;width:10px;height:10px;left:346px;top:300px;border-radius:50%;background:red;offset-distance:0;offset-path:path("M150 60 Q245 -10 280 60 Q320 150 150 290 Q-20 150 20 60 Q65 -10 150 60z");animation:move 6s var(--ss) linear infinite}@keyframes move{to{offset-distance:100%}}@keyframes bgMerge{from{background-position:0 0}to{background-position:-100% 0}}</style><div id=papa><div id=lrc>lrc</div><div id=mplayer><div id=btnwrap><span id=btnplay></span><span id=btnpause></span></div><div id=prog>00:00 | 00:00</div></div></div><script>let lrcAr = [ ['0.00',' 作曲 & 演唱: 夏小虎'], ['28.00',' 作词 : 夏小虎 & 房海华'], ['31.81','暮色黯然'], ['34.34','孤灯一盏'], ['37.82','风缓缓'], ['41.21','恰似有人轻叹'], ['45.96','茫茫星空'], ['48.68','痴人说梦'], ['51.98','愁千种'], ['55.61','犹如万马飞纵'], ['62.86','该如何从容'], ['65.53','才可以面对命运的摆弄'], ['70.95','该如何放松'], ['73.76','才可以平静内心的潮涌'], ['77.90','幽幽夜空'], ['80.81','冷落了清风'], ['84.09','寂寞苍穹'], ['88.61','孤独了英雄'], ['121.24','暮色黯然'], ['123.83','孤灯一盏'], ['127.44','风缓缓'], ['130.69','恰似有人轻叹'], ['135.72','茫茫星空'], ['138.14','痴人说梦'], ['141.66','愁千种'], ['145.20','犹如万马飞纵'], ['152.32','该如何从容'], ['155.19','才可以面对命运的摆弄'], ['160.25','该如何放松'], ['163.13','才可以平静内心的潮涌'], ['167.45','幽幽夜空'], ['170.37','冷落了清风'], ['173.90','寂寞苍穹'], ['178.40','孤独了英雄'], ['187.87','该如何从容'], ['190.97','才可以面对命运的摆弄'], ['196.26','该如何放松'], ['198.88','才可以平静内心的潮涌'], ['203.23','我欲将千年的梦（幽幽夜空）'], ['206.21','揉碎在手中（冷落了清风）'], ['209.76','挥挥手（寂寞苍穹）'], ['216.65','无影无踪（孤独了英雄）'] ];let aud = new Audio();
let setColor = () => Math.random().toString(16).substr(-6);
aud.src = 'https://music.163.com/song/media/outer/url?id=1341066097.mp3';
aud.autoplay = true;
aud.loop = true;
Array.from({length: 60}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'ball';
ele.style.cssText += `--ss: ${key * 0.1}s; background: #${setColor()};`;
papa.appendChild(ele);
});
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.background= 'linear-gradient(130deg, rgba(0,0,255,.45), rgba(255,0,0,.35) ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';//prog.offsetWidth * aud.currentTime / aud.duration) + 'px 0px';
prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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;
}</script> 本帖最后由 马黑黑 于 2022-9-14 07:04 编辑
珠子特效代码：
一、CSS：
.ball {
--ss: 0s;
position: absolute;
width: 10px;
height: 10px;
left: 346px;
top: 300px;
border-radius: 50%;
background: red;
offset-distance: 0;
offset-path: path("M150 60 Q245 -10 280 60 Q320 150 150 290 Q-20 150 20 60 Q65 -10 150 60z");
animation: move 6s var(--ss) linear infinite;
}
@keyframes move { to { offset-distance: 100%;} }
二、HTML：确保有 id="papa" 的父元素（也可以修改JS重命名父元素id
三、JS：
let setColor = () => Math.random().toString(16).substr(-6); //生成随机16进制颜色
//生成珠子
Array.from({length: 60}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'ball';
ele.style.cssText += `--ss: ${key * 0.1}s; background: #${setColor()};`;
papa.appendChild(ele);
});
本帖最后由 马黑黑 于 2022-9-14 07:24 编辑
珠子沿心形轨迹运行原理：
利用CSS关键帧动画@keyframes，调用svg之path路径，从而可以驱动元素按预设轨迹运动。具体方案是，在需要运动的元素CSS选择器加入 offset-path 属性，该属性用语句 path("...") 描述路径，描述方法完全是svg的路径描述规范，并设置 offset-distance 属性，该属性意为元素在路径上的距离，这里设置的是初始距离，可以理解为是元素在路径上的出发点。接着，设计一个关键帧动画，设置元素要到达路径的何处，比如 100%，可以理解为是路径的终点。心形路径是闭合路径，只要在元素的 animation 属性中设置了 infinite（循环），则元素会永远沿着心形路径运动。
JS批量创建珠子，并追加到父元素中。
这些珠子，初始时的物理位置，都在 .ball 选择器中进行了定位。如果觉得对珠子定位困难，可以考虑将珠子追加到另一个元素中（该元素为父元素的子元素），然后对该元素进行定位。不论如何操作，珠子的 position 必须设为 absolute，否则不会乖乖听话。 帖子其余代码均为常规HTML+CSS+JS代码，和近期发布的帖子相类似甚至相同，无需分析 关于svg心形路径，请移步 手工用svg画个心形路径，刚画的时候不够顺滑，后面感觉越来越好，也可以去找找路径生成工具制作
这个制作有意思。挺好玩的。老黑早晨好！{:4_190:} 加林森 发表于 2022-9-14 07:44
这个制作有意思。挺好玩的。老黑早晨好！
早 马黑黑 发表于 2022-9-14 07:45
早
{:4_190:} 这个应该是最后画的那个心形吧，用了四个二次赛贝尔曲线，心形拟合得非常完美，随机色的珠子也很漂亮。
比较单薄的背景，有了这些珠子的加持，变得特别灵动{:4_199:} 马黑黑 发表于 2022-9-14 06:59
珠子特效代码：
一、CSS：
珠子的个数不知道怎么确定的，是根据路线长度除以半径来的么？不对，是除以直径。若少了应该是会有断档吧？ 醉美水芙蓉 发表于 2022-9-14 11:39
这个特效好漂亮哦！欣赏黑黑老师新作品！
{:4_190:} 红影 发表于 2022-9-14 09:38
珠子的个数不知道怎么确定的，是根据路线长度除以半径来的么？不对，是除以直径。若少了应该是会有断档吧 ...
珠子的大小也要算计在内。这个一般不用精准计算。路径闭合、几近圆形，综合一下珠子尺寸，就60个，不对调整一下 红影 发表于 2022-9-14 09:33
这个应该是最后画的那个心形吧，用了四个二次赛贝尔曲线，心形拟合得非常完美，随机色的珠子也很漂亮。
比 ...
{:4_181:} 感谢老师的精彩代码分享，欣赏点赞！{:4_204:} 黒黑新珠珠样式出笼{:4_178:} 这个播放器歌词是彩色的了{:4_199:} 每天有变化，黑黑你太有才的，佩服S{:4_178:} 小辣椒 发表于 2022-9-14 18:29
每天有变化，黑黑你太有才的，佩服S
变变更快乐{:4_170:} 梦缘 发表于 2022-9-14 17:23
感谢老师的精彩代码分享，欣赏点赞！
谢谢