【冰心翻唱】失恋阵线联盟

冰心发表于 2023-7-3 22:21

本帖最后由冰心于 2023-7-3 22:25 编辑 <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/2475824/00/01/98/5b4f6dda0115f.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="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;"></video>

<metaname="referrer" content="never">
<video frameborder="0" class="vid2"src="https://img.tukuppt.com/video_show/2418175/01/30/92/62ccc87851587.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://www.joy127.com/url/105782.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());
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 = `
失恋阵线联盟
编辑：三月的阳光
演唱：冰心
她总是只留下电话号码
从不肯让我送她回家
听说你也曾经爱上过她
曾经也同样无法自拔
你说你学不会假装潇洒
却叫我别太早放弃她
把过去全说成一段神话
然后笑彼此一样的傻
我们这么在乎她却被她全部抹煞
越疼她越伤心永远得不到回答
到底她怎么想应该继续猜测吗
还是说好全忘了吧
找一个承认失恋的方法
让心情好好的放个假
当你我不小心又想起她
就在记忆里画一个 X
她总是只留下电话号码
从不肯让我送她回家
听说你也曾经爱上过她
曾经也同样无法自拔
你说你学不会假装潇洒
却教我别太早放弃她
把过去全说成一段神话
然后笑彼此一样的傻
我们这么在乎她却被她全部抹煞
越疼她越伤心永远得不到回答
到底她怎么想应该继续猜测吗
还是说好全忘了吧
找一个承认失恋的方法
让心情好好的放个假
当你我不小心又想起她
就在记忆里画一个 X
我们这么在乎她却被她全部抹煞
越疼她越伤心永远得不到回答
到底她怎么想应该继续猜测吗
还是说好全忘了吧
找一个承认失恋的方法
让心情好好的放个假
当你我不小心又想起她
就在记忆里画一个 X
就在记忆里画一个 X
就在记忆里画一个 X
`;

/*变量：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-7-3 22:25

@三月的阳光这效果老酷了赞哈

三月的阳光 发表于 2023-7-3 22:41

冰心发表于 2023-7-3 22:25
@三月的阳光这效果老酷了赞哈

哈哈，欣赏~~{:4_187:}

红影发表于 2023-7-3 22:43

这个不但唱得好听，帖子也做得很漂亮。阳光哥哥和冰心嫂子珠联璧合啊，太赞了{:4_199:}

冰心发表于 2023-7-3 22:43

三月的阳光发表于 2023-7-3 22:41
哈哈，欣赏~~

做贴辛苦哈哈哈哈这效果越看越耐看

小文发表于 2023-7-3 22:45

很不错，欣赏你们！

三月的阳光 发表于 2023-7-3 22:54

红影发表于 2023-7-3 22:43
这个不但唱得好听，帖子也做得很漂亮。阳光哥哥和冰心嫂子珠联璧合啊，太赞了

都说男女搭配干活不累~~{:4_173:}

红影发表于 2023-7-3 22:58

三月的阳光发表于 2023-7-3 22:54
都说男女搭配干活不累~~

你们搭配肯定更幸福呢{:4_187:}

冰心发表于 2023-7-3 23:18

小文发表于 2023-7-3 22:45
很不错，欣赏你们！

问好感谢临帖哈

冰心发表于 2023-7-3 23:19

三月的阳光发表于 2023-7-3 22:41
哈哈，欣赏~~

辛苦辛苦哈{:4_187:}

小文发表于 2023-7-3 23:19

冰心发表于 2023-7-3 23:18
问好感谢临帖哈

不客气哈！晚上好！

冰心发表于 2023-7-3 23:20

红影发表于 2023-7-3 22:43
这个不但唱得好听，帖子也做得很漂亮。阳光哥哥和冰心嫂子珠联璧合啊，太赞了

主要是帖子做的精彩效果老酷了

红影发表于 2023-7-4 08:34

冰心发表于 2023-7-3 23:20
主要是帖子做的精彩效果老酷了

阳光肯定是觉得歌声优美，老好听了。你们俩相互觉得对方的东西更好，这样的相处很美妙{:4_187:}

梦缘发表于 2023-7-4 10:58

问好老师，欣赏精彩分享，点赞！{:4_187:}

小辣椒 发表于 2023-7-4 12:32

非常棒的制作，阳光，冰心的精彩合作，赞的·~~{:4_178:}

小辣椒 发表于 2023-7-4 12:33

冰心唱的好听，阳光制作的多种效果也是精彩。。。{:4_178:}

冰心发表于 2023-7-4 15:58

红影发表于 2023-7-4 08:34
阳光肯定是觉得歌声优美，老好听了。你们俩相互觉得对方的东西更好，这样的相处很美妙

哈相辅相成哈精美画面也是增色不少哈

冰心发表于 2023-7-4 15:59

梦缘发表于 2023-7-4 10:58
问好老师，欣赏精彩分享，点赞！

问好梦可别叫老师不敢当哈

冰心发表于 2023-7-4 15:59

小辣椒发表于 2023-7-4 12:32
非常棒的制作，阳光，冰心的精彩合作，赞的·~~

好久不见哈问好咯

冰心发表于 2023-7-4 15:59

小辣椒发表于 2023-7-4 12:33
冰心唱的好听，阳光制作的多种效果也是精彩。。。

哈做贴多元化很精彩哈

页: [1] 2

花潮论坛's Archiver

【冰心翻唱】失恋阵线联盟