论坛 › 欢乐水吧 › 女人如烟（黑黑小珠子效果套用一个）

小辣椒 发表于 2022-9-1 21:53

女人如烟（黑黑小珠子效果套用一个）

<style>
#papa { left: -124px; width: 900px; height: 900px;top: 150px;background: gray url('https://pic.imgdb.cn/item/6310877716f2c2beb163bb54.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; position: relative; }
#lrc { position: absolute; left: 330px; top: 740px; font: bold 1.5em sans-serif; color: #FFFFFF; text-shadow: 1px 1px 2px #000; letter-spacing: 2px; }
#mplayer { position: absolute; left: 120px; top: 800px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; }
#btnwrap { width: 42px; height: 42px; background: #9AB38B; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
#btnwrap:hover { background: #418147; }
#btnplay { width: 16px; height: 16px; background: gold; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent gold; display: none; }
#prog { width: 500px; height: 2px; background: #CDD8DD linear-gradient(90deg,red,Cyan,Fuchsia) no-repeat ; background-size: 1px 2px; position: relative; cursor: pointer; }
#prog::before { position: absolute; top: -5px; height: 12px; width: 200px; content: ''; }
#tmsg { left: 260px; bottom: 16px; color: #e3f3ff; }
.ball { position: absolute; left: -20px; top: 0; width: 15px; height: 15px; border-radius: 50%; background: red; animation: move 40s var(--ss) linear infinite; }
@keyframes move {
      0%, 100% { left: 0; top: 0; }
      25% { left: calc(100% - 20px); top: 0; }
      50% { left: calc(100% - 20px); top: calc(100% - 20px); }
      75% { left: 0; top: calc(100% - 20px); }
}
</style>

<div id="papa">
      <span id="lrc">lrc歌词</span>
      <span id="mplayer">
                <span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span>
                <span id="prog"></span>
                <span id="tmsg">00:00 | 00:00</span>
      </span>
</div>

<script>
let lrcAr = [
                ['00.00','【女人如烟】'],
        ['5.68','歌手- 张玮伽'],
        ['11.37','谢谢黑黑教程分享'],
        ['27.12','那天你用柔情将我点燃'],
        ['32.64','我开始变成你手中的云'],
        ['39.80','你轻轻地将我含在唇间'],
        ['45.92','我的身姿弥漫了你的眼'],
        ['50.80','你漫不经心燃烧我的生命'],
        ['57.43','我也心甘情愿做你的烟'],
        ['62.83','也许你不经意的一个微笑'],
        ['69.10','我就义无反顾地来到你身边'],
        ['77.37','你说过 今生与烟为伴'],
        ['84.18','你说过 女人如烟你已习惯'],
        ['90.09','你说过 聚散离合随遇而安'],
        ['95.63','可我来世还要做你手中的烟'],
        ['102.51','想我了 就请你把我点燃'],
        ['107.93','任我幸福的泪缠绵你指尖'],
        ['114.47','化成灰也没有一丝遗憾'],
        ['120.24','让我今生来世为你陪伴'],
        ['128.61','LRC编辑：小辣椒'],
        ['154.20','那天你用柔情将我点燃'],
        ['158.59','我开始变成你手中的云'],
        ['165.80','你轻轻地将我含在唇间'],
        ['171.72','我的身姿弥漫了你的眼'],
        ['176.92','你漫不经心燃烧我的生命'],
        ['183.90','我也心甘情愿做你的烟'],
        ['189.18','也许你不经意的一个微笑'],
        ['194.99','我就义无反顾地来到你身边'],
        ['202.60','空气中 寂寞在悄悄蔓延'],
        ['210.12','就算我化为烟雾也不忍离散'],
        ['216.42','好喜欢 你疼我说笨蛋噢乖'],
        ['221.50','我知道 我的感觉无法改变'],
        ['229.00','想我了 就请你把我点燃'],
        ['233.88','任我幸福的泪缠绵你指尖'],
        ['240.43','化成灰也没有一丝遗憾'],
        ['246.10','让我今生来世为你陪伴'],
        ['253.19','谢谢欣赏！'],
        ['272.31','谢谢欣赏！'],
        ['273.37','']
];
let aud = new Audio(), lw = prog.offsetWidth;
aud.src = 'https://music.163.com/song/media/outer/url?id=342349.mp3';
aud.autoplay = true;
aud.loop = true;

Array.from({length: 60}).forEach((item,key) => {
      item = document.createElement('span');
      item.className = 'ball';
      item.style.cssText = `--ss: ${key * 0.5}s; background: #${Math.random().toString(16).substr(-6)};`;
      papa.appendChild(item);
});

prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;

btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', ()=> btnstate());
aud.addEventListener('pause', ()=> btnstate());

aud.addEventListener('timeupdate', () => {
      prog.style.backgroundSize = lw * aud.currentTime / aud.duration + 'px 2px';
      tmsg.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>
<br><br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-9-1 21:56

好像有点匆匆忙忙的{:4_170:}

加林森 发表于 2022-9-1 21:56

制作漂亮。女烟鬼啊。{:5_117:}

加林森 发表于 2022-9-1 21:57

老歌曲。好听！{:4_199:}

小辣椒 发表于 2022-9-1 21:57

作业完成就好，每天按时完成@马黑黑

黑黑我想修改珠子圆型不会，又改回来了

马黑黑 发表于 2022-9-1 21:59

动作也太快了

小辣椒 发表于 2022-9-1 22:04

马黑黑 发表于 2022-9-1 21:59
动作也太快了

这个不快啊，我开始脑子里想做个圆形的，珠子代码不会改，发现1280X650的，珠子短一点的尺寸会间隔小，就找了这个方的图图，都是现成的图图，速度快一点了

红影 发表于 2022-9-1 22:27

这个烟还是动态的呢，欣赏亲爱的漂亮的制作{:4_187:}

马黑黑 发表于 2022-9-1 22:32

小辣椒 发表于 2022-9-1 22:04
这个不快啊，我开始脑子里想做个圆形的，珠子代码不会改，发现1280X650的，珠子短一点的尺寸会间隔小，就 ...

可根据尺寸，修改 animation 里的第一个时间

加林森 发表于 2022-9-2 13:10

再来欣赏

千羽 发表于 2022-9-2 20:32

小辣椒的作业也是灵活发挥了，更有看点了{:4_187:}

千羽 发表于 2022-9-2 20:34

歌儿真好听，好像闻到了烟味{:4_173:}

加林森 发表于 2022-9-3 20:03

{:4_178:}

绿叶清舟 发表于 2022-9-3 20:19

片片好漂亮，还在冒着烟的啊

小辣椒 发表于 2022-9-4 11:31

红影 发表于 2022-9-1 22:27
这个烟还是动态的呢，欣赏亲爱的漂亮的制作

亲爱的。都是以前做的图图

小辣椒 发表于 2022-9-4 11:32

马黑黑 发表于 2022-9-1 22:32
可根据尺寸，修改 animation 里的第一个时间

好的，谢谢黑黑{:4_187:}

小辣椒 发表于 2022-9-4 11:33

加林森 发表于 2022-9-2 13:10
再来欣赏

队长好，谢谢队长欣赏{:4_187:}

小辣椒 发表于 2022-9-4 11:34

千羽 发表于 2022-9-2 20:32
小辣椒的作业也是灵活发挥了，更有看点了

谢谢千羽，我是完成作业为主，没有创意的

小辣椒 发表于 2022-9-4 11:34

千羽 发表于 2022-9-2 20:34
歌儿真好听，好像闻到了烟味

哈哈~~~你的嗅觉特别灵{:4_179:}

小辣椒 发表于 2022-9-4 11:35

绿叶清舟 发表于 2022-9-3 20:19
片片好漂亮，还在冒着烟的啊

谢谢清舟欣赏{:4_187:}

查看完整版本: 女人如烟（黑黑小珠子效果套用一个）