论坛 › 人机音画视频 › 信仰-徐霞&马腾

万顷湖 发表于 2026-6-27 15:08

信仰-徐霞&马腾

本帖最后由 万顷湖 于 2026-8-21 15:25 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_27641">
<br /><br /><style>
#papa {margin: 10px -20px;
width: 1164px;
height: 640px;
background: linear-gra**nt(135deg, #880000 0%,#000080 60%,#ff0000 100%);
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%; opacity: 1;z-index: 2; background:linear-gra**nt(0deg, #000000 2%,#000000 8%,rgba(2, 2, 2, 0) 20%,rgba(52, 152, 219, 0) 100%,rgba(2, 2, 2, 0) 100%,black 100%);opacity: 1;}
#papa:hover #mb { display:block ;opacity: 1;}
.photo {width: 100%;
height: 100%;mix-blend-mode: hard-light;
position: absolute;z-index: 1;
top:0px; left:0;
opacity: 0;
animation: round 30s linear infinite;}
@keyframes round {0%{opacity: 0;}8% {opacity: 1;}25% {opacity: 0}}
.photo:nth-child(1) {animation-delay: 24s;background: url('https://free.picui.cn/free/2026/08/21/6a87fc401e774.jpg')no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 18s;background: url('https://free.picui.cn/free/2026/08/21/6a87fc18b9e43.jpg')no-repeat center/cover}
.photo:nth-child(3) {animation-delay: 12s;background: url('https://free.picui.cn/free/2026/08/21/6a87fbf353fc9.jpg')no-repeat center/cover}
.photo:nth-child(4) {animation-delay: 6s;background: url('https://free.picui.cn/free/2026/08/21/6a87fbb119ef0.jpg')no-repeat center/cover}
.photo:nth-child(5) {animation-delay: 0s;background: url('https://free.picui.cn/free/2026/08/21/6a87fcb9b5936.jpg')no-repeat center/cover}
.stop .photo:nth-child(1){animation-play-state: paused;}
.stop .photo:nth-child(2){animation-play-state: paused;}
.stop .photo:nth-child(3){animation-play-state: paused;}
.stop .photo:nth-child(4){animation-play-state: paused;}
.stop .photo:nth-child(5){animation-play-state: paused;}
#mplayer {position: absolute; left: 0%;top:90%;cursor: pointer;z-index:888; width: 100%;mix-blend-mode: lighten; filter:invert(100%) ;opacity: 1;}

#papa:hover #mplayer { display:block ;opacity: 1;}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:5%; left:calc(85% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 0; cursor: pointer; z-index: 111}
#tx { position: absolute;
top: 0px;
left: 0px;z-index: 2;
width: 100%;
height: 100%;

animation: tx 2s linear infinite;
cursor: pointer;
}

@keyframes tx {from {filter: hue-rotate(0deg);
}
to {filter:hue-rotate(360deg)contrast(100%)brightness(120%);}
}
</style>

<div id="papa">

<span id="fullscreen">全屏欣赏</span>
<div id="mb"></div>
<div id="Img" >
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
</div>

<div id="mplayer"><audio style="width:100%;" id="aud" controls="controls" autoplay="autoplay" loop="loop" src= "https://www.joy127.com/url/155983.mp3" type="audio/mpeg"></audio></div>

<div id="tx"><div id="lrc" data-lrc="信仰">信仰</div></div>

</div>

<style type="text/css">
#lrc { --motion: cover2; --tt: 2s; position: absolute; left: 50%;top:75%;transform: translate(-50%); font: normal 2em/1em 楷体;color:#000080; filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px 0); z-index: 6; place-items: center; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; white-space: pre;background:#ff0000; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; place-items: center;}
@keyframes cover1{0% { width: 0%;filter: hue-rotate(360deg)brightness(150%)}

100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%);width: 100%;}
}
@keyframes cover2 { 0% { width: 0%;filter: hue-rotate(360deg)brightness(150%)}

100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%);width: 100%;}
}
</style>
<script >
let mKey = 0, mFlag = true;
(function() {
/*原始lrc歌词*/
let lrcStr = `演唱：徐霞、马腾
作词：杨文国、闻艺
作曲：孟文豪

女：
梦想有多长
希望就会在前方
不懈追求与向往
就是人民富裕与安康
男：
信仰有多高
忠诚就会更昂扬
美好蓝图与梦想
就是祖国繁荣与富强
不忘初心
放飞理想和希望
女：
牢记使命
把信仰擦亮
合：
同心协力
追赶奋进的时光
汗水与担当
写就出彩的华章 华章
女：
梦想有多长
希望就会在前方
不懈追求与向往
就是人民富裕与安康
男：
信仰有多高
忠诚就会更昂扬
美好蓝图与梦想
就是祖国繁荣与富强
民族的希望
是压不弯的脊梁
女：
国家的力量
是万众一心的光芒
合：
坚定信念
紧随前进航向
国富民强
铸就人民永恒的信仰 信仰
民族的希望
是压不弯的脊梁
国家的力量
是万众一心的光芒
坚定信念
紧随前进航向
国富民强
铸就人民永恒的信仰
未经许可,不得翻唱或使用
`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = ;
for(x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re,'');
if(geci) {
geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
let time = x.match(re);
if(time != null) {
for(y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for(z in tmp) sec += tmp * calcRule;
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a,b)=> a - b);
return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};

/*格式化时间信息*/
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;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();

let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
(function(){
var image = document.getElementById("Img");
let mState = () => aud.paused ? image.classList.add('stop'): image.classList.remove('stop');
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
tx.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => tx.style.animationPlayState = 'running');
aud.addEventListener('pause', () => tx.style.animationPlayState = 'paused');
</script>


</td></tr></table>
</div>

梦江南 发表于 2026-6-27 18:59

抖音中也能做出如此精彩的动画效果，老师厉害！欣赏学习！{:4_187:}

红影 发表于 2026-6-27 21:52

歌曲好听，制作漂亮，欣赏万顷湖好帖{:4_187:}

万顷湖 发表于 2026-6-27 22:12

梦江南 发表于 2026-6-27 18:59
抖音中也能做出如此精彩的动画效果，老师厉害！欣赏学习！

时行视图曲，狗盗带三连。更有开直播，鸡鸣飞上天。谢谢梦江南鼓励。

万顷湖 发表于 2026-6-27 22:14

红影 发表于 2026-6-27 21:52
歌曲好听，制作漂亮，欣赏万顷湖好帖

时行视图曲，狗盗带三连。更有开直播，鸡鸣飞上天。谢谢虹影鼓励。

红影 发表于 2026-6-28 19:02

万顷湖 发表于 2026-6-27 22:14
时行视图曲，狗盗带三连。更有开直播，鸡鸣飞上天。谢谢虹影鼓励。

现实本就如此{:4_173:}

查看完整版本: 信仰-徐霞&马腾