我的祖国

杨帆发表于 2026-9-5 18:30

本帖最后由杨帆于 2026-9-16 14:03 编辑 <br /><br /><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<metaname="referrer" content="never">
<title>我的祖国</title>
<style>
#papa { background: url('https://ln2018.oss-cn-hangzhou.aliyuncs.com/2026/1/bj.png') 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; opacity:1;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;z-index:1;pointer-events:none;object-fit:cover;object-position:center;left:-10%;top:-10%;width:120%;height:120%;opacity:0.2;mix-blend-mode:screen;mask:linear-gradient(to bottom,red 10%,transparent 28%);-webkit-mask:linear-gradient(to bottom,red 10%,transparent 28%);}
#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://i.uik.cc/view.php/72f1e0b2d7c8e788fe435d93ea674bc4.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="vid1" src="https://img2.tukuppt.com/video_show/2414777/00/02/18/5b52d56cc6aff.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));
fullscreen.innerText = '退出全屏';
}else{
document.exitFullscreen();
fullscreen.innerText = '全屏欣赏';
}
fs = !fs;
};
window.addEventListener('load', () => {pc();
});
['contextmenu', 'dragstart','selectstart'].forEach(type =>
papa.addEventListener(type, e => e.preventDefault())
);
</script>
</body>
</html>

杨帆发表于 2026-9-5 18:33

本帖最后由杨帆于 2026-9-5 18:49 编辑

青年女高音歌唱家龚爽，

湖北十堰人，金钟奖金奖得主，深耕民族声乐与原创歌剧舞台，留下《我的祖国》《三月桃花心中开》等动人作品。

2026 年 9 月 4 日因病离世，终年 37 岁。音容虽远，歌声永存……

梦江南 发表于 2026-9-5 18:50

好制作，好歌声，谢谢杨帆精彩分享。{:4_187:}

偶然~ 发表于 2026-9-5 18:51

来欣赏杨帆老师的精品佳作！

偶然~ 发表于 2026-9-5 18:51

制作大气！

偶然~ 发表于 2026-9-5 18:51

太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然献花给你啦】

偶然~ 发表于 2026-9-5 18:51

期待杨帆老师佳作频出！

梦江南 发表于 2026-9-5 18:52

杨帆发表于 2026-9-5 18:33
青年女高音歌唱家龚爽，

湖北十堰人，金钟奖金奖得主，深耕民族声乐与原创歌剧舞台，留下《我的祖国》《 ...

龚爽这么年轻就走了，太可惜了！祝她在天堂安好！

偶然~ 发表于 2026-9-5 18:52

感谢杨帆老师带来的精彩，辛苦了！八月悄然过去，九月秋意渐浓，早晚添衣别着凉，祝您身体健康，日日舒心。

杨帆发表于 2026-9-5 20:42

梦江南发表于 2026-9-5 18:52
龚爽这么年轻就走了，太可惜了！祝她在天堂安好！

是，龚爽唱的歌挺有功夫的。

韶华虽逝，余音长存，愿歌声永留人间，一路走好。

杨帆发表于 2026-9-5 20:44

偶然~ 发表于 2026-9-5 18:51
来欣赏杨帆老师的精品佳作！

问好偶然~，谢谢雅评、鼓励与祝福，同祝兄弟康乐舒心{:4_190:}

偶然~ 发表于 2026-9-5 20:53

杨帆发表于 2026-9-5 20:44
问好偶然~，谢谢雅评、鼓励与祝福，同祝兄弟康乐舒心

愿杨帆老师身体健康如常青树，笑容灿烂如春日花！

霜染枫丹 发表于 2026-9-5 20:54

杨帆晚上好~~

天妒英才，应了那句话：不知道幸运和意外谁先到。愿我们都敬畏生命，热爱生活，珍惜当下！祝杨帆吉祥安康~~{:4_204:}{:4_190:}

杨帆发表于 2026-9-5 21:19

本帖最后由杨帆于 2026-9-5 21:21 编辑

霜染枫丹发表于 2026-9-5 20:54
杨帆晚上好~~

天妒英才，应了那句话：不知道幸运和意外谁先到。愿我们都敬畏生命，热爱生活，珍惜当下！ ...
认同、共勉：敬畏生命，珍惜当下，热爱生活，经历体验，物我两忘。

谢谢枫丹老师雅评与祝福，同祝康乐舒心{:4_187:}

玫瑰发表于 2026-9-5 21:46

制作精彩，歌词祖国{:4_204:}

夕阳黄昏 发表于 2026-9-5 21:55

欣赏美帖！大赞！

红影发表于 2026-9-5 22:22

很精美的制作，欣赏扬帆好帖，共同缅怀青年歌唱家龚爽{:4_187:}

杨帆发表于 2026-9-5 22:44

玫瑰发表于 2026-9-5 21:46
制作精彩，歌词祖国

问好玫瑰，谢谢鼓励{:4_204:}

杨帆发表于 2026-9-5 22:45

夕阳黄昏发表于 2026-9-5 21:55
欣赏美帖！大赞！

谢谢老师鼓励，请多指导{:4_190:}

杨帆发表于 2026-9-5 22:50

红影发表于 2026-9-5 22:22
很精美的制作，欣赏扬帆好帖，共同缅怀青年歌唱家龚爽

问好影子，谢谢鼓励{:4_187:}

缅怀青年歌唱家龚爽，那些滚烫的歌声，会永远留在岁月里。

页: [1] 2

花潮论坛's Archiver

我的祖国