大梦 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

杨帆发表于 2026-8-25 11:53

大梦

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>大梦</title>
<style>
#papa { margin: 130px 0; left: calc(50% - 81px); transform: translateX(-50%); width: 1280px; height:750px; box-shadow: 2px 2px 8px #000; overflow: hidden;--state:running;z-index:1; position: relative;}
.vid { position: absolute; width: 100%; height: 100%;z-index:1; object-fit: cover;}
#mutedbnt{ position:absolute; z-index: 10; width: 100px; height: 100px; bottom: 8%; left: 88%; cursor: pointer;}
#fullscreen { position: absolute; width:340px; height: 210px; right:0; top:0; cursor: pointer; z-index: 10;}
.loop-img-container{position:absolute;left:5%;top:5%;width:100%;height:100%;z-index:2;animation:totalCycle 65s infinite linear;animation-play-state:var(--state);}
@keyframes totalCycle{0%,100%{transform:translate(0);}}
.loop-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;object-fit:cover;opacity:0;mask:url("https://pic1.imgdb.cn/i/0348v2wqq8phgSqDTOEli1.png") no-repeat -3% -1%/20% 20%;-webkit-mask:url("https://pic1.imgdb.cn/i/0348v2wqq8phgSqDTOEli1.png") no-repeat -3% -1%/20% 20%;transition:opacity 0.4s ease;animation:16s infinite cubic-bezier(0.34,1.56,0.64,1);transform:translateZ(0);background-blend-mode:soft-light;backface-visibility:hidden;animation-play-state:var(--state);}
@keyframes img1Anim{0%{opacity:0;transform:rotateY(180deg) scale(0.8);}15%{opacity:1;transform:rotateY(0) scale(1);}75%{opacity:1;transform:rotateY(0) scale(1);}90%{opacity:0;transform:rotateY(-180deg) scale(0.8);}100%{opacity:0;}}
@keyframes img2Anim{0%{opacity:0;transform:scale(0.5);filter:saturate(0);}15%{opacity:1;transform:scale(1);filter:saturate(1.2);}25%{transform:scale(1.05);}35%{transform:scale(1);}75%{opacity:1;transform:scale(1);filter:saturate(1.2);}90%{opacity:0;transform:scale(0.5);filter:saturate(0);}100%{opacity:0;}}
@keyframes img3Anim{0%{opacity:0;clip-path:circle(0% at center);}15%{opacity:1;clip-path:circle(50% at center);}75%{opacity:1;clip-path:circle(50% at center);}90%{opacity:0;clip-path:circle(0% at center);}100%{opacity:0;}}
@keyframes img4Anim{0%{opacity:0;transform:translateX(-100%) skewX(-15deg);}10%{transform:translateX(-50%) skewX(10deg);}15%{opacity:1;transform:translateX(0) skewX(0);}75%{opacity:1;transform:translateX(0) skewX(0);}85%{transform:translateX(50%) skewX(-10deg);}90%{opacity:0;transform:translateX(100%) skewX(15deg);}100%{opacity:0;}}
@keyframes img5Anim{0%{opacity:0;filter:drop-shadow(0 0 20px rgba(255,255,255,0)) brightness(0);}5%{opacity:0.3;filter:drop-shadow(0 0 20px rgba(255,255,255,0.8)) brightness(1.5);}10%{opacity:0.7;filter:drop-shadow(0 0 10px rgba(255,255,255,0.5)) brightness(1.2);}15%{opacity:1;filter:drop-shadow(0 0 5px rgba(255,255,255,0.3)) brightness(1);}75%{opacity:1;filter:drop-shadow(0 0 5px rgba(255,255,255,0.3)) brightness(1);}85%{opacity:0.3;filter:drop-shadow(0 0 20px rgba(255,255,255,0.8)) brightness(1.5);}90%{opacity:0;filter:drop-shadow(0 0 20px rgba(255,255,255,0)) brightness(0);}100%{opacity:0;}}
.img1{animation-name:img1Anim;animation-delay:0s;}
.img2{animation-name:img2Anim;animation-delay:13s;}
.img3{animation-name:img3Anim;animation-delay:26s;}
.img4{animation-name:img4Anim;animation-delay:39s;}
.img5{animation-name:img5Anim;animation-delay:52s;}
#mplayer{position:absolute;text-align:center;top:90%;transform:translate(-50%);left:50%;z-index:30;font-size:18px;color:#0066CC;}
#mplayer::before{position:absolute;content:attr(data-tt);left:0;bottom:25px;width:100%;text-align-last:justify;}
#mprog{width:500px;height:3px;accent-color:darkgreen;outline:none;cursor:pointer;}
.time-display { position: absolute; left:13%;top:13%; transform: translateX(-50%); z-index: 20; font-size: 25px; font-weight: 400; font-family: '华文楷体', 'KaiTi', '楷体', 'STKaiti', serif; letter-spacing: 1px; pointer-events: none; background: linear-gradient( 135deg, #ff0000, #ff7700, #ffff00, #00ff00, #0000ff, #8b00ff, #ff00ff ); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: rainbowMove 4s ease-in-out infinite alternate; text-shadow: 0 0 30px rgba(255, 255, 255, 0.1); filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.2)); }
@keyframes rainbowMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.time-display.stop { animation-play-state: paused; }
</style>
</head>
<body>
<div id="papa">
<div class="time-display" id="timeDisplay">00:00 / 00:00</div>
<img src="https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif" id="mutedbnt" onClick="pc()" title="播放/暂停"/>
<img id="fullscreen" src="https://ftp.waasaa.com/2023/09/1695449513-20230923141153561.jpg"title="全屏切换" />
<video class="vid" src="https://ftp.waasaa.com/2023/09/1695449522-20230923141202454.mp4" autoplay loop preload="auto" playsinline muted></video>
<div id="mplayer" data-tt="00:00 00:00"><input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度"/></div>
<div class="loop-img-container">
         <img src="https://638183.freep.cn/638183/t24/w8/aj.webp" loading="lazy" class="loop-img img1" />
         <img src="https://pic1.imgdb.cn/i/033qLRjUbUaOoAC18kMCnC.png" loading="lazy" class="loop-img img2" />
         <img src="https://638183.freep.cn/638183/t24/w8/ulll.jpg" loading="lazy" class="loop-img img3" />
         <img src="https://638183.freep.cn/638183/t24/w8/gvwl.webp" loading="lazy" class="loop-img img4" />
         <img src="https://pic1.imgdb.cn/item/69e46573f7aea953f2c4d490.jpg" loading="lazy" class="loop-img img5" />
   </div>
</div>
<script>
const papa = document.getElementById('papa');
var pic = document.getElementById("mutedbnt");
const vid = document.querySelector('.vid');
const fullscreenBtn = document.getElementById('fullscreen');
const mplayer = document.getElementById('mplayer');
const mprog = document.getElementById('mprog');
const timeDisplay = document.querySelector('.time-display');
function pc() {
if (!vid.muted) {
pic.src = "https://pic1.imgdb.cn/item/68e9c0c2c5157e1a886337ae.png";
vid.pause(); vid.muted = true; papa.style.setProperty('--state', 'paused');
timeDisplay.classList.add('stop');
} else {
pic.src = "https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif";
vid.play(); vid.muted = false; papa.style.setProperty('--state','running');
timeDisplay.classList.remove('stop');
}
var mseek = false;
let toMin = (val) => {
if(!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
vid.addEventListener('loadedmetadata', () => {
mplayer.dataset.tt = toMin(0) + ' ' + toMin(vid.duration);
});
vid.addEventListener('timeupdate', () => {
if(!vid.duration) return;
if(!mseek) mprog.value = (vid.currentTime / vid.duration) * 100;
mplayer.dataset.tt = toMin(vid.currentTime) + ' ' + toMin(vid.duration);
timeDisplay.textContent = `${toMin(vid.currentTime)} / ${toMin(vid.duration)}`;
});
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () => {
if (!vid.duration) return;
const targetTime = (mprog.value / 100) * vid.duration;
vid.currentTime = targetTime;
mprog.oninput = () => {
if(!vid.duration) return;
let currentTime = (mprog.value / 100) * vid.duration;
mplayer.dataset.tt = toMin(currentTime) + ' ' + toMin(vid.duration);
}
};
}
window.pc = pc;
let fs = true;
fullscreenBtn.onclick = ()=>{
if(fs){
papa.requestFullscreen().catch(e=>console.log(e));
}else{
document.exitFullscreen();
}
fs = !fs;
};
window.addEventListener('load', () => {pc();
});
['contextmenu', 'dragstart','selectstart'].forEach(type =>
papa.addEventListener(type, e => e.preventDefault())
);
</script>
</body>
</html>

杨帆发表于 2026-8-25 11:56

遮罩代码来自亚伦老师分享作品，视频素材来自忘记了老师分享作品，在此一并表示感谢{:4_190:}

梦油发表于 2026-8-25 14:15

欣赏杨帆朋友的大气制作，祝福杨帆朋友天天快乐。

梦江南 发表于 2026-8-25 16:49

制作精美，音画有特色，谢谢杨帆精彩分享。{:4_187:}

霜染枫丹 发表于 2026-8-25 18:14

欣赏扬帆的好制作，赞佩扬帆对代码的掌握炉火纯青，可繁可简，都恰到好处！{:4_204:}{:4_190:}

也曾年轻 发表于 2026-8-25 18:40

欣赏美帖！大赞！

杨帆发表于 2026-8-25 20:10

梦油发表于 2026-8-25 14:15
欣赏杨帆朋友的大气制作，祝福杨帆朋友天天快乐。

谢谢梦兄的祝福与鼓励，祝开心{:4_190:}

杨帆发表于 2026-8-25 20:11

梦江南发表于 2026-8-25 16:49
制作精美，音画有特色，谢谢杨帆精彩分享。

谢谢江南雅评与鼓励，祝开心{:4_204:}

杨帆发表于 2026-8-25 20:14

霜染枫丹发表于 2026-8-25 18:14
欣赏扬帆的好制作，赞佩扬帆对代码的掌握炉火纯青，可繁可简，都恰到好处！

只是喜欢鼓捣而已，枫丹老师过奖了，祝开心{:4_187:}

杨帆发表于 2026-8-25 20:15

也曾年轻发表于 2026-8-25 18:40
欣赏美帖！大赞！

谢谢鼓励，请多指导，祝年轻老师开心{:4_190:}

梦江南 发表于 2026-8-25 20:15

杨帆发表于 2026-8-25 20:11
谢谢江南雅评与鼓励，祝开心

佩服杨帆这么会捣鼓。{:4_204:}

杨帆发表于 2026-8-25 21:01

梦江南发表于 2026-8-25 20:15
佩服杨帆这么会捣鼓。

呵呵，要敢于鼓捣，鼓捣也添加乐趣呢{:4_204:}

红影发表于 2026-8-25 23:49

这制作真漂亮。欣赏扬帆好帖{:4_199:}

梦油发表于 2026-8-26 09:32

杨帆发表于 2026-8-25 20:10
谢谢梦兄的祝福与鼓励，祝开心

杨帆朋友别客气。

魏淑芬 发表于 2026-8-26 15:42

欣赏精美特效音画制作，点赞！{:4_178:}

杨帆发表于 2026-8-26 20:18

魏淑芬发表于 2026-8-26 15:42
欣赏精美特效音画制作，点赞！

谢谢淑芬老师点赞鼓励，祝开心{:4_204:}

页: [1]

花潮论坛's Archiver

大 梦

大梦