六哲、慕容晓晓 - 万缕情丝绕 - 欢乐水吧 - 花潮论坛

醉美水芙蓉 发表于 2023-7-9 17:50

六哲、慕容晓晓 - 万缕情丝绕

本帖最后由醉美水芙蓉于 2023-7-9 17:50 编辑 <br /><br /><style>
#papa {
margin: 110px -280px;
width: 1164px;
height: 640px;
background: url('https://img-baofun.zhhainiao.com/fs/e5a4f2b124f62c2aaac5a696f52ed8d0.jpg') no-repeat center/cover;
box-shadow: 0px 0px 1px 2px #ffffff,0px 0px 5px 10px#ff66ff;overflow:hidden;border-radius:1%;
position: relative;
z-index: 1;overflow:hidden;
--state: paused;
}
css-doodle { position: absolute; }

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

top:0px; left:0px;-webkit-mask-image: radial-gradient(black 20% ,transparent 70%);

opacity: 0;

animation: round 90s linear infinite;}

@keyframes round{0% {opacity: 1;transform:translate(-100%,-100%)scale(0);}

4% {opacity: 1;transform:translate(0%,0%)scale(0.8)rotate(-360deg);}

5% {opacity: 1;transform:translate(0%,0%)scale(0.8)rotate(-360deg);}

7% {opacity: 1;transform: perspective(1300px) rotateY(70deg)scale(0.8)}

9% {opacity: 1;transform: perspective(1300px) rotateY(-70deg)scale(0.8)}

11% {opacity: 0;transform:translate(100%,100%) perspective(1300px)rotatex(-90deg) rotateY(-40deg)scale(3);}

}

img:nth-child(1) {animation-delay: 88s;}

img:nth-child(2) {animation-delay: 77s;}

img:nth-child(3) {animation-delay: 66s;}

img:nth-child(4) {animation-delay: 55s;}

img:nth-child(5) {animation-delay: 44s;}

img:nth-child(6) {animation-delay: 33s;}

img:nth-child(7) {animation-delay: 22s;}

img:nth-child(8) {animation-delay: 11s;}

.stop img:nth-child(1),

.stop img:nth-child(2),

.stop img:nth-child(3),

.stop img:nth-child(4),

.stop img:nth-child(5),

.stop img:nth-child(6),

.stop img:nth-child(7),

.stop img:nth-child(8){animation-play-state: paused;}

#canv {filter:hue-rotate(0deg)contrast(100%)brightness(100%);
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: 82%;
font:normal 3em 宋体;
color:#FF00CC;
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: 0%; } }
@keyframes cover2 { from { width: 0; } to { width: 0%; } }

.wenzi { position: absolute; left: -1%; top: 18%; z-index: 10; color:#ff33ff; font: bold 20px/20px 'FangSong',serif;opacity: 1; }
#papa:hover #fullscreen { display:block ;}

</style>

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

<img class='photo'src="https://img-baofun.zhhainiao.com/fs/e5a4f2b124f62c2aaac5a696f52ed8d0.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/7897b4650387d6bf9c3bd015c4bc0739.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/73aacccba966ccd6bbdfd53e4105a1e4.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/6a7120c8b7528802550f877f4d69fc8a.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/e5a4f2b124f62c2aaac5a696f52ed8d0.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/7897b4650387d6bf9c3bd015c4bc0739.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/73aacccba966ccd6bbdfd53e4105a1e4.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/6a7120c8b7528802550f877f4d69fc8a.jpg" alt="" />

</div>

<divstyle="width: 400px;height: 320px;overflow:hidden;margin: 3% 68%;position: absolute;" id="but">
<css-doodleid="mplayer">
   :doodle {
            @grid: 2 / 300px 60px;
         position: absolute;z-index: 40;
            color: var(--color);
         transform: scale(1);
            --prog: 0%; --size: 35px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color:#ff33ff; --state: paused;
   }
   /* 时间信息 : 左 */
   @nth(1) {
            @place: 25% 80%;
            :after { content: var(--ttmsg1); }
   }
   /* 控制器 */
   @nth(2) {
            @size: var(--size);
            @shape: clover 5;
            @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>

<video id="vid" src="https://imgs-qn.51miz.com/preview/video/00/00/12/81/V-128171-DE5CB9F4.mp4" autoplay loop muted></video>
<audio id="aud" src="https://www.qqmc.com/mp3/music284175262.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());

</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 = `
六哲、慕容晓晓 - 万缕情丝绕
作词：崔保民
作曲：肖玄/六哲
编曲：区密
吉他：邓仲伟
和声编写：六哲
录音：Tony One
混音/母带：王嘉屏
配唱制作人：王嘉屏
制作人：六哲/六钱
策划：张旭
监制：肖玄
LRC编辑：醉美水芙蓉
引：
万缕情丝绕满头霜雪染
不求沧海桑田只求时间
万缕情丝绕一个人怀缅
奈何唯有情诗盛满了书简
六哲：
风吹寂寞枝头荒凉了守候
思念越来越浓人消瘦
怕回首又躲进往事不肯走
沉醉旧梦中泪湿了衣袖
是缘是劫差之千里的春秋
只为一人笑也因他愁
伤过几回方能把红尘看透
纷飞落雪几时才肯罢休
合：
万缕情丝绕满头霜雪染
放不下忘不了空守孤单
万缕情丝绕一个人怀缅
尘封在心底感叹岁月阑珊
万缕情丝绕满头霜雪染
不求沧海桑田只求时间
万缕情丝绕一个人怀缅
奈何唯有情诗盛满了书简
六哲：
是缘是劫差之千里的春秋
只为一人笑也因他愁
伤过几回方能把红尘看透
纷飞落雪几时才肯罢休
合：
万缕情丝绕满头霜雪染
放不下忘不了空守孤单
万缕情丝绕一个人怀缅
尘封在心底感叹岁月阑珊
万缕情丝绕满头霜雪染
不求沧海桑田只求时间
万缕情丝绕一个人怀缅
奈何唯有情诗盛满了书简
六哲：
风吹寂寞荒凉了守候
思念越来越浓人消瘦
怕回首又躲进往事不肯走
沉醉旧梦中泪湿了衣袖
慕容晓晓：
万缕情丝绕
六哲：
是缘是劫千里的春秋
只为一人笑也因他愁
伤过几回把红尘看透
纷飞落雪几时才肯罢休
慕容晓晓：
万缕情丝绕满头霜雪染
不求沧海桑田只求时间
万缕情丝绕一个人怀缅
奈何唯有情诗盛满了书简
谢谢欣赏！
`;

/*变量：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>
<script>
var image = document.getElementById("testImg"),
button = document.getElementById("but");

if (image.classList && image && button) {
button.onclick = function() {
   if (this.value == '.') {
         image.classList.remove('stop');
      this.value = '*';
   } else {
         image.classList.add('stop');
         this.value = '.';
   }
};
}

</script>

红影发表于 2023-7-9 18:39

漂亮的图片轮播效果，这个制作真美。欣赏水芙蓉好帖{:4_199:}

千羽发表于 2023-7-9 19:25

很美的特效制作，欣赏学习了{:4_187:}

马黑黑 发表于 2023-7-9 19:44

这个制作，融入了亚伦的制作创意，美美哒

醉美水芙蓉 发表于 2023-7-9 21:07

红影发表于 2023-7-9 18:39
漂亮的图片轮播效果，这个制作真美。欣赏水芙蓉好帖

红影美女晚上好！

醉美水芙蓉 发表于 2023-7-9 21:07

千羽发表于 2023-7-9 19:25
很美的特效制作，欣赏学习了

千羽美女晚上好！

醉美水芙蓉 发表于 2023-7-9 21:08

马黑黑发表于 2023-7-9 19:44
这个制作，融入了亚伦的制作创意，美美哒

应该说是黑黑老师的代码，亚伦老师的创意!

马黑黑 发表于 2023-7-9 21:09

醉美水芙蓉发表于 2023-7-9 21:08
应该说是黑黑老师的代码，亚伦老师的创意!

我的代码是开放的，谁都可以用

醉美水芙蓉 发表于 2023-7-9 21:11

马黑黑发表于 2023-7-9 21:09
我的代码是开放的，谁都可以用

感谢黑黑老师一直以来的无私奉献！

南无月 发表于 2023-7-9 21:37

这个贴子太漂亮了，古风前景加视频加变幻图片，加歌词和漂亮的小播，完美。。。{:4_187:}

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

南无月发表于 2023-7-9 21:37
这个贴子太漂亮了，古风前景加视频加变幻图片，加歌词和漂亮的小播，完美。。。

谢谢月儿支持！

马黑黑 发表于 2023-7-9 22:35

醉美水芙蓉发表于 2023-7-9 21:11
感谢黑黑老师一直以来的无私奉献！

没啥贡献，这是分享

红影发表于 2023-7-10 10:58

醉美水芙蓉发表于 2023-7-9 21:07
红影美女晚上好！

水芙蓉美女好，新周快乐{:4_187:}

南无月 发表于 2023-7-10 15:58

醉美水芙蓉发表于 2023-7-9 22:06
谢谢月儿支持！

{:4_187:}

页: [1]

花潮论坛's Archiver

六哲、慕容晓晓 - 万缕情丝绕