同阳光奔跑
<!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>同阳光奔跑</title>
<style>
#papa { background: url('https://pic1.imgdb.cn/item/687ba61258cb8da5c8c76f6c.jpg') no-repeat center/cover;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:2; object-fit: cover;mix-blend-mode: screen;-webkit-mask: linear-gradient(to right top, red 0%, transparent 95%, transparent);mask: linear-gradient(to right top, red 0%, transparent 95%, transparent);}
.vid1{position:absolute;top:0%;left:0%;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:0.5;z-index:1;pointer-events:none;}
.vid2 {position:absolute;z-index:1;pointer-events:none;object-fit:cover;object-position:center;left:-10%;top:-10%;width:120%;height:120%;mask:linear-gradient(to bottom,red 35%,transparent 58%);-webkit-mask:linear-gradient(to bottom,red 35%,transparent 58%);}
#mutedbnt{ position:absolute; z-index: 10; width: 100px; height: 100px; bottom: 10%; left:calc(70% + 30px); cursor: pointer;}
#fullscreen{ position: absolute; border-radius:4px;color:DarkGray; padding:4px 8px;z-index:12;font-size:25px;border:none; cursor:pointer;top:25px;left:25px;background:transparent;}
#fullscreen:hover{font-style:italic;}
#mplayer{position:absolute;text-align:center;top:90%;transform:translate(-50%);left:75%;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:450px;height:3px;accent-color:darkgreen;outline:none;cursor:pointer;}
.time-display { position: absolute; right:3%;top:5%; transform: translateX(-50%); z-index: 20; font-size: 35px; font-weight: 600; 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 8s 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="播放/暂停"/>
<div id="fullscreen">全屏欣赏</div>
<video class="vid" src="https://img2.tukuppt.com/video_show/6181262/01/23/94/6227521ea9bf5.mp4" autoplay loop preload="auto" playsinline muted></video>
<video class ="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0b04551c7ce54a3575277d93c0885dfc_preview.mp4" autoplay loop preload="auto" playsinline muted></video>
<video class="vid2" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1337588768.mp4" loop preload="auto" playsinline autoplay 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>
<script>
const papa = document.getElementById('papa');
var pic = document.getElementById("mutedbnt");
const vids = document.querySelectorAll('video')
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.muted = true; papa.style.setProperty('--state', 'paused');
timeDisplay.classList.add('stop');vids.forEach(vid =>vid.pause());
} else {
pic.src = "https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif";
vid.muted = false; papa.style.setProperty('--state','running');
timeDisplay.classList.remove('stop');vids.forEach(vid => vid.play());
}
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>
创意十足， 精彩分享 创意十足，精彩分享，视觉欣赏 今天听到的都是打鼓的音乐{:4_173:} 特效很棒{:4_199:} 欣赏学习。{:4_204:} 很积极向上的帖子，同阳光奔跑，努力做追梦人。
欣赏扬帆好帖{:4_199:} 欣赏美帖！ 大赞！ 虚虚实实、朦朦胧胧，很有新意。 玫瑰 发表于 2026-9-4 13:50
创意十足，
谢谢玫瑰鼓励，祝开心天天{:4_204:} 梦江南 发表于 2026-9-4 14:27
今天听到的都是打鼓的音乐
昭示江南好运连连呦，祝开心天天{:4_204:} 红影 发表于 2026-9-4 15:36
很积极向上的帖子，同阳光奔跑，努力做追梦人。
欣赏扬帆好帖
谢谢影子雅评与鼓励，祝开心{:4_204:} 夕阳黄昏 发表于 2026-9-4 16:30
欣赏美帖！ 大赞！
谢谢老师支持与鼓励，祝开心{:4_180:} 梦油 发表于 2026-9-4 19:50
虚虚实实、朦朦胧胧，很有新意。
谢谢梦兄雅评与鼓励，祝开心{:4_180:} 杨帆 发表于 2026-9-4 21:43
谢谢影子雅评与鼓励，祝开心
平时没有时间回帖，其实大家制作帖非常精彩。{:4_204:} 玫瑰 发表于 2026-9-4 21:46
平时没有时间回帖，其实大家制作帖非常精彩。
是，其实玫瑰才女更精彩{:4_204:} 杨帆 发表于 2026-9-4 21:49
是，其实玫瑰才女更精彩
多谢你的鼓励支持，我就是玩一下，学习一下，灌水又玩一下的。{:4_173:} 杨帆 发表于 2026-9-4 21:49
是，其实玫瑰才女更精彩
如果全部版块活跃了，我就灌水玩了， 玫瑰 发表于 2026-9-4 21:51
多谢你的鼓励支持，我就是玩一下，学习一下，灌水又玩一下的。
玩中学，学中玩，丰富业余生活挺好{:4_187:}
页:
[1]
2