《黄粱一梦》学习黑黑的凤凰展翅代码
<style>
.outerbox {
position: relative;
left: -302px;
top:120px;
width: 1200px;
height: 640px;
background: #888 url('https://pic.imgdb.cn/item/62c02f4f5be16ec74a80cb4d.jpg') no-repeat center/cover;
box-shadow: 2px 2px 8px rgba(0,0,0,.95);
border-radius:12px;
overflow: hidden;
}
.papa { left: 660px;top:100px; width: 430px; height: 479px; border-radius: 6px; background:url('https://pic.imgdb.cn/item/62c02f985be16ec74a812e3b.png') no-repeat center/cover; position: absolute; }
.papa::before, .papa::after { position: absolute; content: ''; border-radius: inherit; width: 155px; height: 340px; transition: all 2s linear;transform-origin: 50% 0; }
.papa::before {left: 60px; top:139px; background:url('https://pic.imgdb.cn/item/62c02fb45be16ec74a81549c.png') no-repeat center/cover; }
.papa::after {left: 215px; top:139px; background:url('https://pic.imgdb.cn/item/62c02fd55be16ec74a818069.png') no-repeat center/cover; }
.papa:hover::before { transform: rotate(75deg); }
.papa:hover::after { transform:rotate(-75deg); }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: calc(50% - 130px); top: 10px; padding: 10px; font: normal 1.2em sans-serif; color: purple; background: transparent;border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.25); z-index: 1; }
.playbox::before { position: absolute;content: '';margin: -20px;left: 0; top: 0; right: 0; bottom: 0;background: rgba(255,255,255,.45);filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>
<div class="outerbox">
<div class="playbox">
<p id="geci">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%</span>
</p>
</div>
<div class="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1446381591.mp3" autoplay="autoplay" loop="loop"></audio>
</div></div><br><br><br><br><br><br>
<script>
let slider = document.querySelector('#slider'),
aud = document.querySelector('#aud'),
per = document.querySelector('#per'),
btnplay = document.querySelector('#btnplay'),
geci = document.querySelector('#geci');
let slip = 0; //误差值
let lrcAr = [
['0.68','《黄粱一梦》'],
['6.68','作词作曲：半阳'],
['12.68','花潮LRC在线：马黑黑'],
['20.68','制作：红影'],
['28.68','学习凤凰展翅代码'],
['34.68','百里外谣传美人颜'],
['37.99','小红口眉宇间身轻如燕'],
['42.03','委婉的推却着门前'],
['45.93','有富人有书生有状元'],
['50.53','江南里三月微微凉'],
['53.96','雨里荷花如船只渡满江'],
['58.02','留行人一时步履忙'],
['61.97','隔江相望与她对讲'],
['65.69','酒馆里我在想'],
['69.43','何时雨停船有桨'],
['73.50','惬意中画一张'],
['77.52','你可会懂我所想'],
['81.49','少年过变了样'],
['85.40','青梅竹马总在忘'],
['89.57','总是在信中讲'],
['93.50','同饮江水不同乡'],
['97.66','多惆怅'],
['114.49','百里外谣传美人颜'],
['117.98','小红口眉宇间身轻如燕'],
['122.01','委婉的推却着门前'],
['125.96','有富人有书生有状元'],
['130.49','江南里三月微微凉'],
['133.96','雨里荷花如船只渡满江'],
['137.96','留行人一时步履忙'],
['141.87','隔江相望与她对讲'],
['145.72','酒馆里我在想'],
['149.44','何时雨停船有桨'],
['153.41','惬意中画一张'],
['157.49','你可会懂我所想'],
['161.45','少年过变了样'],
['165.39','青梅竹马总在忘'],
['169.45','总是在信中讲'],
['173.37','同饮江水不同乡'],
['177.44','多惆怅'],
['181.49','人儿悲借酒醉'],
['185.40','一曲断肠雁南飞'],
['189.32','白了发骨一堆'],
['193.39','也未尝过你的美'],
['197.44','红尘中一情种'],
['201.39','风月佳人怎能懂'],
['205.42','空欢喜都成空'],
['209.41','是我的黄粱一梦'],
['213.39','梦一场']
];
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 - slip){
geci.innerHTML = lrcAr;
}
}
});
let toMin = (sec) => {
if(!sec) return '0:00';
sec = parseInt(sec);
return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}
</script>
看到都在做开门帖子，我也来学个。我让瓢虫来展个小翅吧{:4_173:} 小瓢虫好漂亮的。大赞！ 这个创意好。这是学到用到的经典例子。 太漂亮了，这个创意特别好，亲爱的脑子特别灵{:4_178:} 这是瓢虫展翅。打开一个新世界 像跑车的鸥翼门 加林森 发表于 2022-7-2 21:22
小瓢虫好漂亮的。大赞！
明明是大瓢虫好吧，里面还藏着黄粱梦呢{:4_173:} 马黑黑 发表于 2022-7-2 21:36
这个创意好。这是学到用到的经典例子。
也只是套用黑黑的代码啊，应该感谢黑黑呢{:4_187:} 小辣椒 发表于 2022-7-2 22:17
太漂亮了，这个创意特别好，亲爱的脑子特别灵
亲爱的，你的那个大幕布也特别惊艳呢{:4_187:} 四海八荒 发表于 2022-7-2 22:23
这是瓢虫展翅。打开一个新世界
虽然不太好听，但里面藏了个黄粱梦，也算功劳一件了{:4_173:} 四海八荒 发表于 2022-7-2 22:24
像跑车的鸥翼门
哈哈，四海真会联想{:4_173:} 红影 发表于 2022-7-2 22:32
明明是大瓢虫好吧，里面还藏着黄粱梦呢
哈哈哈哈，我感觉挺好玩的。 红影 发表于 2022-7-2 22:35
虽然不太好听，但里面藏了个黄粱梦，也算功劳一件了
我觉得未来科学发达了，可以人为干预梦的过程，那时候就可以随时做美梦了 红影 发表于 2022-7-2 22:36
哈哈，四海真会联想
因为有一种车叫甲壳虫。像瓢虫 加林森 发表于 2022-7-2 22:42
哈哈哈哈，我感觉挺好玩的。
是挺好玩的，本来想弄个妆奁盒打开的，可我不会翻开的，就套用现成的代码了{:4_173:} 四海八荒 发表于 2022-7-2 22:46
我觉得未来科学发达了，可以人为干预梦的过程，那时候就可以随时做美梦了
那时可以直接进入虚拟现实了，又何必要梦{:4_173:} 四海八荒 发表于 2022-7-2 22:47
因为有一种车叫甲壳虫。像瓢虫
嗯嗯，被你一说，还真的有点像{:4_173:} 红影 发表于 2022-7-2 22:53
是挺好玩的，本来想弄个妆奁盒打开的，可我不会翻开的，就套用现成的代码了
我还不会。以后我会制作出的。我还在学习中。红影制作得真漂亮。 红影 发表于 2022-7-2 22:33
也只是套用黑黑的代码啊，应该感谢黑黑呢
你不是简单套用，是有学问在里面的，主要是，有自己的想法，并能通过工具去实现