王朝博 - 心雨（雷鬼版）视频羽化合成
本帖最后由 亚伦影音工作室 于 2026-5-22 21:01 编辑 <br /><br /><style>#papa { margin: 10px -300px ; width: 1186px; height: 620px;background:#800000; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #800000; position: relative; z-index: 10000; overflow:hidden;border-radius: 0px 0px;--state: running;/* 示例混合模式 */}
#vid{width: 100%; height: 100%;z-index: 1;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}
#vid1{width: 100%; height: 100%;z-index: 2;
position:absolute;-webkit-mask-image: radial-gradient(farthest-corner at 5% -35%, black 55%, transparent 70%);
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}
#wrapper {
position: absolute;
padding: 10px;
font-weight:100;font-size:2.6em;font-family: "华文隶书";
filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
writing-mode: vertical-lr;white-space: pre;transform: translateX(-50%);text-align: center;
width: 60px;height:90%;left: 8%;z-index: 120;
top: 2%;white-space: nowrap;
}
.char {
display: inline;
padding: 4px 0px;
opacity: 0;
transform: translate(var(--x), var(--y));
animation: fadeIn 1.5s var(--delay) forwards,flash 0.5s linear infinite;
}
@keyframes fadeIn {
100% {
transform: translate(0, 50%);
opacity: 1;
}
}
@keyframes flash {
100% {filter: hue-rotate(360deg);}
}
.stop .char{animation-play-state: paused;}
#player {position:absolute;top: 82%;z-index: 98;
left: 90%;
width: 100px;
height: 100px;
display: grid;
place-items: center;
animation: rot 8s linear infinite ;
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
width: 30%;
height: 30%;
display: grid;
place-items: center;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);
}
#rect:nth-of-type(1) { background:#880000;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#eee;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px; bottom:22px; cursor: pointer;right:94%;z-index: 140;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="papa">
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6771e89c5a7330b8a5cda60a86c5eeb5_preview.mp4" loop muted autoplay=""></video>
<video id="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/754124a7b5eb3e4c67fec1dc6dd47803_preview.mp4" loop muted autoplay=""></video>
<div id="testImg" >
<div id="wrapper"></div>
</div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
<audio id="aud"autoplay loop >
<source src="https://www.aax.cx/plug/down.php?ac=music&id=03b8a1792639bd6dcd47c22e6744403c&.mp3" type="audio/mpeg">
</audio>
</div>
<script>
player.onclick = () => aud.paused ? (aud.play(),vid.play(),vid1.play(),player.style.animationPlayState = 'running',image.classList.remove('stop')) : (aud.pause(),vid.pause(),vid1.pause(),player.style.animationPlayState = 'paused',image.classList.add('stop'));
image=document.getElementById('testImg');
let fs= true;
fullscreen.onclick = () => {
fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
fs = !fs;
}
</script>
<script>
const gc = `王朝博 - 心雨（雷鬼版）
我的思念
是不可触摸的网
我的思念
不再是决堤的海
为什么总在
那些飘雨的日子
深深的把你想起
我的心是六月的情
沥沥下着心雨
想你想你想你想你
最后一次想你
因为明天
我将成为别人的新娘
让我最后一次想你
我的思念
是不可触摸的网
我的思念
不再是决堤的海
为什么总在
那些飘雨的日子
深深的把你想起
我的心是六月的情
沥沥下着心雨
想你想你想你
最后一次想你
因为明天
我将成为别人的新娘
让我最后一次想你
我的思念
是不可触摸的网
我的思念
不再是决堤的海
为什么总在
那些飘雨的日子
深深的把你想起
深深的把你想起
未经许可,不得翻唱或使用
`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
aud.onended = () => {
curkey = 0;
aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr ? lrcAr : ;
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (aud.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
if (curkey < 0) curkey = 0;
if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
let time = gcAr?. ?? 0 - gcAr;
isSeeking = false;
showLrc(gcAr, wrapper, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.innerHTML = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? 300 : -300);
const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
span.style.cssText += `
color: #${Math.random().toString(10).substring(2,8)};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}
</script>
合成自然，效果逼真，欣赏学习亚伦老师新探索{:4_190:} 这两个视频融合得很巧妙，漂亮。
欣赏亚伦老师好帖{:4_199:} 欣赏亚纶精彩的制作，亚纶会动脑子，各种效果出来{:4_199:} closest-side 欣赏佳作，问候亚伦。
页:
[1]