镜听-刀郎【TO：小辣椒】（学习黑师《spira》管状小播效果）
本帖最后由 花飞飞 于 2023-8-10 20:29 编辑 <br /><br /><style>#papa {margin: 0 0 0 calc(50% - 830px); display: grid; place-items: center; width: 1500px; height: 800px; background: lightblue url('https://pic.imgdb.cn/item/64d4a90f1ddac507ccae9c09.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; overflow: hidden; position: relative; z-index: 1; --state: running; }#papa::before,#papa::after { position: absolute; left: 0px; top: 0px; content: url('https://638183.freep.cn/638183/t23/2/yumc.jpg'); mix-blend-mode: screen; offset-path: path('M-20,-20 L1060,200');animation: move 30s var(--delay) infinite var(--state); --delay: 0s; }
#papa::after { --delay: -15s; }
@keyframes move { from {offset-distance: 0%; transform: rotate(0deg); } to { offset-distance: 100%; transform: rotate(720deg); } }
#vid {
position: absolute;
width: 120%;
height: 110%;
top:-20px;
right:-520px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .10;
}
</style><div id="papa"><video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/77/5b4a08ff01196.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=2063487882" autoplay="" loop=""></audio>
<script>(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/tube_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [ ,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
window.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
lrc_css: `
bottom: 180px;
left:80px;
font: bold 30px/38px sans-serif;
color: OldLace;
-webkit-box-reflect: below 20px linear-gradient(to bottom, transparent, rgba(255,255,255,.5));;
--bg: linear-gradient(Wheat,Sienna);
`,
player_css: `
bottom: 10px;
opacity: .95;
--track: OldLace;
--prog: Tan;
--color: Sienna;
--bg: url('https://pic.imgdb.cn/item/64d49d311ddac507cc8e7c26.png') no-repeat center/cover;
`,
});
}
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
@小辣椒 说好请你吃雪糕的~~这个刀郎的新歌送你一起听哈~~ 醉美水芙蓉 发表于 2023-8-10 17:05
欣赏飞飞好作品！
谢谢水芙蓉支持哦。。{:4_187:}我看中间全屏显示几个字不正常，你那里看着怎么样 @小辣椒
今天做的贴子是暗色系的，不知你是否喜欢。。。
歌曲是做完图后搜刀神的新歌找出来的，一起听哈。。。{:4_187:} {:4_208:} 飞飞的制图越来越有韵味了，好漂亮。歌词同步和播放器的配色也好美。欣赏飞飞好帖，小辣椒亲爱的收礼开心{:4_199:} 花飞飞 发表于 2023-8-10 17:12
谢谢水芙蓉支持哦。。我看中间全屏显示几个字不正常，你那里看着怎么样
我还以为只有我看着出问题了，原来飞飞看到的也不对啊{:4_173:} 红影 发表于 2023-8-10 18:22
我还以为只有我看着出问题了，原来飞飞看到的也不对啊
{:4_173:}还没出现过这种情况呢。。。
@马黑黑 请老师来瞧瞧，网站里正常，论坛里全屏几个字有问题。。。。
还好不是其它地方不兼容。。。 红影 发表于 2023-8-10 18:21
飞飞的制图越来越有韵味了，好漂亮。歌词同步和播放器的配色也好美。欣赏飞飞好帖，小辣椒亲爱的收礼开心{: ...
{:4_187:}谢谢影子，总是能收到你的鼓励。。。开心ING... 花飞飞 发表于 2023-8-10 18:31
还没出现过这种情况呢。。。
@马黑黑 请老师来瞧瞧，网站里正常，论坛里全屏几个字有问题。。 ...
你没认真做研究吧？
那引入JS的代码，请加入 charset = 'utf-8'; ，详情请查看如下链接 插件引用 方法二：
http://mhh.52qingyin.cn/art/show.php?st=2&sd=2&art=1691662617 花飞飞 发表于 2023-8-10 18:31
还没出现过这种情况呢。。。
@马黑黑 请老师来瞧瞧，网站里正常，论坛里全屏几个字有问题。。 ...
很多的细节真的很容易疏忽的。 花飞飞 发表于 2023-8-10 18:31
谢谢影子，总是能收到你的鼓励。。。开心ING...
好喜欢飞飞的制作，每次都有新的感受{:4_199:} 啊~~~送我的，赶紧收礼{:4_170:} 花飞飞 发表于 2023-8-10 16:59
@小辣椒 说好请你吃雪糕的~~这个刀郎的新歌送你一起听哈~~
谢谢飞飞，太美了。来个大大的{:4_179:} 马黑黑 发表于 2023-8-10 18:59
你没认真做研究吧？
那引入JS的代码，请加入 charset = 'utf-8'; ，详情请查看如下链接 插件引用 方法 ...
嗯嗯，我的错，没有仔细看清楚。。。
老师教程里写得很清楚，已更改。。。{:4_170:} 飞飞太厉害了，1500的大图了{:4_199:}那标题字也是特别的美{:4_178:} 刀郎的歌也是特别好听