卡门-葛兰（学习黑黑Josh Vietti : Toccata代码）
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/68975e6158cb8da5c8154170.jpg') no-repeat center/cover; --ma-size: 15%; }
.pd-vid { width: 46%; height: 54%; opacity: 1; top: 6%;left: 28%; }
#ma { right: 30px; top: 10px; display: grid; place-items: center; }
.son { position: absolute; width: 40%; height: 80%; }
.son::before, .son::after { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://pic1.imgdb.cn/item/6897646358cb8da5c8154400.jpg') no-repeat center/cover; clip-path: polygon(0 0,50% 50%,100% 0, 50% 15%,0 0); transform: scale(1) translateY(5px); }
.son::after { transform: scale(1, -1) translateY(5px); }
.son:nth-of-type(2) { transform: rotate(90deg); }
#btnFs { left: 30px; top: 30px; color: #fff; }
#pic, #canv { position: absolute; bottom: 0; cursor: pointer; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=22595987" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/15/99/5e971eed3bc88_10s_big.mp4" autoplay loop muted></video>
<video class="qk-vid" src="https://video.699pic.com/videos/21/93/35/b_zKTGpvWIvcWw1627219335_10s.mp4" autoplay loop muted></video>
<div id="ma" class="sepia">
<div class="son"></div>
<div class="son"></div>
</div>
<img id="pic" src="https://pic1.imgdb.cn/item/689761a358cb8da5c815420c.gif" alt="" />
<canvas id="canv" width="365" height="280"></canvas>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
const ctx = canv.getContext('2d');
window.onload = () => ctx.drawImage(pic, 0, 0, 365, 280);
const mState = () => {
if (aud.paused) {
canv.style.opacity = 1;
pic.style.opacity = 0;
} else {
canv.style.opacity = 0;
pic.style.opacity = 1;
}
};
aud.onplaying = aud.onpause = () => mState();
canv.onclick = () => ma.click();
canv.title = ma.title;
</script> 想找张惠妹的没找到，葛兰的也挺好，据说是原唱。
熊猫视频直接用的封装里的配置感觉图像很淡啊。谢谢黑黑代码{:4_187:} 我没听过个葛兰的歌，唱得很好。 欣赏才管精彩制作，美的视听感受，学习点赞。问好辛苦了{:4_187:}
画面有点神秘感，前面的这个图案很搞笑。赞！{:4_187:} 葛兰的歌没有听过，是美声唱法吗？ 小播有二只吗？右上角的小花和前面的都会暂定的。 影子作品太赞了，呈现一场豪华演唱会。。
小播换了背景色，更显素净。。小动画弹琴场景，与背景契合。。{:4_199:}
视频用了两个，下方灯光和舞台人物演唱，舞台人物演唱缩小至45，放在正中央，像是大荧幕，更接近真实场景。。
影子作品构思巧妙。。实现手法特别完美。。{:4_199:} 有意境，一场豪华演唱会，谢谢影子精彩分享{:4_204:} 梦油 发表于 2025-8-10 16:53
我没听过个葛兰的歌，唱得很好。
这首歌挺有趣的{:4_173:} 傲雷影儿 发表于 2025-8-10 17:03
欣赏才管精彩制作，美的视听感受，学习点赞。问好辛苦了
感谢影儿鼓励，晚上好{:4_187:} 梦江南 发表于 2025-8-10 17:23
画面有点神秘感，前面的这个图案很搞笑。赞！
找了个小图，觉得好玩就用上了。
试验时好像暂停还能停止，现在发出来好像暂停时图片消失了？@马黑黑 梦江南 发表于 2025-8-10 17:24
葛兰的歌没有听过，是美声唱法吗？
我也不知道，另一个人的网易云没有，就找了这个{:4_173:} 梦江南 发表于 2025-8-10 17:27
小播有二只吗？右上角的小花和前面的都会暂定的。
是的，这个是套用黑黑的代码的，黑黑的代码就是两个都能控制暂停{:4_173:} 花飞飞 发表于 2025-8-10 18:02
影子作品太赞了，呈现一场豪华演唱会。。
小播换了背景色，更显素净。。小动画弹琴场景，与背景契合。。{: ...
谢谢飞飞，飞飞看得真仔细，把一些调整都提了呢，看到你的回复开心，有种特别希望你看到的感觉{:4_187:} 花飞飞 发表于 2025-8-10 18:05
视频用了两个，下方灯光和舞台人物演唱，舞台人物演唱缩小至45，放在正中央，像是大荧幕，更接近真实场景。 ...
黑黑的qk-和pd- 在封装里都有，这样真方便，想用不同大小的视频也可以选两个地方的来弄了呢{:4_173:} 杨帆 发表于 2025-8-10 19:03
有意境，一场豪华演唱会，谢谢影子精彩分享
谢谢杨帆鼓励，问好{:4_187:} 小播的设计很漂亮 红影 发表于 2025-8-10 23:11
谢谢杨帆鼓励，问好
好像动图大小不可控？