【花潮贺岁】2026春节晋城龙马湖彩灯
本帖最后由 杨帆 于 2026-2-15 23:55 编辑 <br /><br /><!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>2026春节晋城龙马湖彩灯</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
<style type="text/css">
#oBlk {margin-left:calc(50% - 721px);width:1280px;height:760px;background:var(--bg1),var(--bg2);--bg1:url('https://pic1.imgdb.cn/item/69916bfa1bd2de2ccc6f2ea4.gif') no-repeat center/cover;--bg2:url('https://pic1.imgdb.cn/item/6991d86e1bd2de2ccc6f3b43.jpg') no-repeat center/cover;box-shadow:3px 3px 6px gray;overflow:hidden;--display:block;z-index:1;--state:running;position:relative;border-radius:32px;}
#aniImg {width:100%;height:100%;position:absolute;overflow:hidden;border-radius:16px;animation-duration:2s;border-radius:24px;z-index:5;}
#mdiv-container {width:250px;height:250px;border-radius:50%;overflow:hidden;position:absolute;right:3%;top:3%;z-index:10;animation:sway .8s linear infinite alternate var(--state);cursor:pointer;--dance-duration:.5s;--dance-rotate:5deg;}
#mdiv {width:100%;height:100%;object-fit:cover;--color:teal;}
#mdiv-container:hover {transform:scale(1.1, 1.1);filter:brightness(2);animation-play-state:paused;--opacity:.8;opacity:var(--opacity);transition:1s; }
@keyframes sway {0% {transform:rotate(-2deg);} 100% {transform:rotate(2deg);}}
#vid1 {position:absolute;width:100%;height:100%;object-fit:fill;border-radius:32px;z-index:5;mix-blend-mode:screen;mask:linear-gradient(to right top, red 0%, transparent 90%, transparent);-webkit-mask:linear-gradient(to right top, red 0%, transparent 90%, transparent);pointer-events:none;}
#fullscreen {position:absolute;top:5%;left:5%;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;user-select:none;z-index:98;transition:opacity 0.5s ease;}
#fullscreen:hover {font-style:italic;}
</style>
<div id="oBlk">
<div id="mdiv-container"><video id="mdiv" src="https://cccimg.com/view.php/a3c05a7276739dae82a4af82b4af6fbb.mp4" autoplay loop muted=""></video></div>
<audio id="aud" src="https://upfile.mp3.wf/view.php/5fa5a873b737cb619f682b7fefaeff12.mp3" autoplay loop></audio>
<img id="aniImg" class="animate__animated animate__fadeIn" src="https://pic1.imgdb.cn/item/69916bfa1bd2de2ccc6f2ea1.jpg">
<video id="vid1" src="https://img.tukuppt.com/video_show/2418175/00/02/20/5b51f6ceb2cde.mp4" autoplay loop muted=""></video>
<span id="fullscreen">全屏欣赏</span>
</div>
<script type="text/javascript">
var imgs = ["https://pic1.imgdb.cn/item/69916bfa1bd2de2ccc6f2ea1.jpg","https://pic1.imgdb.cn/item/69916bfa1bd2de2ccc6f2ea2.jpg","https://pic1.imgdb.cn/item/69916bfa1bd2de2ccc6f2ea0.jpg","https://pic1.imgdb.cn/item/69916bfa1bd2de2ccc6f2ea3.jpg","https://pic1.imgdb.cn/item/69916c3b1bd2de2ccc6f2ead.jpg","https://pic1.imgdb.cn/item/69916c3b1bd2de2ccc6f2eaf.jpg","https://pic1.imgdb.cn/item/69916c3b1bd2de2ccc6f2eb0.jpg","https://pic1.imgdb.cn/item/69916c3b1bd2de2ccc6f2eae.jpg","https://pic1.imgdb.cn/item/69916c3b1bd2de2ccc6f2eb1.jpg"];
const animationClasses = ["animate__bounce","animate__flash","animate__pulse","animate__rubberBand","animate__shakeX","animate__shakeY","animate__headShake","animate__swing","animate__tada","animate__wobble","animate__backInDown","animate__backInLeft","animate__backInRight","animate__backInUp","animate__bounceIn","animate__bounceInDown","animate__fadeIn","animate__fadeInDown","animate__fadeInLeft","animate__fadeInRight","animate__fadeInUp","animate__zoomIn","animate__zoomInDown","animate__zoomInLeft"];
var imgIdx = 0;
const aniImg = document.getElementById('aniImg');
const aud = document.getElementById('aud');
const mdivcontainer = document.getElementById('mdiv-container');
const mdiv = document.getElementById('mdiv');
let carouselInterval = null;
function nextImage() {
imgIdx = (imgIdx + 1) % imgs.length;
aniImg.src = imgs;
const randomAni = animationClasses;
aniImg.className = `animate__animated ${randomAni}`;
}
aud.addEventListener('play', function() {
oBlk.style.setProperty('--bg1','');
oBlk.style.setProperty('--bg2','none');
vid1.play();mdiv.play();
if (carouselInterval) {
clearInterval(carouselInterval);
}
aniImg.style.animationPlayState = 'running';
mdiv.title = '暂停';
mdiv.style.setProperty('--state', 'running');
carouselInterval = setInterval(nextImage, 3000);
});
aud.addEventListener('pause', function() {
oBlk.style.setProperty('--bg2','');
oBlk.style.setProperty('--bg1', 'none');
vid1.pause();mdiv.pause();
if (carouselInterval) {
clearInterval(carouselInterval);
carouselInterval = null;
}
aniImg.style.animationPlayState = 'paused';
mdiv.title = '播放';
mdiv.style.setProperty('--state', 'paused');
});
mdivcontainer.onclick = function() {
if (aud.paused) {
aud.play();
} else {
aud.pause();
}
};
mdiv.title = '暂停';
mdiv.style.setProperty('--state', 'running');
['contextmenu', 'dragstart','selectstart'].forEach(type =>
document.getElementById('oBlk').addEventListener(type, e => e.preventDefault())
);
let fs=true;
let fsTimer;
fullscreen.onclick=()=>{
fs?(fullscreen.innerText='退出全屏',oBlk.requestFullscreen()):(fullscreen.innerText='全屏欣赏',document.exitFullscreen());
fs=!fs;
};
oBlk.addEventListener('mousemove',()=>{
clearTimeout(fsTimer);
fullscreen.style.opacity='1';
fsTimer=setTimeout(()=>{
fullscreen.style.opacity='0';
},3000);
});
</script>
</body>
</html>
小辣椒沙发 感觉杨帆喜欢玩视频，热闹的气氛，音乐好听 感觉右上角这个视频还是不要好，整体还协调一点，{:4_189:} 欣赏杨帆的精彩制作，感谢杨帆的精彩分享 小辣椒 发表于 2026-2-15 23:00
感觉杨帆喜欢玩视频，热闹的气氛，音乐好听
是，鼓捣着玩呢，祝福小辣椒新春快乐，马年大吉，青春永驻{:4_204:} 也是祝杨帆新的一年心想事成！想啥有啥，钱钱多多，幸福多多，快乐多多，身体棒棒~~~{:4_205:} 小辣椒 发表于 2026-2-15 23:02
感觉右上角这个视频还是不要好，整体还协调一点，
那是个按钮，也可换成别的{:4_173:} 杨帆 发表于 2026-2-15 23:06
那是个按钮，也可换成别的
当按钮还可以设置小一点 杨帆 发表于 2026-2-15 23:03
是，鼓捣着玩呢，祝福小辣椒新春快乐，马年大吉，青春永驻
杨帆现在玩代码进步很快哦{:4_199:} 很热闹喜庆的制作，很赞。
欣赏扬帆好帖{:4_199:} 小辣椒 发表于 2026-2-15 23:09
当按钮还可以设置小一点
是，刚换了一个烟花视频{:4_173:} 小辣椒 发表于 2026-2-15 23:10
杨帆现在玩代码进步很快哦
纯玩~谢谢鼓励，这是用的年轻老师的代码呦{:4_173:} 红影 发表于 2026-2-15 23:14
很热闹喜庆的制作，很赞。
欣赏扬帆好帖
谢谢鼓励，祝福影子新春快乐，马年大吉，青春永驻{:4_204:} 照片拍摄的特别清晰，色彩还原很漂亮，喜欢！祝扬帆马年吉祥平安，顺心顺意，快乐每一天！{:4_204:}{:4_190:} 霜染枫丹 发表于 2026-2-16 00:08
照片拍摄的特别清晰，色彩还原很漂亮，喜欢！祝扬帆马年吉祥平安，顺心顺意，快乐每一天！{:4_190 ...
谢谢枫丹老师雅评，祝福新春快乐，马年大吉，开心天天{:4_204:} https://img0.baidu.com/it/u=3388018952,3605066936&fm=253&fmt=auto&app=138&f=GIF?w=500&h=307 杨帆 发表于 2026-2-15 23:23
谢谢鼓励，祝福影子新春快乐，马年大吉，青春永驻
问好扬帆，除夕快乐{:4_187:} 很有年味儿的好贴，祝福杨帆老师除夕快乐！心想事成{:4_187:} 也曾年轻 发表于 2026-2-16 07:53
谢谢年轻老师的代码与鼓励，祝福新春快乐，马年大吉{:4_204:}
页:
[1]
2