醉美水芙蓉 发表于 2023-7-7 22:54

来生再续未了情(电吹管版)

本帖最后由 醉美水芙蓉 于 2023-7-7 22:54 编辑 <br /><br /><style> #papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background:Pink url('https://pic.imgdb.cn/item/64a822961ddac507cc2216f9.jpg') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; z-index: 1; } #clock { position: absolute; left: 45px; top: 45px; width: 160px; height: 160px; background: tan; box-shadow: 0 0 40px 20px hsla(0,0%,0%,.9) inset, 0 0 80px 40px hsla(307, 100%, 50%,.5) inset; filter: drop-shadow(-5px -5px 30px black); border-radius: 50%; border: 8px solid hsla(307, 100%, 50%,.6); display: grid; place-items: center; cursor: pointer; opacity: .8; --state: paused; } #clock::before, #clock::after { position: absolute; content: ''; width: 6px; height: 78px; background:hsl( 307, 100%, 50%,.45); } #clock::before { --deg: 15deg; --time: .4s; top: 50%; background: hsl(307, 100%, 50%,.95); transform-origin: 50% 0; transform: rotate(-15deg); animation: rot var(--time) infinite alternate linear var(--state); } #clock::after {
--deg: 360deg; bottom: 50%; transform-origin: 50% 100%; transform: rotate(0deg); animation: rot var(--time) infinite linear var(--state); } #clock > span { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: hsla(307, 100%, 50%,.9); z-index: 2; } #clock > span:nth-of-type(2) { top: -7px; width: 6px; height: 6px; } .mypic { position: absolute; Left:180px; filter: blur(2px) opacity(.8); } @keyframes rot { to {transform: rotate(var(--deg)); } }</style><div id="papa"><div id="clock">00:00 &nbsp; &nbsp; 00:00<span></span><span></span></div> <img class="mypic" src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" alt="" /><audio id="aud" src="https://i.mp3.wf/view.php/35755504ad8f908b365992c09be9b3d3.mp3" autoplay loop></audio></div>
<script>
(function() {
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;};
aud.addEventListener('play', () => clock.style.setProperty('--state', 'running'));
aud.addEventListener('pause', () => clock.style.setProperty('--state','paused'));
clock.addEventListener('click', () => aud.paused ? (aud.play(), clock.style.setProperty('--state','running')) : (aud.pause(), clock.style.setProperty('--state','paused')));
aud.addEventListener('timeupdate', () => clock.innerHTML = toMin(aud.currentTime) + ' &nbsp; &nbsp; ' +toMin(aud.duration) + '<span></span><span></span>');
aud.addEventListener('canplay', () => clock.style.setProperty('--time', aud.duration + 's'));
})();
</script>

小辣椒 发表于 2023-7-7 23:17

问好水芙蓉，这个时钟播放器你上次作业做过吧

小辣椒 发表于 2023-7-7 23:18

音乐很好听，谢谢水芙蓉精彩分享{:4_171:}

醉美水芙蓉 发表于 2023-7-8 00:33

小辣椒 发表于 2023-7-7 23:17
问好水芙蓉，这个时钟播放器你上次作业做过吧

第一次做！

小文 发表于 2023-7-8 08:19

这个钟好别致，好！

醉美水芙蓉 发表于 2023-7-8 09:04

小文 发表于 2023-7-8 08:19
这个钟好别致，好！

是黑黑老师的代码！小文你也可以做一个！

红影 发表于 2023-7-8 09:13

把这个时钟调成这样的颜色，很有趣。欣赏水芙蓉好帖{:4_187:}

醉美水芙蓉 发表于 2023-7-8 09:16

红影 发表于 2023-7-8 09:13
把这个时钟调成这样的颜色，很有趣。欣赏水芙蓉好帖

红影美女早上好！

红影 发表于 2023-7-8 11:33

醉美水芙蓉 发表于 2023-7-8 09:16
红影美女早上好！

问好水芙蓉美女{:4_179:}

东篱闲人 发表于 2023-7-30 21:01

这个真好听！{:5_116:}

东篱闲人 发表于 2023-7-30 21:02

欣赏芙蓉的精彩！{:4_204:}

东篱闲人 发表于 2023-7-30 21:02

那个表坏啦？{:5_117:}

醉美水芙蓉 发表于 2023-7-30 21:43

东篱闲人 发表于 2023-7-30 21:02
那个表坏啦？

黑黑老师播放器，老师会做图，可以用代码做一个！

亚伦影音工作室 发表于 2023-7-30 21:47

这个作品很好！画面精美！音乐好听！

醉美水芙蓉 发表于 2023-7-30 21:56

亚伦影音工作室 发表于 2023-7-30 21:47
这个作品很好！画面精美！音乐好听！

亚伦老师晚上好，向您学习！
页: [1]
查看完整版本: 来生再续未了情(电吹管版)