三月的阳光 发表于 2023-9-28 23:21

中秋的月

<style>
#papa {
        margin: 100px -300px;
        width: 1164px;
        height: 620px;
        background: url('https://pic.imgdb.cn/item/65157a3bc458853aefc3503e.png') center/cover no-repeat;
        box-shadow: 3px 3px 2px #000;
        position: relative;
        z-index: 1;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#vid { display: none; }
#canv {position: absolute;
        display: block;
        left: 0%; mix-blend-mode:color-dodge;
        top: 0%;
        border-radius: 0%;
        opacity: 1;
        animation: opa 0s infinite alternate ;
}
#mplayer {
        position: absolute;
        left: calc(50% - 15px);
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        opacity: 0;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #ffffff;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 10px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent #ffffff;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 20px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }
</style>

<div id="papa">
<div class="blur"></div>
        <canvas id="canv"></canvas>
        <div id="mplayer"></div>
<div data-lrc="阳光别苑" id="lrc">阳光别苑</div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=507435369.mp3" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/38227146/01/33/51/62eb585b0211a.mp4" loop autoplay muted></video>

<script>
(function(){
let ctx = canv.getContext('2d');

let ww = canv.width =1164, hh = canv.height =620;

let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh);if(!vid.paused) {requestAnimationFrame(loop);return;}}
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<style type="text/css">#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;z-index: 4;
        left: 50%;
        transform: translate(-50%);
        top: 85%;
        font:normal 3em 华文隶书;
        color: #000078;
        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: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<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>

      <style type="text/css">
            .blur { width: 200px; height: 55px;
       filter: blur(8px);z-index: 1;
position: absolute;
top:2%; left:82%;
       background: #eeeeee url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d78822afcd8e69b7183994eb3368cb3b.jpg') center/cover no-repeat;
}
      </style>

三月的阳光 发表于 2023-9-28 23:21

又是一年中秋时，如果把过往的每一个中秋节都从记忆里拿出来，你会发现，你能记住的不超过五个，即使记住了这四五个中秋节，回忆里的那些中秋节的片段和场景也是模模糊糊，断断续续的。

而唯一的感受就是，每一个曾经的中秋节，都要比下一个现在的中秋节要多一层快乐。
之所以从前的月亮又圆又亮，那是因为从前的你还年轻，你的视力清晰，你的心情愉悦。

之所以，从前的月饼好吃，那是因为从前的商家童叟无欺，用真材实料，追求干净卫生，制造味美价廉。

最想想起的，还是童年的中秋节，月光穿过院子里的葡萄架，像一层银色的纱布铺在石桌上，团团圆圆的一家人沉浸在微微的秋风里，吃着月饼，看着月亮。

红影 发表于 2023-9-28 23:39

好漂亮的中秋贺帖，借阳光哥哥好帖，同祝大家中秋节快乐{:4_187:}

红影 发表于 2023-9-28 23:40

三月的阳光 发表于 2023-9-28 23:21
又是一年中秋时，如果把过往的每一个中秋节都从记忆里拿出来，你会发现，你能记住的不超过五个，即使记住了 ...

只要中秋这个美好的节日还在，又何必感慨，一年年人会老去，而亲情永远都在{:4_204:}

小辣椒 发表于 2023-9-28 23:42

阳光这个背景很漂亮，中秋节快乐！

三月的阳光 发表于 2023-9-28 23:43

红影 发表于 2023-9-28 23:39
好漂亮的中秋贺帖，借阳光哥哥好帖，同祝大家中秋节快乐

这帖不难的，同祝大家中秋节快乐~~{:4_187:}

三月的阳光 发表于 2023-9-28 23:44

红影 发表于 2023-9-28 23:39
好漂亮的中秋贺帖，借阳光哥哥好帖，同祝大家中秋节快乐

童年的记忆都是最美的~~{:4_173:}

三月的阳光 发表于 2023-9-28 23:45

小辣椒 发表于 2023-9-28 23:42
阳光这个背景很漂亮，中秋节快乐！
师傅，中秋节快乐哈~~{:4_187:}

小辣椒 发表于 2023-9-28 23:46

三月的阳光 发表于 2023-9-28 23:45
师傅，中秋节快乐哈~~

最近忙S了，阳光我先下了，晚安

三月的阳光 发表于 2023-9-28 23:47

小辣椒 发表于 2023-9-28 23:46
最近忙S了，阳光我先下了，晚安

好的，我也要准备下，师傅，晚安~~{:4_187:}

红影 发表于 2023-9-29 09:04

三月的阳光 发表于 2023-9-28 23:43
这帖不难的，同祝大家中秋节快乐~~

这个制作很喜庆呢，阳光哥哥的构思真好{:4_204:}

红影 发表于 2023-9-29 09:05

三月的阳光 发表于 2023-9-28 23:44
童年的记忆都是最美的~~

是啊，可惜再也回不去童年了{:4_173:}

世外桃源 发表于 2023-9-29 10:23

欣赏欣赏

世外桃源 发表于 2023-9-29 10:23

中秋节快乐！

梦油 发表于 2023-9-29 10:55

祝阳光朋友中秋快乐、万事如意。
页: [1]
查看完整版本: 中秋的月