战斗机《战歌》

亚伦影音工作室 发表于 2023-5-26 05:45

本帖最后由亚伦影音工作室于 2023-5-27 23:01 编辑 <br /><br /><style>
#papa {
margin: 100px -300px;
width: 1164px;
height: 640px;
background: url('https://www.yiyuen.com/e/file/view/585873') no-repeat center/cover;
box-shadow: 0 0 0px #000;
position: relative;
z-index: 1;overflow:hidden;
--state: paused;
}
css-doodle{ position: absolute; }
#plane {position: absolute;left: 0px;top: 120px;width: 200px;height: 180px;background: url("https://www.yiyuen.com/e/file/view/588173")0 0/100% 100%;
animation: move 15s linear infinite;z-index: 5;}
@keyframes move { 0% { left: 0%;transform:rotate(50deg)scale(0)} 30%{left: 100%;transform:rotate(50deg)scale(1);}60%{left: 100%;transform:rotate(-50deg)scale(0)}100%{left: 0%;transform:rotate(-50deg)scale(1)}}
#canv {filter:hue-rotate(0deg)contrast(140%)brightness(80%);
position: absolute;
display: block;
height: 100%;
position: relative;
cursor: pointer;
z-index: 4;opacity: 1;
}
#vid { display: none; }

#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #ff0000, #80ef03);
position: absolute;z-index: 6;
left: 50%;
transform: translate(-50%);
top: 85%;
font:normal 3em 华文行楷;
color: #055306;
white-space: pre;
-webkit-background-clip: text;
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 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }

.wenzi {width:400px;height: 40px; position: absolute; left:-45px; top: 18%;text-align:center; z-index: 10;color:#ffffff; font: bold 20px/20px 'FangSong',serif;opacity: 1; }
#papa:hover #fullscreen { display:block ;}

#fullscreen { position: absolute; top:2%; left:5%;color:#FFffff; font: normal 2.2em华文行楷; opacity: 1; cursor: pointer; z-index: 6}

</style>

<div id="papa">
   <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="plane"></div>

<divstyle="width: 400px;height: 320px;overflow:hidden;margin: 3% 70%;position: absolute;" >
<css-doodleid="mplayer">
   :doodle {
            @grid: 2 / 300px 60px;
         position: absolute;z-index: 40;
            color: var(--color);
         transform: scale(1);
            --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color:#ffffff; --state: paused;
   }
   /* 时间信息 : 左 */
   @nth(1) {
            @place: 25% 80%;
            :after { content: var(--ttmsg1); }
   }
   /* 控制器 */
   @nth(2) { @size: var(--size);
clip-path: @shape(fill: evenodd;points: 40;scale:.45;x: cos(2t) + cos(7t);y: sin(2t) + sin(7t); );
@place: 50% 35%;
background: var(--color);
animation: rot 6s infinite linear var(--state);
   }
   /* 时间信息 : 右 */
   @nth(3) {
            @place: 75% 80%;
            :after { content: var(--ttmsg2); }
   }
   /* 进度条 */
   @nth(4) {
            @place: 50% 80%;
            @size: 100% 2px;
            background: #aaaaaa;
            display: grid;
            place-items: center start;
            :before {
                     content: '';
                     width: var(--prog);
                     height: 100%;
                     background: var(--color);
            }
   }
   @keyframes rot { to { transform: rotate(1turn); } }

</css-doodle>
<div class="wenzi">亚伦影音工作室</div>
</div>

<canvas id="canv"></canvas>
<span id="fullscreen">全屏观赏</span>

<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/1df87151496b1b6ee0d38a9bdcaaf435_preview.mp4" autoplay loop muted></video>
<audio id="aud" src="https://www.qqmc.com/mp3/music276917424.mp3" autoplay loop></audio>

</div>

<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
ctx.drawImage(vid, 0, 0, ww, hh);
if(!vid.paused) {
requestAnimationFrame(loop);
return;
}
}
let mState = () => aud.paused ? ( mplayer.style.setProperty('--state', 'paused'), vid.pause()) : ( mplayer.style.setProperty('--state', 'running'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

plane.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => plane.style.animationPlayState = 'running');
aud.addEventListener('pause', () => plane.style.animationPlayState = 'paused');

</script>

<script>

(function() {
   let script = document.createElement('script');
   script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
   document.head.appendChild(script);
   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 = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   aud.addEventListener('play', mState, false);
   aud.addEventListener('pause', mState, false);
   aud.addEventListener('timeupdate', () => {
            mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
            mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
            mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
   });
   mplayer.onclick = (e) => {
            if(e.offsetX > 130 && e.offsetX < 170 && e.offsetY < 46) aud.paused ? aud.play() : aud.pause();
            if(e.offsetY > 46) aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
   }
})();

</script>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
战歌 (《斗罗大陆双神战双神》动画主题曲) - CoCo李玟
词：梁慧秀
曲：孙侨志KELZIE
编曲：孙侨志KELZIE
制作人：亚伦
监制：孙侨志KELZIE
出品：（亚伦影音工作室）
我曾迷失路的方向
期待着一丝光亮
风划过面庞
这爱与恨交织的殇
倾诉不完的衷肠
暗夜等曙光
伤痛过血泪模糊过
怀疑过也重新来过
向命运承诺
泪落眼神不落魄
全力以赴去拼搏
去守护这脉搏
沉默中点燃命运之火
魂魄交响的承诺
概括就坦诚相见不繁琐
让灵魂都彼此解脱
等明月清风照山岗
大漠孤烟天微亮
果真梦一场
望不穿你眼神飘荡
猜不中结局无妨
思绪已千行
伤痛过血泪模糊过
怀疑过也重新来过
向命运承诺
泪落眼神不落魄
全力以赴去拼搏
去守护这脉搏
沉默中点燃命运之火
魂魄交响的承诺
概括就坦诚相见不繁琐
让灵魂都彼此解脱
沉默中点燃命运之火
魂魄交响的承诺
概括就坦诚相见不繁琐
让灵魂都彼此解脱
`;

/*变量：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;
};

</script>

醉美水芙蓉 发表于 2023-5-26 05:55

红影发表于 2023-5-26 09:26

战斗机编辑得好，视频也选得不错。配着这样的歌曲，很带劲。欣赏亚伦老师好帖{:4_187:}

红影发表于 2023-5-26 09:34

暂停能够全部停下，这个制作真棒{:4_187:}

梦缘发表于 2023-5-26 11:05

好意境，播放器很特殊，欣赏点赞！{:4_187:}

焱鑫磊 发表于 2023-5-26 21:32

漂亮！{:4_187:}

页: [1]

花潮论坛's Archiver

战斗机《战歌》