论坛 › 欢乐水吧 › 祝论坛美女们节日快乐！

亚伦影音工作室 发表于 2024-3-7 11:20

祝论坛美女们节日快乐！

本帖最后由 亚伦影音工作室 于 2024-4-4 18:49 编辑 <br /><br /><style>
#papa { margin: 120px -300px; width: 1164px; height: 620px; background:#880000 url('http://img3.oldkids.cn/upload/2023/08/21/blog_260848550_20230821110712704.jpg') no-repeat center/cover; box-shadow: 0px 0px 0px #ffffff; position: relative; z-index: 1; display: grid; overflow: hidden; place-items: center;}

#mplayer {z-index: 40;position: absolute;top:20%;left:20%;width: 120px;height:120px;background: url('https://pic.imgdb.cn/item/65bf4406871b83018a08c712.png') no-repeat center/cover;cursor: pointer;animation: spin 26s 8;}
@keyframes spin {0% {transform: rotate(360deg);}50% {transform: rotate(0deg) translate(300% );} 100% {transform: rotate(0deg);}}

#lrc{left: 10%;top: 80%;}#lrcc {right:10%;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:bold 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 -1px 0);}
#lrcc::before,#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 {}
.list{list-style: none;margin-top: 50px; margin-left: 0px;width:600px;height:400px;position:absolute;z-index: 2;overflow:hidden;}
.list pp{width: 100%;height: 600px;position:relative;animation: myfirst 50s 8 ;line-height: 600px;text-align: center;font: normal 3.5em 黑体;color: rgb(255, 255, 255,0);transition: all .5s;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);}
@keyframes myfirst {0% {opacity: 0;color:#000000;transform:scale(0)}10% {opacity: 1;color: #800000;transform:scale(1)}15% {opacity: 1;color: #800000;transform:scale(1)}50%{opacity: 0;color: rgb(255, 255, 255,0);transform:scale(1) }}

#picblock {width:4656px;         /* 不含最后一张图片的宽度 */
           height:100%;          /* 全部图片高度 */
           animation: picMoveLeft 40s linear infinite;                                                      
           position:absolute; }
#picblock > img {float:left;width:388px; height:100%; margin-right:0px; -webkit-mask-size: cover;}
#slideFrame {position:relative;width:100%;height:100%;overflow:hidden;}

@keyframes picMoveLeft        { /* 动画定义 底部定位 向左移        */ 0% {left:0px;} /* 起始位置 总宽度 - 框宽 4800 - 960*/                                             40%{left:-3492px}/* 结束位置 起始位置 - 不含最后两张图片的总宽度 */
50%{left:-3492px}/* 结束位置 起始位置 - 不含最后两张图片的总宽度 */
99%{left:0px;}/* 结束位置 起始位置 - 不含最后两张图片的总宽度 */
100%{left:0px;}/* 结束位置 起始位置 - 不含最后两张图片的总宽度 */
}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; bottom: 90%; right: 4%;color:#000000;font:bold 2.5em 仿宋; opacity: 1; cursor: pointer; z-index: 166}
</style>
<div id="papa">
<div id="slideFrame">
<div id="picblock" >
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/4fb836ea4b20f48a96d08e246c8bd82f.jpg" />
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/b5da571a8f13a78bf0e7be5716f04acf.png" />
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/a46d848cbace36f8de52dfece98716a2.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_640%2ch_1138" />
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/f70c4bbda6e3090ca2fec163ce720af1.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_640%2ch_1138" />
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/339214b9e7c76596e8dc5616011fead5.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_640%2ch_1138" />
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/9fc8436b5e55630f312755005d2c9c37.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_640%2ch_1138" />
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/cb813aaee6ff6c93b63764c3219a7e75.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_640%2ch_1138" />
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/07d8e8a69830f56b62694018dd4fd8e8.png?x-oss-process=image%2fresize%2cm_lfit%2cw_640%2ch_1138" />
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/a0ea6b2773cc64a9c04af127c9ef18bb.png?x-oss-process=image%2fresize%2cm_lfit%2cw_640%2ch_1138" />
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/c71b844ae9692618bbc5d3eb71409b2b.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_640%2ch_1138" />
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/da8f8573f524dba7f67fa04ffe2a92e4.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_640%2ch_1138" />
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/25b87296c5c2b0dbddb4aeaa7df0f8ec.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_640%2ch_1138" />
</div></div>
<span id="fullscreen" title="全屏欣赏/退出全屏">全屏</span>
<audio id="MusicPlayer" src="https://wp.shq.cab/view.php/0c77cecf283541f7ca695a45b1032a04.mp3" loop autoplay>
</audio>
<ul class="list">
    <pp><p id="ti">祝论坛美女们节日快乐！</p><br><p style="zoom: .7" id="aaa">歌曲《中国旗袍》<br><br>亚伦影音工作室<br><br>演唱:阿正</p></pp>
</ul>
<div id="mplayer" title="暂停/播放"></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>               
</div>
<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 (MusicPlayer.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (MusicPlayer.currentTime - lrcAr);
        showLrc(time);
};

/*函数 ：关键帧动画状态切换*/
let mState = () => MusicPlayer.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");
/*监听播放进度*/
MusicPlayer.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (MusicPlayer.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});
mplayer.onclick = () => MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause();
picblock.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>picblock.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>picblock.style.animationPlayState = 'paused');

MusicPlayer.addEventListener('pause', () => mState());/*监听暂停事件*/
MusicPlayer.addEventListener('play', () => mState());/*监听播放事件*/
MusicPlayer.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出',papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
</script>

流水光阴 发表于 2024-3-7 11:27

漂亮漂亮 旗袍美女{:4_199:}

流水光阴 发表于 2024-3-7 11:27

祝论坛美女们节日快乐！

流水光阴 发表于 2024-3-7 11:27

问好老师谢谢分享{:4_187:}

小辣椒 发表于 2024-3-7 12:18

亚伦好，今天是全美女出镜了，全旗袍女，女人节好素材{:4_199:}

小辣椒 发表于 2024-3-7 12:18

特效也是漂亮，美女靓丽歌曲好听，很美的制作。{:4_178:}

小辣椒 发表于 2024-3-7 12:19

感谢亚伦分享精美的贺帖，借美帖贺美女们女神节快乐！

庶民 发表于 2024-3-7 13:05

祝福节日。

梦油 发表于 2024-3-7 14:40

祝花潮论坛的各位女士们节日快乐！

红影 发表于 2024-3-7 15:40

真漂亮的美女图的滚动，按钮也很奇特。欣赏亚伦老师精美祝福帖。借帖同祝论坛女性们节日快乐{:4_199:}

樵歌 发表于 2024-3-7 20:42

个个不食人间烟火的仙子。美极

查看完整版本: 祝论坛美女们节日快乐！