《国色天香》（学习黑黑《竹间语》代码效果）
<style>#tz { margin: 30px 0 30px calc(50% - 593px);width: 1024px; height: 640px; background: lightblue; box-shadow: 3px 3px 6px rgba(0,0,0,.6); overflow: hidden; user-select: none; z-index: 3; perspective: 2000px; position: relative; }
#tz::after {content: attr(data-lrc); position: absolute; bottom: 20px; width: 100%; height: 60px; text-align: center; font: normal 36px/60px sans-serif; color: transparent;text-shadow: 2px 2px 2px rgba(210,105,30,.8);background: radial-gradient(cyan, white, orange) center/120px 60px; -webkit-background-clip: text;}
#player { position: absolute; left: calc(50% - 23px); bottom: 90px; width: 45px; height: 45px; border-radius: 50%; border: thick groove; border-color: #FFD700 #00FF00 #FFD700 #00FF00; display: grid; place-items: center; transition: .8s; --opt: 1; }
#player::before, #player::after { position: absolute; content: '';width: 20px; height: 20px; background: orange; transition: .3s; cursor: pointer; }
#player::before { clip-path: polygon(0 0, 0 100%, 100% 50%); opacity: calc(var(--opt) * 1); background: cyan; }
#player::after { mask: linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0); -webkit-mask: linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0); opacity: calc(1 - var(--opt)); }
#player:hover { transform: scale(1.1); filter: invert(.3) drop-shadow(0 0 10px snow); }
#picbox { position: absolute; opacity: .9; border-radius: 20px; transform-style: preserve-3d; cursor: pointer; }
.vid { position: absolute; bottom: 0px; width: 100%; height: calc(100% + 55px); object-fit: cover; pointer-events: none; }
.vid:nth-of-type(2) { height: 100%; height: 100%; mix-blend-mode: screen; opacity: .1; }
</style>
<div id="tz" class="tz" data-lrc="HUACHAO">
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/04/5b4f6fcd99400_10s_big.mp4" autoplay loop muted disablePictureInPicture></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/07/99/5d149ee9eae95_10s_big.mp4" autoplay loop muted disablePictureInPicture></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1876950445" autoplay loop></audio>
<img id="picbox" src="" alt="" />
<div id="player"></div>
</div>
<script>
(function() {
const pics = [
'https://pic.imgdb.cn/item/6677aaf1d9c307b7e93dc853.png',
'https://pic.imgdb.cn/item/6677ab9dd9c307b7e93f1189.png',
'https://pic.imgdb.cn/item/6677c575d9c307b7e970a82e.png',
'https://pic.imgdb.cn/item/6677c606d9c307b7e971bf34.png',
'https://pic.imgdb.cn/item/6677c699d9c307b7e972d7dc.png',
'https://pic.imgdb.cn/item/6677c722d9c307b7e973d4c8.png',
'https://pic.imgdb.cn/item/6677fa4bd9c307b7e9d6fe21.png',
'https://pic.imgdb.cn/item/6677f860d9c307b7e9d3a69d.png',
'https://pic.imgdb.cn/item/667b914cd9c307b7e9ea75b4.png',
'https://pic.imgdb.cn/item/667b91afd9c307b7e9eb142c.png',
];
let ani, ar = [], idx = 0;
const loadImages = async urls => {
const promises = [];
for (let url of urls) {
promises.push(new Promise(resolve => {
const img = new Image();
img.onload = () => {
ar.push([`${img.src}`, `${img.naturalWidth}`, `${img.naturalHeight}`]);
resolve();
};
img.src = url;
}));
}
await Promise.all(promises);
showPic();
};
const showPic = () => {
let w1 = tz.offsetWidth, h1 = tz.offsetHeight, w2 = ar, h2 = ar;
let x = picbox.offsetWidth;
picbox.src = ar;
idx = (idx + 1) % pics.length;
const kfs = [
{left: `-${x}px`, top: `150px`},
{left: `${(w1 - w2) / 2}px`, top: `150px`, transform: `rotateY(0)`, offset: 0.1},
{transform: `rotateY(-25deg)`},
{transform: `rotateY(0)`},
{transform: `skewX(5deg)`},
{transform: `skewX(-3deg)`},
{transform: `scale(1.05)`},
{transform: `scale(0.95)`},
{transform: `rotateY(25deg)`},
{left: `${(w1 - w2) / 2}px`, top: `150px`, transform: `rotateY(0)`, offset: 0.9},
{left: `${x + w1}px`, top: `150px`,transform: `rotateY(-180deg) scale(0.9)`},
];
ani = picbox.animate(kfs, 10000);
ani.onfinish = () => showPic();
};
loadImages(pics);
picbox.onmouseover = () => { if(!aud.paused) ani.pause(); };
picbox.onmouseout = () => { if(!aud.paused) ani.play(); };
var curkey = 0, lrcAr = [], vids = document.querySelectorAll('.vid');
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
});
};
var mState = () => {
player.style.setProperty('--opt', +aud.paused);
player.title = ['暂停','播放'][+aud.paused];
vids.forEach(vid => aud.paused ? vid. pause() : vid.play());
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr) {
tz.dataset.lrc = lrcAr;
curkey ++;
}
};
player.onclick = () => aud.paused ? (aud.play(), ani.play()) : (aud.pause(), ani.pause());
var lrc = `
《国色天香》\n作词：孙铁麟 作曲：陈彤\n歌手：李玉刚\n学习黑黑彩色小播\n学习应用《竹间语》和《大湖》代码\n感谢黑黑指点和帮助\n月初升伶人上妆\n我描眉凤冠配霓裳\n水袖轻舞长歌似酒香\n长歌似酒香\n夜未央胡琴声扬\n弦温热人聚月倚墙\n一阕曲弹出多少真相\n国色天香\n满堂红名角登场\n我整装铠甲配银枪\n十八般武艺威风亮相\n云漫天搏风击浪\n战鼓擂喊声震天响\n刀光剑影里荡气回肠\n情不知所起一往而深牡丹亭\n将中显英豪斩关夺寨定军山\n一去人难见芳草天涯桃花扇\n单骑冲重围剑光如霜长坂坡\n情不知所起一往而深牡丹亭\n将中显英豪斩关夺寨定军山\n一去人难见芳草天涯桃花扇\n单骑冲重围剑光如霜长坂坡\n是谁说落幕就是散场\n我却忍不住一直思量\n是谁说旧戏文已泛黄\n我却当作是国色天香\n是谁说落幕就是散场\n我却忍不住一直思量\n是谁说旧戏文已泛黄\n我却当作是国色天香\n我却当作是国色天香
`;
getAr(lrc);
})();
</script> @马黑黑 跟着学了个彩色小播的效果，还把《大湖》里的图片轮流进入和调整的方法学习了一下。
谢谢黑黑代码{:4_187:} 整了半天，把人物图片弄得可以暂停了，还加了歌词。
还存在一个问题，貌似小图不是按次序出来的。应该是 let idx = Math.floor(Math.random() * pics.length);
的设定吧，不知道怎么改了{:4_173:} 本来想拿掉鼠标触碰就人物暂停，想想还是留着吧，想仔细看也可以看看了{:4_173:} 这个好：设计新颖，实现方法独到，美感十足。 这国色天香只给看看个剪影片片啊{:5_117:} 这个帖子，CSS代码中，#tz 选择器应将不需要的代码去掉，改为：
#tz { left: 50%; transform: translateX(calc(-50% - 81px)); width: 1024px; height: 640px; background: lightblue; box-shadow: 3px 3px 6px rgba(0,0,0,.6); overflow: hidden; user-select: none; z-index: 3; perspective: 2000px; position: relative; }
红色部分，先设定 left 的值为 50%，然后再将它反向移动一定距离，其中的 81px 适用于花潮论坛（不同论坛这个偏移系数不一样）。 收了：http://mhh.52qingyin.cn/art/bshow.php?st=6&sd=6&art=mahei_1719142567 制作精美，给一个大大的赞！ 这个图片不是从四周随机出来的，全部从左边入场，更符合舞台效果。。。
中间暂停，真实模拟模特上场时动态
随着场景而设计的动画
影子如果整动画设计，肯定创意也是一流。
非常棒的作品。。。{:4_199:} 代码是真的一流，无论是出场，暂停到结束，都非常符合合情合理，时间恰到好处。。{:4_187:}
用了今天的最新的小播效果，
还加了歌词，
图片转场几种特效完美结合在一起，
整贴效果绝佳，
大赞。。{:4_199:} 马黑黑 发表于 2024-6-23 19:34
这个好：设计新颖，实现方法独到，美感十足。
休息天，一起看看美女剪映乐呵一下{:4_173:} 起个网名好难 发表于 2024-6-23 19:40
这国色天香只给看看个剪影片片啊
看看身姿就好啊，万一侵犯了美女的肖像权了咋办{:4_173:} 马黑黑 发表于 2024-6-23 19:47
这个帖子，CSS代码中，#tz 选择器应将不需要的代码去掉，改为：
#tz { left: 50%; transform: translate ...
嗯嗯，我还是习惯性按照以前的自己算出的值去设定了{:4_173:} 梦油 发表于 2024-6-23 19:52
制作精美，给一个大大的赞！
谢谢梦油，一起看美女走秀{:4_173:} 南无月 发表于 2024-6-23 20:57
这个图片不是从四周随机出来的，全部从左边入场，更符合舞台效果。。。
中间暂停，真实模拟模特上场时动态 ...
嗯嗯，从四周出来太折腾美女了，怕美女投诉。
创意什么的也没什么啊，就是想跟着学习一下如何调整小图的动作。谢谢月儿鼓励{:4_187:} 南无月 发表于 2024-6-23 20:58
代码是真的一流，无论是出场，暂停到结束，都非常符合合情合理，时间恰到好处。。
其实基本是套用大湖的代码呢，只修改了少部分{:4_173:} 南无月 发表于 2024-6-23 21:00
用了今天的最新的小播效果，
还加了歌词，
图片转场几种特效完美结合在一起，
原来就想去做那个图片转场了，一直没时间，今天看到新的小播，正好合一起一块去试验和学习了{:4_173:} 马黑黑 发表于 2024-6-23 19:49
收了：http://mhh.52qingyin.cn/art/bshow.php?st=6&sd=6&art=mahei_1719142567
哇，太荣幸了，谢谢黑黑{:4_187:}