化风行万里 - 苏谭谭 - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2023-7-15 17:27

化风行万里 - 苏谭谭

本帖最后由亚伦影音工作室于 2023-7-15 18:33 编辑 <br /><br /><style>
#papa {
margin: 150px -330px;
width: 1264px;
height: 720px;
background:
            linear-gradient(41deg, rgba(251, 7, 7, 0.33) 0%,rgba(6, 19, 157, 0.31) 44%,rgba(19, 233, 63, 0.56) 100%),
            #000 url('https://file.moyublog.com/d/file/2021-02-09/6c37b6d826f57e4792301cdd5f39ed37.jpg')0 0/100% 100%;
position: relative;
z-index: 1;overflow: hidden;}
#dt1{position: absolute;top:0%; left:0%;z-index: 3;
width:100%;mix-blend-mode: lighten;
height:100%;transform: rotateY(0deg);opacity: 1}

#dt2{position: absolute;top:0%; left:0%;z-index: 3;
width:100%;mix-blend-mode: lighten;
height:100%;transform: rotateY(0deg);opacity: 0.15}
#dt3{position: absolute;top:0%; left:66%;z-index: 3;
width:34%;mix-blend-mode: lighten;
height:100%;transform: rotateY(0deg);opacity: 0}

.photo {width: 100%;
height: 100%;
position: absolute;z-index: 2;

top:0px; left:0px;
opacity: 1;
animation: round 60s linear infinite;}
.stop .photo {animation-play-state: paused;}
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1.5)translate(10%,0%);
opacity:1}
20% {
-webkit-transform:rotate(0)scale(1.5)translate(-10%,0%);
opacity:1}
40% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,10%);
opacity:1}
60% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,-10%);
opacity:1}
80% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(1.5)translate(10%,0%);
opacity:1}
}

#mplayer {position: absolute;
   top:50%; left:2%;z-index: 20;
   width: 200px;filter:hue-rotate(0deg);
   height:200px;
}

#vid { display: none; }
#canv { mix-blend-mode:soft-light;
position: absolute;
display: block;z-index: 2;
top:-5%; left:0%;
transform:scale(1,1.1);
opacity: 0;
}
#tit {
   position: absolute;
   width: fit-content;
   height: fit-content;
   right: 5%;top:30px;
   z-index: 12;
   color: SeaGreen;
   font: bold 35px/40px 'Microsoft YaHei',serif;

}
.mysp {
   position: relative;
   display: block;
}

@keyframes move {
   0% { right: 10px; transform: rotate(0); color: olive; }
   50% { right: 120px; transform: rotate(360deg); color: red; }
   100% { right: 10px; transform: rotate(720deg); color: green; }
}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:2%; left:5%;color:#FFffff; font:normal2.2em华文行楷; opacity: 1; cursor: pointer; z-index: 6}
</style>

<div id="papa">
<div id="tit"></div>
<div id='dt1'><img id="testImg1" src="https://pic.imgdb.cn/item/64a52c121ddac507cc5fd3ac.gif" width="100%" height="100%"></div>
<div id='dt2'><img id="testImg2" src="https://img.fy6b.com/2023/05/24/1e25a4cfce468.gif" width="100%" height="100%"></div>
<div id='dt3'><img id="testImg3" src="https://www.yiyuen.com/e/file/view/591049" width="100%" height="100%"></div>
<div id="testImg" ><imgclass="photo" src="https://pic.imgdb.cn/item/649cf22f1ddac507ccc663da.jpg" ></div>
<canvas id="canv"></canvas>
<div id="mplayer"><img id="ant" src="https://pic2.imgdb.cn/item/64309c8c0d2dde577781ae06.gif" width="100%" height="100%"></div>
<div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>
<span id="fullscreen">全屏观赏</span>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music283106578.mp3" autoplay loop></audio>
<video id="vid" src="https://st0.dancf.com/gaoding/gaoding/32f68376-b9f9-41ff-9819-ee55e0ef6acc53192003.mp" loop autoplay muted></video>

<style type="text/css">
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #880000);
position: absolute;z-index: 4;
left: 50%;
transform: translate(-50%);
top: 85%;
font:normal 3em 华文隶书;
color: #000078;
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%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
化风行万里 - 苏谭谭
词：聂小慧
曲：聂小慧
编曲：卡个秋@Huijian music
长笛：郭士钰
和声：小佑
童声：王梓熙
混音：苏洲
监制：米奇王翔
制作人：亚伦
出品：亚伦影音工作室
就一句对不起结束当初的约定
你转身离开得毫不犹豫
被遗忘的曾经又泛起了涟漪
有多可惜却无能为力
有人提你姓名我假装着不在意
可心里的伤已经抹不去
花凋零的寒季等不来你的归期
你看不见我哭红的眼睛
我化风行万里越过大海找寻你
你却似一场雨落入了我的心底
关于我的一切因你才风和日丽
你怎么狠下心把我丢在黑夜里
我化风行万里飞过千山找寻你
你却似一轮月高挂在遥远天际
我眼里的风景等着说给你来听
而你似那泡影消失在我世界里
有人提你姓名我假装着不在意
可心里的伤已经抹不去
花凋零的寒季等不来你的归期
你看不见我哭红的眼睛
我化风行万里越过大海找寻你
你却似一场雨落入了我的心底
关于我的一切因你才风和日丽
你怎么狠下心把我丢在黑夜里
我化风行万里飞过千山找寻你
你却似一轮月高挂在遥远天际
我眼里的风景等着说给你来听
而你似那泡影消失在我世界里
`;

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

/*监听播放进度*/
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); /*获得歌词数组*/
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
let spans = [],idx = 0, last = null;

   [...'化风行万里*苏谭谭'].forEach((item,key) => {
            let sp = document.createElement('span');
            sp.className = 'mysp';
            sp.innerHTML = item + '<br>';
            spans.push(sp);
            tit.appendChild(sp);
   });

   let mov = () => {
            if(last != null) spans.style.animation = '';
            spans.style.animation = 'move 2s';
            last = idx;
            idx += 1;
            if(idx >= spans.length) idx = 0;
            setTimeout(mov,2000);
   };

   mov();

</script>

<script>
let ctx = canv.getContext('2d');
let ww = canv.width =1264, hh = canv.height =720;
let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh);if(!vid.paused) {requestAnimationFrame(loop);return;}}
let mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'),vid.pause()) : (papa.style.setProperty('--state', 'running'),vid.play());
vid.playbackRate = 0.5;
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
</script>

<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
   if (this.storeCanvas) {
         // 移除存储的canvas
         this.storeCanvas.parentElement.removeChild(this.storeCanvas);
         this.storeCanvas = null;
         // 透明度还原
         image0.style.opacity = ''; image1.style.opacity = '';image2.style.opacity = '';image3.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 image1 = document.getElementById("testImg1"),
image2 = document.getElementById("testImg2"),
image3 = document.getElementById("testImg3"),
image = document.getElementById("testImg"),
image0 = document.getElementById("ant"),
button = document.getElementById("mplayer");
if (image0&&image1&&image2&&image3&& button) {
button.onclick = function() {
   if (this.value == '') {
         image0.play();image1.play();image2.play();image3.play(); image.classList.remove('stop');
         this.value = '.';
   } else {
      image0.stop(); image1.stop();image2.stop();image3.stop();image.classList.add('stop');
         this.value = '';
   }
};
}

</script>

小辣椒 发表于 2023-7-15 18:03

亚伦今天一下子发2个，不一样的风格，同样的精彩{:4_199:}

小辣椒 发表于 2023-7-15 18:05

很喜欢这首化风行万里，好听{:4_199:}

小辣椒 发表于 2023-7-15 18:06

看了你这个代码，我也是可以做一次的{:4_170:}

亚伦影音工作室 发表于 2023-7-15 18:21

小辣椒发表于 2023-7-15 18:06
看了你这个代码，我也是可以做一次的

加了特效字。

红影发表于 2023-7-15 19:44

这个加了文字横移，漂亮。还有按钮暂停。漂亮的制作。欣赏亚伦老师好帖{:4_187:}

小辣椒 发表于 2023-7-15 21:34

亚伦影音工作室发表于 2023-7-15 18:21
加了特效字。
哦，刚加的吧，前面没有看见的{:4_199:}

亚伦影音工作室 发表于 2023-7-15 22:17

小辣椒发表于 2023-7-15 21:34
哦，刚加的吧，前面没有看见的

参考你的，在此感谢！

小辣椒 发表于 2023-7-15 22:19

亚伦影音工作室发表于 2023-7-15 22:17
参考你的，在此感谢！

哈哈~~都是黑黑代码捣鼓的

醉美水芙蓉 发表于 2023-7-15 22:22

小文发表于 2023-7-16 20:07

欣赏！

页: [1]

花潮论坛's Archiver

化风行万里 - 苏谭谭