《你最美丽你最亲》 - 云菲菲 - 音乐沙龙 - 花潮论坛

亦是金 发表于 2023-5-23 18:29

《你最美丽你最亲》 - 云菲菲

本帖最后由亦是金于 2024-3-2 11:11 编辑 <br /><br /><style>
#papa {
width: 1200px;height: 710px;position:absolute; --state:paused;
box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;
overflow:hidden;border-radius:1%;display:grid; place-items:center;
margin-top:10px;margin-LEFT:-310px;
}

.vid { position: absolute; width: 1500px; height: 710px; object-fit: cover; }
.vid2 { position: absolute; width: 600px; height: 400px; object-fit: cover; }
.vid3 { position: absolute; width: 600px; height: 400px; object-fit: cover; }

#baiBox {
   width: 500px;
height: 50px;
   text-align: center;
   font-family:微软简中圆;
   font-size: 2.0rem;
   font-weight: bold;
   color: #f46ff6;
   transform-origin: top;
   animation: yao 1.0s linear infinite alternate;
position:absolute;left:0px;top:30px;
}

@keyframes yao {
   from{transform: perspective(800px) rotatex(30deg); }
   to { transform: perspective(800px) rotatex(-30deg); }
}

.tit { position: relative;width: 500px;height: 30px;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }

css-doodle { position: absolute; }

#canv {
   filter:hue-rotate(0deg)contrast(140%)brightness(80%);
position: absolute;
display: block;
height: 100%;
position: relative;
cursor: pointer;
z-index: 4;opacity: 0;
}

#vid { display: none; }

#lrc { --motion: cover2; --tt: 1.5s; position: absolute; left: 50%;top:88%; transform: translate(-50%, 10px);font:normal 3.2em 华文行楷; color:#0000; z-index: 21; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background: linear-gradient(0deg, #1E9600 0%,#FFF200 50%,#FF0000 100%);background-size: 10vmin 125%;background-position: center center; filter: drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }

@keyframes cover1{0% {opacity: 0;transform: translatex(-600px);}
20% {opacity: 1;transform: scale(1,1);}
21% {opacity: 1;transform: scale(1,1);}
40% {opacity: 1;transform: scale(1,0);filter:brightness(800%)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);}
70% {opacity: 1;transform: scale(1,1);filter:brightness(800%)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);}
80% {opacity: 1;transform: scale(1,1);filter:brightness(800%)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);}
100% {opacity: 0.8;transform: translatex(200px)scale(.7);}
}
@keyframes cover2 {0% {opacity: 0;transform: translatex(0px);}
30% {opacity: 1;transform: scale(1,1);}
40% {opacity: 1;transform: scale(0,1);filter:brightness(800%)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);}
60% {opacity: 1;transform: scale(1,1);filter:brightness(800%)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);}
100% {opacity: 0.8;transform: translatex(200px)scale(.7);}
}
</style>

<div id="papa">

<video frameborder="0" class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1ca28e6cba1.mp4" autoplay muted loop="" controls="" style="MARGIN-TOP:0px;MARGIN-LEFT:0px;background:#000 ;width:1400px; height: 710px;-webkit-mask-image: radial-gradient(black 100%, transparent 100%);position:absolute;left:0px;top:0px; opacity: .5;"></video>

<video frameborder="0" class="vid3" src="https://pan.111t.net/view.php/cb9000e5a6904f0beb15346a635c5143.mp4" autoplay muted loop="" controls="" style="MARGIN-TOP:0px;MARGIN-LEFT:0px;background:#000 ;width:1200px; height: 710px;-webkit-mask-image: radial-gradient(black 100%, transparent 100%);position:absolute;left:0px;top:0px; opacity: .5;"></video>

<metaname="referrer" content="never">
<video frameborder="0" class="vid2" src="https://www.kumeiwp.com/sub/filestores/2023/05/23/a187e8365f9750b292adb287412dff50.mp4" autoplay muted loop="" controls="" style="MARGIN-TOP:0px;MARGIN-LEFT:0px;background:#000 ;width:1200px; height: 710px;-webkit-mask-image: radial-gradient(black 100%, transparent 100%);position:absolute;left:0px;top:0px; opacity: .8;"></video>

<div id="baiBox">
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:32px;">《你最美丽你最亲》 </span>
<span style="color:#3d46f7;"><span style="font-size:20px;"> - 云菲菲</span>
</div></div>

<div style="position:absolute;bottom:30px;right:30px;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;"> 亦是金在线音乐 </span></span></span></p></div>

<div style="position:absolute;bottom:60px;left:20px;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)">
<p><span style="color:#3d46f7;"><span style="font-family:微软雅黑;"><span style="font-size:20px;"></span></span></span></p></div>

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

<css-doodle id="mplayer">
:doodle {
@grid: 2 / 500px 100px;
color: var(--color);
bottom: 70px;
            left: 370px;
z-index: 999;
--prog: 0%;
--size: 60px;
--ttmsg1: '00:00';
--ttmsg2: '00:00';
--color: #fb8a2f;
position:absolute;
}
/* 时间信息 : 左 */
@nth(1) {@place: 5% 100%; :after { content: var(--ttmsg1); } }
/* 控制器 */
@nth(2) {
@size: 60px;
@shape: windmill;
@place: 50% 35%;
background: var(--color);
animation: rot 6s infinite linear var(--state);
}
/* 时间信息 : 右 */
@nth(3) {
@place: 95% 100%;
:after { content: var(--ttmsg2); }
}
/* 进度条 */
@nth(4) {
@place: 50% 80%;
@size: 100% 2px;
background: Silver;
display: grid;
place-items: center start;
:before {
content: '';
width: var(--prog);
height: 100%;
background: var(--color);
}
}
@keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>

<css-doodle grid="16" id="fFloat">
:doodle {
@size: 1150px 680px;
}
position: absolute;
left: @r(255)%;
top: -10%;
:after {
position: absolute;
content: '@p( ♬, ♪, ♩,♫, ∮, 最亲, ✲,❤, ☺, 最美, ★, ☆, love, ❄)';
color:#fb52f9;
font-size: @r(15, 30)px;
}
animation: fall 40s @r(-6, 36)s infinite var(--state);
@keyframes fall {
from { transform: rotate(0deg) translate(0px); }
to { transform: rotate(@r(-250,160)deg) translate(-1500px); }
}
</css-doodle>

</div>
</div>
<canvas id="canv"></canvas>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=325095
" 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());
mypic.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

<script>

(function() {

   let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];

   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 = `
《你最美丽你最亲》
填词：陈颂
谱曲：柯思彬
编曲 : 孟文豪
演唱：云菲菲
歌词编辑：亦是金
●●●●●●
当我收到你的信
快乐充满我的心
让我坦白对你说
你最美丽你最亲
当我看完你的信
热情燃烧我的心
让我坦白对你说
你最美丽你最亲
你的影子你的声音
深深地闪进我的心
你的言语你的思想
静静的锁住我的情
当我再看你的信
力量渗透我地心
花儿争艳为我笑
你最美丽你最亲
●●●●●●
你的影子你的声音
深深地闪进我的心
你的言语你的思想
静静的锁住我的情
当我再看你的信
力量渗透我地心
花儿争艳为我笑
你最美丽你最亲
花儿争艳为我笑
你最美丽你最亲
你最美丽你最亲
-- 谢谢欣赏 --

`;

/*变量：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); /*获得歌词数组*/
})();

</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;
         // 透明度还原
         image.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;
         }
   }
};
}

(function() {
let vid = document.querySelector('.vid');

let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js';
document.head.appendChild(script);
let mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'), vid.pause()) : (papa.style.setProperty('--state', 'running'), vid.play());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();

(function() {
let vid2 = document.querySelector('.vid2');

let mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'), vid2.pause()) : (papa.style.setProperty('--state', 'running'), vid2.play());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();

(function() {
let vid3 = document.querySelector('.vid3');

let mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'), vid3.pause()) : (papa.style.setProperty('--state', 'running'), vid3.play());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();

</script>

起个网名好难 发表于 2023-5-23 18:44

欣赏佳作，晚上好！

红影发表于 2023-5-23 19:00

我好像没看到背景呢{:4_173:}
亦是金老师的歌词同步的做法很奇特，点赞{:4_187:}

亦是金 发表于 2023-5-23 19:05

起个网名好难发表于 2023-5-23 18:44
欣赏佳作，晚上好！

问好老师！谢谢欣赏！请你指导！{:4_190:}

亦是金 发表于 2023-5-23 19:07

红影发表于 2023-5-23 19:00
我好像没看到背景呢
亦是金老师的歌词同步的做法很奇特，点赞
问好红影！{:4_187:}我这里背景正常显示的！https://pic1.imgdb.cn/item/646ca8070d2dde5777ce1978.jpg

罗浮梦 发表于 2023-5-23 19:09

漂亮的作品

亦是金 发表于 2023-5-23 19:50

罗浮梦发表于 2023-5-23 19:09
漂亮的作品

问好罗浮梦！谢谢欣赏！{:4_187:}

红影发表于 2023-5-23 19:50

亦是金发表于 2023-5-23 19:07
问好红影！我这里背景正常显示的！

奇怪，就我看不到么？郁闷。
熊猫视频里的烟花能看到，酷美里的我就算用帖子里的地址去看，也是显示下载页面，看不到内容。

亦是金 发表于 2023-5-23 20:45

本帖最后由亦是金于 2023-5-23 20:47 编辑

红影发表于 2023-5-23 19:50
奇怪，就我看不到么？郁闷。
熊猫视频里的烟花能看到，酷美里的我就算用帖子里的地址去看，也是显示下载 ...
@红影现在我将背景动画改用111网盘的了。可以看见了吗？

醉美水芙蓉 发表于 2023-5-23 21:21

亦是金 发表于 2023-5-23 21:37

醉美水芙蓉发表于 2023-5-23 21:21
做得漂亮！

问好！谢谢欣赏！{:4_187:}

红影发表于 2023-5-23 21:55

亦是金发表于 2023-5-23 20:45
@红影现在我将背景动画改用111网盘的了。可以看见了吗？

没事，其他人都能看到说明没问题的呢。欣赏亦是金老师好帖{:4_187:}

亦是金 发表于 2023-5-23 22:09

红影发表于 2023-5-23 21:55
没事，其他人都能看到说明没问题的呢。欣赏亦是金老师好帖

问好{:4_187:}

红影发表于 2023-5-23 22:47

亦是金发表于 2023-5-23 22:09
问好

问好亦是金老师，晚上好{:4_187:}

焱鑫磊 发表于 2023-5-24 00:04

欣赏美帖{:4_204:}

亦是金 发表于 2023-5-24 09:32

焱鑫磊发表于 2023-5-24 00:04
欣赏美帖

问好！谢谢欣赏！{:4_187:}

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

欣赏老师的美帖，问好！{:4_180:}

亦是金 发表于 2023-5-24 11:23

梦缘发表于 2023-5-24 11:05
欣赏老师的美帖，问好！

问好梦缘！祝你欣赏愉快！{:4_187:}

绿叶清舟 发表于 2023-5-24 20:54

欣赏精彩，画面太漂亮了

小辣椒 发表于 2023-5-24 21:12

发现2个视频背景，视频手机看不见，电脑才可以看见

页: [1] 2

花潮论坛's Archiver

《你最美丽你最亲》 - 云菲菲