我的楼兰（学习黑师《Don't Say No》meter进度条播放效果)
本帖最后由 花飞飞 于 2023-8-12 16:59 编辑 <br /><br /><style>
#papa { margin: 0 0 0 calc(50% - 830px); width: 1500px; height: 800px; background: url('https://pic.imgdb.cn/item/64d194571ddac507ccdc71b8.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; z-index: 1; position: relative;overflow: hidden; --state: running; }
#papa::before, #papa::after { position: absolute; content: ''; width: 1500px; height: 120px; bottom: 15px;
animation: move 6s infinite linear var(--state); }
#papa::before {background: repeating-linear-gradient( to top right, transparent, transparent 5px, rgba(255,255,255,.7) 5px, rgba(255,255,255,.5) 10px, transparent 10px, transparent 15px ); background-size: 200%;opacity: .56; }
@keyframes move { from { background-position: top right; } to { background-position: bottom left; } }
#vid {
position: absolute;
width: 120%;
height: 110%;
top:-10px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .26;
}
</style>
<div id="papa"><video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/18/94/5ef7ff6eaa213.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=26545309" autoplay loop></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/meter_pinpu_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
window.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
lrc_css: `
top: 20px;
color: lightblue;
--bg: linear-gradient(rgba(200,200,250,.25),rgba(100,200,250,.65));
`,
player_css: `
bottom: 45px;
z-index: 10;
color: snow;
`,
/* 频谱设置 num - 频谱数; width - 频谱条宽; color - 频谱条颜色（不要 color 则去随机颜色）*/
pinpu: { num: 54, width: 3, color: 'rgba(255,255,255,.5)' },
});
}
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script> @马黑黑 老师瞧瞧，我把小圆改成琴弦了 。。。 花飞飞 发表于 2023-8-8 09:38
@马黑黑 老师瞧瞧，我把小圆改成琴弦了 。。。
这个修改好有特色。飞飞聪明而又脑筋灵活{:4_199:} 图片制作很漂亮，尤其文字设计很美，无论是标题字还是旁边虚化的说明字。
欣赏飞飞好帖{:4_199:} 花飞飞 发表于 2023-8-8 09:38
@马黑黑 老师瞧瞧，我把小圆改成琴弦了 。。。
这个变动有点大胆，效果奇佳。
云朵的歌，数这首最经典，我认为是代表作了。 红影 发表于 2023-8-8 10:16
这个修改好有特色。飞飞聪明而又脑筋灵活
乱改出来的，谢 谢影子肯定 哈。。{:4_187:} 红影 发表于 2023-8-8 10:18
图片制作很漂亮，尤其文字设计很美，无论是标题字还是旁边虚化的说明字。
欣赏飞飞好帖
两三种字体，乱试一下凑一块的。。{:4_173:} 马黑黑 发表于 2023-8-8 10:33
这个变动有点大胆，效果奇佳。
云朵的歌，数这首最经典，我认为是代表作了。
昨天那版太花里胡哨了，到处都在动，眼花。。。改成这样还比较满意。。
云朵的歌听的不多，一下子挑中了这首。。 醉美水芙蓉 发表于 2023-8-8 18:02
效果漂亮，欣赏飞飞巧手制作！
感谢水芙蓉鼓励！{:4_187:} 花飞飞 发表于 2023-8-8 18:59
乱改出来的，谢 谢影子肯定 哈。。
效果很奇特，飞飞好棒的{:4_187:} 花飞飞 发表于 2023-8-8 19:00
两三种字体，乱试一下凑一块的。。
飞飞很有美感，这样的设计很棒{:4_204:} 花飞飞 发表于 2023-8-8 19:01
昨天那版太花里胡哨了，到处都在动，眼花。。。改成这样还比较满意。。
云朵的歌听的不多，一下子挑中了 ...
这首挺好 红影 发表于 2023-8-8 20:01
效果很奇特，飞飞好棒的
影子一直夸我，真好{:4_173:}
红影 发表于 2023-8-8 20:02
飞飞很有美感，这样的设计很棒
{:4_170:}被你一路夸来，送个贴子给你哦。。 马黑黑 发表于 2023-8-8 22:08
这首挺好
最近都找刀家的歌了，一会再发一曲 花飞飞 发表于 2023-8-9 19:25
影子一直夸我，真好
真的，都不知道你怎么会让幕布表现得这么奇特。厉害{:4_187:} 花飞飞 发表于 2023-8-9 19:25
被你一路夸来，送个贴子给你哦。。
哈哈，开心，我赶紧去看看。。。 红影 发表于 2023-8-9 19:37
真的，都不知道你怎么会让幕布表现得这么奇特。厉害
没别的办法，就是乱试出来的，超小白胆儿越大{:4_170:} 红影 发表于 2023-8-9 19:38
哈哈，开心，我赶紧去看看。。。
用了你的签名文字哦。。。{:4_170:}