『六·一』贺帖《棒棒哒》 - 好好（张轩睿） - 音乐沙龙 - 花潮论坛

亦是金 发表于 2023-5-31 09:14

『六·一』贺帖《棒棒哒》 - 好好（张轩睿）

本帖最后由亦是金于 2023-8-28 18:21 编辑 <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; opacity: .3; }
.vid2 { position: absolute; width: 600px; height: 400px; object-fit: cover; opacity: .6; }
.vid3 { position: absolute; width: 600px; height: 400px; object-fit: cover; opacity: .5; }

#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:-50px;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/13928806/00/40/95/600a88d1145fd.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;"></video>

<video frameborder="0" class="vid3" src="http://www.kumeiwp.com/sub/filestores/2023/05/22/0f6ae58a097aa6458b623b5256eaeeb0.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;"></video>

<metaname="referrer" content="never">
<video frameborder="0" class="vid2"src="https://img.tukuppt.com/video_show/2269348/00/16/34/5e9dd5ff00b88.mp4" autoplay muted loop="" controls="" style="MARGIN-TOP:0px;MARGIN-LEFT:0px;background:#000 ;width:1500px; height: 710px;-webkit-mask-image: radial-gradient(black 100%, transparent 100%);position:absolute;left:-120px;top:0px;"></video>

<div id="baiBox">
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:34px;">《棒棒哒》 </span>
<span style="color:#3d46f7;"><span style="font-size:18px;"> - 好好（张轩睿）</span>
</div></div>

<div style="position:absolute;bottom:10px;right:20px;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:24px;"> 亦是金在线音乐 </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 grid="5x1" id="mplayer">
   :doodle {
@grid: 2 / 1200px 710px;
bottom: 0px;
            left: 0px;
z-index: 999;
position:absolute;
   }
   clip-path: @shape(
            points: 200;
            r: cos(@pn(3,6,2,7,8)t);
   );
   background: radial-gradient(purple, orange, lightgreen);
   @nth(1,2,3,4,5,6) {
            @size: 100px;
            @place: 60px 60px;
            cursor: pointer; animation: rot 4s infinite linear var(--state);
   }
@nth(1) { @size: 55px; @place: 55% 34%; }
   @nth(2) { @size: 70px; @place: 75% 34%; }
   @nth(3) { @size: 60px; @place: 20% 26%; }
@nth(4) { @size: 80px; @place: 35% 55%; }
@nth(5) { @size: 155px; @place: 32% 45%; }
   @keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>

<css-doodle grid="5x1" click-to-update="">
:doodle { @size: 450px 1200px; top: 30px; left: 400px;}
   @size: 70px;
   @shape: circle;
   background: linear-gradient(to bottom,#fbc041 0%,#e9dfd1 100%);
   font: normal 30px / 30px sans-serif;
:after {
   content: @pn([六一节快乐]);
   font-family: '华文行楷',sans-serif;
   font-size: 3.0rem;
   color: #fd2e8f;
   text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
   font-weight: 900;
   letter-spacing: -2px;
}
   animation: fall 1s calc((@i - 1) * 1s) linear forwards var(--state);

@keyframes fall {
   from { transform: translateY(0); }/*变换：平移Y（0）；*/
      to { transform: translateY(510px); }
}
</css-doodle>

<css-doodle grid="16" id="fFloat">
:doodle {
@size: 1150px 680px;
}
position: absolute;
left: @r(255)%;
top: -10%;
:after {
position: absolute;
content: '@p( ♬, ♪, ♩,♫, ∮,棒棒哒, ✲, good, ❤, ☺, 棒, ★, ☆,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=1965091003" 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-31 10:02

亦是金老师的帖子里用了好多最新效果呢，如飘飞的花瓣，文字下降，还有花朵等，给亦是金老师点赞{:4_187:}

红影发表于 2023-5-31 10:05

谢谢亦是金老师制作的贺帖，也祝您节日快乐{:4_187:}

红影发表于 2023-5-31 10:06

这个旋转花朵有意思，制作了5朵，我这里好像只看到4朵？{:4_173:}

亦是金 发表于 2023-5-31 11:02

红影发表于 2023-5-31 10:02
亦是金老师的帖子里用了好多最新效果呢，如飘飞的花瓣，文字下降，还有花朵等，给亦是金老师点赞

问好红影！谢谢欣赏点评!{:4_187:}

亦是金 发表于 2023-5-31 11:03

红影发表于 2023-5-31 10:05
谢谢亦是金老师制作的贺帖，也祝您节日快乐

谢谢！也祝你节日快乐！{:4_187:}

亦是金 发表于 2023-5-31 11:05

红影发表于 2023-5-31 10:06
这个旋转花朵有意思，制作了5朵，我这里好像只看到4朵？

哈哈哈，我去找找第 5朵！{:4_189:}

梦缘发表于 2023-5-31 11:11

『六·一』《棒棒哒》，欣赏点赞！{:4_204:}

马黑黑 发表于 2023-5-31 12:37

精美的设计，赞

亦是金 发表于 2023-5-31 13:53

梦缘发表于 2023-5-31 11:11
『六·一』《棒棒哒》，欣赏点赞！

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

亦是金 发表于 2023-5-31 13:54

马黑黑发表于 2023-5-31 12:37
精美的设计，赞
问好老师！谢谢欣赏点赞！{:4_190:}

梦油发表于 2023-5-31 14:03

祝孩子们节日快乐！

亦是金 发表于 2023-5-31 14:28

梦油发表于 2023-5-31 14:03
祝孩子们节日快乐！

问好梦油！谢谢欣赏！{:4_190:}

一斛珠 发表于 2023-5-31 15:27

真好看啊{:4_199:}

梦油发表于 2023-5-31 15:29

亦是金发表于 2023-5-31 14:28
问好梦油！谢谢欣赏！

亦是金朋友别客气。

红影发表于 2023-5-31 17:29

亦是金发表于 2023-5-31 11:02
问好红影！谢谢欣赏点评!

这个帖子里好多欢乐的元素{:4_187:}

红影发表于 2023-5-31 17:30

亦是金发表于 2023-5-31 11:03
谢谢！也祝你节日快乐！

在这样的节日里，大家都成了超龄小朋友{:4_173:}

红影发表于 2023-5-31 17:32

亦是金发表于 2023-5-31 11:05
哈哈哈，我去找找第 5朵！

找到了么{:4_189:}

亦是金 发表于 2023-5-31 17:39

一斛珠发表于 2023-5-31 15:27
真好看啊

问好一斛珠！谢谢欣赏！{:4_187:}

亦是金 发表于 2023-5-31 17:39

梦油发表于 2023-5-31 15:29
亦是金朋友别客气。

问好！{:4_190:}

页: [1] 2 3

花潮论坛's Archiver

『六·一』贺帖 《棒棒哒》 - 好好（张轩睿）

『六·一』贺帖《棒棒哒》 - 好好（张轩睿）