热烈祝贺祖国74周年华诞！ - 第2页 - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2023-10-1 21:47

本帖最后由亚伦影音工作室于 2023-10-1 22:04 编辑 <br /><br /><style >
#papa{margin: 150px -260px ;width: 1276px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;
height: 745px;
border: 1px solid;
background: #333 url('https://wj.zp68.com/lxx/yunhua/2023/09/24/28.gif') no-repeat center/cover;
position: relative;z-index: 12345;}
#img_border{position: absolute;top:10%; left:44%;width: 100%;height: 100%;z-index:3;-webkit-mask-image: radial-gradient();}
#benban{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:4;background:linear-gradient(0deg, #000000 2%,#000000 8%,rgba(2, 2, 2, 0) 30%,rgba(52, 152, 219, 0) 100%,rgba(2, 2, 2, 0) 100%,black 100%);}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:82%; left:88%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书; opacity: 1; cursor: pointer; z-index: 111}
#dt{position: absolute;top:0%; left:0%;z-index: 2;
width:100%;
height:100%; transition: .3s all ease;}
#mplayer {top:65%; left:5%;z-index: 3;
position: absolute;
font: normal 7em/0em serif;
color:#ffffff;
cursor: pointer;
animation: spin 10s infinite linear;
}
@keyframes spin {0% { transform: rotate(360deg); }
}
#audio{top:90%; left:0%;z-index: 6;
position: absolute;
width:100%;
cursor: pointer;
mix-blend-mode: lighten;filter:invert(100%)
}
#flyBox { --w: 60%; width: var(--w); overflow: hidden; color: #cccccc; position: absolute; left:20%;top:88%;font-size: 18px; z-index: 36;}
#flyBox div { word-break: keep-all; white-space: nowrap; animation: fly 40s linear infinite; background:#0000}
@keyframes fly { from { transform: translateX(100%); } to { transform: translateX(calc(0% - var(--w))); }}
</style>
<div id='papa'>
<span id="fullscreen">全屏观赏</span>
<div id='benban' ></div>
<div id="img_border"><img id="testImg0" src="https://xlaj.cn/assets/file/zp/20230927233112.gif" width="400px" height="400px"></div>
<div id='dt'><img id="testImg" src="https://wj.zp68.com/lxx/yunhua/2023/09/24/28.gif" width="100%" height="100%"></div>
<div id="lrc" data-lrc="我和我的祖国">我和我的祖国</div>
<div id="mplayer"></div>
<div id='audio'>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/20210930/01.mp3"style="width:100%;" autoplay="autoplay" controls="controls" height="100%" loop="loop"></audio></div>
<div id="flyBox"><div>热烈祝贺中华人民共和国成立74周年华诞！</div></div>
</div>

*/*控制两个动图*/*
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
   if (this.storeCanvas) {
         // 移除存储的canvas
         this.storeCanvas.parentElement.removeChild(this.storeCanvas);
         this.storeCanvas = null;
         // 透明度还原
         image.style.opacity = '';image0.style.opacity = '';
   }
   if (this.storeUrl) {
         this.src = this.storeUrl;
   }
};
HTMLImageElement.prototype.stop = function() {
   var canvas = document.createElement('canvas');
   // 尺寸
   var width = this.width, height = this.height;
   if (width && height) {
         // 存储之前的地址
         if (!this.storeUrl) {
            this.storeUrl = this.src;
         }
         // canvas大小
         canvas.width = width;
         canvas.height = height;
         // 绘制图片帧（第一帧）
         canvas.getContext('2d').drawImage(this, 0, 0, width, height);
         // 重置当前图片
         try {
            this.src = canvas.toDataURL("image/gif");
         } catch(e) {
            // 跨域
            this.removeAttribute('src');
            // 载入canvas元素
            canvas.style.position = 'absolute';
            // 前面插入图片
            this.parentElement.insertBefore(canvas, this);
            // 隐藏原图
            this.style.opacity = '0';
            // 存储canvas
            this.storeCanvas = canvas;
         }
   }
};
}

var image = document.getElementById("testImg");
var image0 = document.getElementById("testImg0");
varbutton = document.getElementById("mplayer");
let mState = () => aud.paused ? (image.stop(),image0.stop() ): (image.play(),image0.play());

aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);

let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};

</script>
*/*结束*/*
<style>
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #880000);
position: absolute;
left: 50%;z-index: 20;
transform: translate(-50%);
top: 70%;
font:normal 3em 华文隶书;
color: #0000;
white-space: pre;

filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1{ 0% { width: 0%;letter-spacing: 15px; color:#000090;}100% { width: 350%; letter-spacing: 0px;color:#ff0000; } }
@keyframes cover2 {0% { width: 0%;letter-spacing: 0px; color:#00ff00;}100% { width: 350%; letter-spacing: 15px;color:#ff0000; }}

</style>

<script >
(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());/*监听查询事件*/
mplayer.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });

mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();

</script>

小辣椒 发表于 2023-10-1 22:00

亚伦影音工作室发表于 2023-10-1 21:47
本帖最后由亚伦影音工作室于 2023-10-1 21:55 编辑
#papa{margin: 150px -300px ;width: 1276px;box-s ...

谢谢亚伦，以后争取重新做一次

小辣椒 发表于 2023-10-1 22:01

亚伦影音工作室发表于 2023-10-1 21:31
应该这个动图也同时控制

亚伦就是厉害，我根本没有想到加这个控制的{:4_170:}

红影发表于 2023-10-1 22:44

小辣椒发表于 2023-10-1 21:04
祝福伟大祖国更加繁荣昌盛，越来越强大！

国家强盛，人民更幸福{:4_204:}

红影发表于 2023-10-1 22:44

小辣椒发表于 2023-10-1 21:04
今天上来又迟了

知道亲爱的在忙，没事，空了玩就好{:4_187:}

马黑黑 发表于 2023-10-1 22:54

小辣椒发表于 2023-10-1 21:05

谢茶

梦油发表于 2023-10-2 10:09

小辣椒发表于 2023-10-1 21:03
梦油国庆节快乐！

祝你开心快乐每一天。

小辣椒 发表于 2023-10-2 22:03

红影发表于 2023-10-1 22:44
国家强盛，人民更幸福

是啊，现在是仔细想想，我们的国家谁比得上啊，做中国人真幸福的

小辣椒 发表于 2023-10-2 22:04

红影发表于 2023-10-1 22:44
知道亲爱的在忙，没事，空了玩就好

现在都10点了，上来太迟的

小辣椒 发表于 2023-10-2 22:04

马黑黑发表于 2023-10-1 22:54
谢茶

不客气，继续喝茶{:4_180:}

小辣椒 发表于 2023-10-2 22:05

梦油发表于 2023-10-2 10:09
祝你开心快乐每一天。

谢谢梦油，一起开心快乐!

马黑黑 发表于 2023-10-2 22:20

小辣椒发表于 2023-10-2 22:04
不客气，继续喝茶

{:4_208:}

小辣椒 发表于 2023-10-2 22:26

马黑黑发表于 2023-10-2 22:20

听歌喝茶最幸福的时候了{:4_173:}

红影发表于 2023-10-2 23:20

小辣椒发表于 2023-10-2 22:03
是啊，现在是仔细想想，我们的国家谁比得上啊，做中国人真幸福的

我也觉得是这样，为咱们的幸福{:4_176:}

红影发表于 2023-10-2 23:21

小辣椒发表于 2023-10-2 22:04
现在都10点了，上来太迟的

没事啊，忙正事要紧{:4_204:}

梦油发表于 2023-10-3 10:17

小辣椒发表于 2023-10-2 22:05
谢谢梦油，一起开心快乐!

这个节日你的回复量不少，你累了吧？过了节好好休息休息吧。

小辣椒 发表于 2023-10-4 12:37

红影发表于 2023-10-2 23:20
我也觉得是这样，为咱们的幸福

亲爱的~~~一起干杯{:4_176:}{:4_176:}

小辣椒 发表于 2023-10-4 12:37

梦油发表于 2023-10-3 10:17
这个节日你的回复量不少，你累了吧？过了节好好休息休息吧。

谢谢梦油关心，我现在是感觉玩的有点多了

小辣椒 发表于 2023-10-4 12:38

马黑黑发表于 2023-10-2 22:20

黑黑好{:4_187:}

小辣椒 发表于 2023-10-4 12:39

红影发表于 2023-10-2 23:21
没事啊，忙正事要紧

每天忙的是看亚运会比赛，节日外面人多，家里看看比赛不错的

页: 1 [2] 3

花潮论坛's Archiver