翩翩【TO:绿叶清舟】（学习黑师《圆环斜频谱条》播放器效果）
本帖最后由 花飞飞 于 2023-8-13 19:11 编辑 <br /><br /><style>.mydiv { margin: 0 0 0 calc(50% - 830px); display: grid; place-items: center; width: 1500px; height: 800px; background: lightblue url('https://pic.imgdb.cn/item/64d77f241ddac507cc2b65c1.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; overflow: hidden; position: relative; z-index: 1; --state: running; }.mydiv::before,.mydiv::after { position: absolute; left: 0px; top: 0px; opacity: .55;content: url('https://pic.imgdb.cn/item/64d72d4d1ddac507cc3c97b8.gif'); mix-blend-mode: screen;offset-path: path('M 150,500L580,700'); animation: move 20s var(--delay) infinite var(--state); --delay: 100s; }
.mydiv::after { --delay: 10.3s; }
@keyframes move { from {offset-distance: 60%; } to { offset-distance: 100%; } }
#vid {
position: absolute;
width: 120%;
height: 110%;
top:-10px;
left:-10px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .36;
}</style> <div class="mydiv"><video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/25/51/62417fd483ea3.mp4" autoplay="" loop="" muted=""></video></div> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2063486982.mp3" loop="" autoplay=""></audio> <script>let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/pinpuxX_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
(function() {
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
window.onload = () => {
HCPlayer({
papa: `.mydiv`,
lrcAr: lrcAr,
lrc_css: `
bottom: 15px;
right:80px;
color: snow;
`,
player_css: `
color: snow;
z-index: 12;
bottom: 180px;
left:219px;
--len: 1.5px;
`,
pinpu_num: 30,
});
}
})();
document.querySelector('.mydiv').onclick = () => aud.paused ? vid.pause() : vid.play();</script> @绿叶清舟 练图中，送你一张刚做的青橙配色的小图。。周末快乐，一起听歌哈。。。 近来一直听刀郎的歌曲，选的是新专辑的翩翩~~{:4_170:}
祝贺你新家入住开心哈。。。{:4_187:}{:4_199:} 这个图图一定很大，我这个手提屏幕小，要是在单位应该能看到全图{:4_173:} 这个斜向频谱也很漂亮，尤其和文字结合，更觉得美妙。欣赏飞飞好帖，清舟收礼开心{:4_199:} 花飞飞 发表于 2023-8-12 17:30
近来一直听刀郎的歌曲，选的是新专辑的翩翩~~
飞飞咋开始使劲听刀郎的歌曲了，这点很好玩{:4_173:} 第二个翩翩两字被套在播放器里，这个构思太有趣了{:4_173:} 飞飞，我现在手机，图没有看全，播放器也是没有看见，回家再电脑欣赏了 飞飞电脑上来了，非常大气漂亮的图图，飞飞图图没有无损压缩吧 刀郎的歌也是特别好听{:4_199:} 清舟收礼开心{:4_171:} 这个可以试着把频谱条宽度弄大一点，与帖子匹配 马黑黑 发表于 2023-8-12 21:42
这个可以试着把频谱条宽度弄大一点，与帖子匹配
好哒，我多调一个数字。。 红影 发表于 2023-8-12 18:30
这个图图一定很大，我这个手提屏幕小，要是在单位应该能看到全图
跟给你的图一样大的。。{:4_187:} 红影 发表于 2023-8-12 18:31
这个斜向频谱也很漂亮，尤其和文字结合，更觉得美妙。欣赏飞飞好帖，清舟收礼开心
嗯嗯。这个特别好看。。{:4_187:} 红影 发表于 2023-8-12 18:32
飞飞咋开始使劲听刀郎的歌曲了，这点很好玩
其实以前就听。。还挺喜欢。。。
做贴找歌是件费时间的事，有新专辑就一个个做了，省得找。。{:4_170:} 红影 发表于 2023-8-12 18:34
第二个翩翩两字被套在播放器里，这个构思太有趣了
这个就是放着玩的。。{:4_170:} 醉美水芙蓉 发表于 2023-8-12 18:41
飞飞构思巧妙，做得漂亮！
谢谢水芙蓉支持哦。。{:4_187:}