凄美地

亚伦影音工作室 发表于 2024-6-29 18:15

本帖最后由亚伦影音工作室于 2024-6-29 18:15 编辑 <br /><br /><style>
#tz {
   --width: 1164px;
   margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px));
   width: var(--width);
   height: 640px;
   background: url('https://pic.imgdb.cn/item/667f56fed9c307b7e9b4be19.jpg') no-repeat center/cover;
   box-shadow: 3px 3px 8px rgba(0, 0, 0, .6);
   overflow: hidden;
   position: relative;
}
#player {
   position: absolute;
   display: grid;
   place-items: center;
   left: 45%;
   top: 40%;
   width: var(--ww);
   height: var(--ww);
   background:url('https://pic.imgdb.cn/item/654c82b7c458853aefcb569f.png') no-repeat center/cover,url('https://pic.imgdb.cn/item/667f56fed9c307b7e9b4be19.jpg') no-repeat 60% 0/cover;
   border-radius: 50%;
   cursor: pointer;
   transition: .7s;
   animation: rot 6s linear infinite var(--state);
   --ww: 120px;
   --size: 5px;
}
#player:hover { filter: hue-rotate(30deg); }
c-c {
   position: absolute;
   width: var(--size);
   height: var(--size);
   border-radius: 80% 10%;
   background: #fff;
   box-shadow: 0 0 6px #000;
   animation: flyout 2s forwards;
}
#vid {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: calc(100% + 60px);
   object-fit: cover;
   mix-blend-mode: overlay;
   pointer-events: none;
}
#tz:fullscreen #vid { height: calc(100% + 100px); }
@keyframes flyout {
   to { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
}
@keyframes flyin {
   from { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
   to { transform: rotate(calc(var(--deg) * 2)) translateY(0); }
}
@keyframes rot {
   to { transform: rotate(360deg); }
}

#lrc{left: 15%;top: 80%;}#lrcc {right:15%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;z-index: 2;font:normal 3em 华文隶书;color: #000078;white-space: pre;-webkit-background-clip: text;z-index: 20;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background:repeating-linear-gradient(to right, #ff0000, lightgreen, snow, lightgreen, orange) 50%/200px 60px,var(--bg); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style>

<div id="tz">
   <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/2a/42/7d/129d42db5165a8ac9523e9a411fd72b3/audio.mp3" autoplay loop></audio>
   <video id="vid" src="https://img.tukuppt.com/video_show/13928806/00/41/16/600e82baca629.mp4" muted autoplay loop></video>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
   <div id="player" title="暂停"></div>
</div>

<script>
var ccs = [];
new Array(total = 80).fill(0).map((c,k) => {
   c = document.createElement('c-c');
   c.style.cssText += `--deg: ${360 / total * k}deg`;
   player.appendChild(c);
   ccs.push(c);
});
var mState = () => {
   player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   player.title = ['暂停','播放'][+aud.paused];
   ccs.forEach(cc => cc.style.animationName = aud.paused ? 'flyin' : 'flyout');
   aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
   papa: '#tz',
   css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: rgba(0,128,0,.5);',
});
</script>

<span id="lrcStr" style="visibility: hidden;">
作词 : 郭顶
作曲 : 郭顶
曾经我是不安河水
穿过森林误入你心
没计划扎营搁下了是非
一去不回
如今我是造梦的人吶
怅然若失流连忘返啊
等潮汐来临我就能记起
你的样子
我没看过
平坦山丘
怎么触摸
开花沼泽
嘿等我找到你
试探你眼睛
心无旁骛地相拥
那是我仅有的温柔也是我爱你的原因
在这凄美地
曾经这里是无人之地
为何没留下有效地址
肆意的消息迷失在十月
没有音讯
如今这里是风和日丽
等你再回来雨过迁徙
看夜幕将近我又能记起
你的样子
我还记得
平坦山丘
如今身在
开花沼泽
嘿等我找到你
试探你眼睛
心无旁骛地相拥
那是我仅有的温柔也是我爱你的原因
在这凄美地
在这之前
别说再见
我已再经不起离别
在这之前
别说再见
我已经开始了想念
在这之前
别说再见
请帮我停住这时间
就这样别安慰
嘿等我找到你
望住你眼睛
心无旁骛地相拥
那是我仅有的温柔也是我爱你的原因
如此不可及
如此不思议
让我坠落
在这凄美地
</span>
<script >
(function() {
/*变量：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
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) => {
lrca=lrcAr;
lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
let Y=String(mKey/2).indexOf(".");
if (Y == -1)
{
0==mKey&&(lrc.innerHTML=lrca);
lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
lrcc.dataset.lrc = "";
lrc.style.setProperty('--motion', 'cover1');
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
}
else
{
lrc.innerHTML = lrcb;
lrcc.dataset.lrc = lrca;
lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
lrcc.style.setProperty('--tt', time + 's');
lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
}
mKey += 1;
};
/*函数：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.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;
}
}
});
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('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();

</script>

红影发表于 2024-6-29 18:51

有趣，把粒子做成了光盘的外边缘，让光盘的暂停和运转间多了灵动感{:4_199:}

红影发表于 2024-6-29 18:52

构思奇妙。欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2024-6-29 20:47

亚伦这个粒子效果，漂亮，光盘按钮也是不错{:4_199:}

老谟深虑 发表于 2024-6-30 12:37

欣赏老师的作品！

页: [1]

花潮论坛's Archiver

凄美地