绿叶清舟 发表于 2022-10-7 21:31

灰机画你


<style>
      #papa { left: -250px; width: 1100px; height: 700px; background: #ccc url('https://pic1.imgdb.cn/item/6340288016f2c2beb11801f6.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
      #mplayer { position: absolute; 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, purple, orange); 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 tan; border-radius: 6px; opacity: 0; }
      #btnplay { width: 20px; height: 20px; transform: translateX(3px); background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
      #btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
      #prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, orange, purple 100%, transparent 0); border: 1px solid tan; font: normal 14px / 16px sans-serif; color: #fff; text-shadow: 1px 1px 0 #000; opacity: .8; }
      .star5 { position: absolute; background: transparent; top: -130px; left: -90px; font: normal 18px /18px sans-serif; offset-distance: 0%; offset-path: path("m269.5,663c0,0 -43,28 -43.5,28c0.5,0 3.5,19 3,19c0.5,0 4.5,12 4,12c0.5,0 -29.5,30 -30,30c0.5,0 10.5,24 10,24c0.5,0 32.5,16 32,16c0.5,0 43.5,8 43,8c0.5,0 46.5,-6 46,-6c0.5,0 35.5,-19 35,-19c0.5,0 8.5,-16 8,-16c0.5,0 -10.5,-27 -11,-27c0.5,0 -28.5,-12 -29,-12c0.5,0 -12.5,-18 -13,-18c0.5,0 1.5,-24 1,-24c0.5,0 52.5,-79 52,-79c0.5,0 -0.5,-104 -1,-104c0.5,0 38.5,-58 38,-58c0.5,0 7.5,-34 7,-34c0.5,0 -11.5,-68 -12,-68c0.5,0 -13.5,-37 -14,-37c0.5,0 -33.5,-13 -34,-13c0.5,0 -22.5,-17 -23,-17c0.5,0 5.5,-20 5,-20c0.5,0 3.5,-16 3,-16c0.5,0 -3.5,-27 -4,-27c0.5,0 -24.5,-12 -25,-12c0.5,0 -20.5,0 -21.5,0c-1,0 -10,20 -10.5,20c0.5,0 -0.5,34 -1,34c0.5,0 9.5,22 9,22c0.5,0 -2.5,13 -3,13c0.5,0 -47.5,21 -48,21c0.5,0 -29.5,93 -30,93c0.5,0 19.5,81 19,81c0.5,0 21.5,30 21,30c0.5,0 17.5,156 17.5,156z"); text-shadow: 0 0 12px rgba(199,245,122,.75); animation: move 12s var(--ss) linear infinite; }
      
      @keyframes move{to{offset-distance:100%}}
</style>

<div id="papa">
      
      <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 mKey = 0, mFlag = true, aud = new Audio();
let setColor = () => Math.random().toString(16).substr(-6);
Array.from({length: 40}).forEach((ele,key) => {
      ele = document.createElement('span');
      ele.className = 'star5';
      ele.innerText = '\u2708';
      ele.style.cssText += `--ss: ${key * 0.5}s; color: #${setColor()};`;
      papa.appendChild(ele);
});

aud.src = 'http://music.163.com/song/media/outer/url?id=1454987260.mp3';
aud.autoplay = true;
aud.loop = true;

btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('timeupdate', () => {
      prog.style.background = 'linear-gradient(90deg, orange, purple ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
      prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
let mState = () => 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>
{:4_189:}

马黑黑 发表于 2022-10-7 21:40

你确定不是画帝为牢？

绿叶清舟 发表于 2022-10-7 21:47

马黑黑 发表于 2022-10-7 21:40
你确定不是画帝为牢？

本来想找个象笔头的符号，没找到啊，看灰机好玩就拿来了，于是就是这名字了{:4_189:}

红影 发表于 2022-10-7 22:03

全部用三次赛贝尔曲线来画，这个厉害了，得花多少功夫啊{:4_199:}

小辣椒 发表于 2022-10-7 22:05

清舟这个太厉害了，居然人型出来了{:4_178:}

红影 发表于 2022-10-7 22:16

这个c我弄不清楚，不知道3个值设上去得到的曲线会往哪跑，感觉太难控了{:4_173:}

马黑黑 发表于 2022-10-7 22:23

绿叶清舟 发表于 2022-10-7 21:47
本来想找个象笔头的符号，没找到啊，看灰机好玩就拿来了，于是就是这名字了

灰机比笔头好玩

樵歌 发表于 2022-10-8 07:35

坐烂 了多少灰机去想你{:4_170:}

梦油 发表于 2022-10-8 10:06

这小飞机绕着人转到挺有意思的，制作起来一定挺费劲吧。

相约爱晚亭 发表于 2022-10-8 10:31

欣赏音画佳作！

加林森 发表于 2022-10-8 12:27

漂亮的制作。真好！{:4_199:}

绿叶清舟 发表于 2022-10-8 19:32

红影 发表于 2022-10-7 22:03
全部用三次赛贝尔曲线来画，这个厉害了，得花多少功夫啊

画了三次才出来了{:4_189:}

绿叶清舟 发表于 2022-10-8 19:32

加林森 发表于 2022-10-8 12:27
漂亮的制作。真好！

队长晚上好，身体全好了吧

绿叶清舟 发表于 2022-10-8 19:32

相约爱晚亭 发表于 2022-10-8 10:31
欣赏音画佳作！

谢谢相约，晚上好

绿叶清舟 发表于 2022-10-8 19:33

梦油 发表于 2022-10-8 10:06
这小飞机绕着人转到挺有意思的，制作起来一定挺费劲吧。

做出来了开心啊

绿叶清舟 发表于 2022-10-8 19:33

樵歌 发表于 2022-10-8 07:35
坐烂 了多少灰机去想你

坐烂一个加强排的{:4_189:}

绿叶清舟 发表于 2022-10-8 19:34

马黑黑 发表于 2022-10-7 22:23
灰机比笔头好玩

本来想用剪刀的，想想还是这个好

马黑黑 发表于 2022-10-8 19:36

绿叶清舟 发表于 2022-10-8 19:34
本来想用剪刀的，想想还是这个好

可以的，都可以

红影 发表于 2022-10-8 20:06

绿叶清舟 发表于 2022-10-8 19:32
画了三次才出来了

清舟太厉害了，换我可没这耐心，而且有耐心也弄不出来{:4_173:}

绿叶清舟 发表于 2022-10-8 20:39

红影 发表于 2022-10-8 20:06
清舟太厉害了，换我可没这耐心，而且有耐心也弄不出来

怎么会呢，虽然咱都是迷糊，但相比你仔细多了
页: [1] 2
查看完整版本: 灰机画你