朵拉 发表于 2026-4-27 20:40

老派约会之必要（学习亚伦老师花潮小播）


<style>
#xiaobo {z-index: 100;
      width: 350px;
      height: 220px;
      margin: 100px 140px;
      position: relative;
      overflow: hidden;
      -state:paused;
      }
#bnt{margin: 182px 10px ; width: 20px; height: 20px;position: relative; cursor: pointer; z-index: 100;transition: all 1s;}
#cndpt{position: absolute; width: 100%; height: 100%;
   background:#ff0000;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 100%; height: 100%;
opacity:0;background:#ff0000;
   clip-path: polygon(75% 50%, 0 0, 0 100%)
}
#tmsg {position: absolute;
      font: 400 10px sans-serif;
      color: #ff0000;
         bottom: 10px;
      left:140px;}
#prog {position:absolute;
      width: 98%;
      height: 2px;background:#aaa;
      cursor: pointer;
         bottom: 2px;border-radius: 10px;
left:1%;}
#prog-bar {border-radius: 20px;
            height: 100%;
            background: #FF0000;
            width: 0%;
      }

.hexahedron {width: 210px;border: 2px solid #8b4523;
      height: 210px;
      margin: 0px 0px;
         position: relative; z-index: 1;
      background:#8E731B url('https://pic1.imgdb.cn/item/69ecb6581e5a74970113b0c1.jpg')no-repeat center/cover;
      border-radius: 12px;mask: radial-gradient(circle at 98% 50%,transparent 40px,#red 0%);-webkit-mask: radial-gradient(circle at 98% 50%,transparent 40px,red 0%); }

#cp { position: relative; top: 0px; left: 0px;width: 200px; height: 200px;transition: 6s;animation:opentop 0.5s linear 1s ;background:repeating-radial-gradient(#8b4512, #8B4513 8px, #aaaaaa 9px);border-radius: 50%;}
.overlay {
content: '';
left: 0px;
top: 0px;
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(55deg, transparent, 40%, rgba(255,255,255,0.35),60%, transparent);
border-radius: 50%;
}


.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
box-shadow:0px 0px 0px 1px #333,0px 0px 0px 2px #aaa;
background:#6a4532 url()no-repeat center/cover;

border-radius: 50%;
}
.inner::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: #aa2;
border-radius: 50%;
}

#all {position: absolute;width:200px; height:200px;top: 7px; left: 110px;z-index: -1; transition: 2s; animation:tion3s linear 1.5s infinite}
@keyframes opentop { 0% {transform: translatex(-50px);} 100% { transform:rotateX(0px);}}
@keyframes tion { 0% {} 100% { transform:rotate(360deg) } }
#smsvg{ z-index: 10;position: relative;
    left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.lrc{z-index: 20;text-align: center;
    width: 620px;bottom:0px; left:0%;
    height: 150px;
    overflow: hidden;
    display: block;position: relative;
    margin: 10px auto;}
#lrc { --motion: cover2; --tt: 1s; --bg: linear-gradient(90deg,#e56420, #c22525, #3d9c31, #37bbde, #000080,#ff0000) ; position: absolute;bottom: 60px; left: 50%; text-align: center;transform: translateX(-50%);font: 300 3em "Ma Shan Zheng","SimHei", "Arial", "sans-serif"; color:#000080; 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); pointer-events: none; z-index: 100;}
      #lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg);background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }

</style>
<div id="xiaobo">

<div class="hexahedron">
<div id="bnt" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div>
<div id="tmsg">00:00/00:00</div>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
</div>
<div id="all">
<divid="cp" ><div class="inner"><svgid="smsvg"width="200px" height="200px">
        <defs>
                <path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/>
        </defs>
        <text dx="77" dy="77" font-size="10" fill="#fff000"font-family="'楷体'">
                <textPath href="#path" textLength="535"> 花潮论坛 朵儿音悦吧 </textPath>
        </text>
</svg>
</div><div class="overlay"></div></div>
</div>
</div>


<divclass="lrc">
<div id="lrc" data-lrc="">geci</div>
</div>

<audio id="audio" src="https://upfile.mp3.wf/view.php/54adca0f3f6d2de8ea0f235fa46294ee.mp3" loop autoplay></audio>

<script>

var mState = () => audio.paused ?
( bnt.style.setProperty( 'paused'),bnt.title = '点击播放' ) :
( bnt.style.setProperty( 'running'),bnt.title = '点击暂停' );
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
bnt.onclick = () => audio.paused ? (audio.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1',all.style.left = '110px',all.style.animationPlayState = 'running') : (audio.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0',all.style.left = '30px',all.style.animationPlayState = 'paused');


prog.onclick = (e) => { audio.currentTime = audio.duration * e.offsetX / prog.offsetWidth;}
var progBar = document.getElementById('prog-bar');
audio.addEventListener('timeupdate', () => {
          varpercent= (audio.currentTime / audio.duration) * 100;
            progBar.style.width = percent + '%';
      });

audio.addEventListener('timeupdate', () => {
                tmsg.innerText = toMin(audio.currentTime) + ' | ' + toMin(audio.duration);});


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;
      };

</script>

<script >
(function() {
let gc=`
老派约会之必要 - MC 张天赋

作词：黄伟文

作曲：GooChan/MC 张天赋

编曲：GooChan/黄兆铭

制作：朵拉

2026—04—27

该怎么初次约会 实在极费思量
起初先推我两次 挫我气焰都正常
再约便说好 以里数换你奖赏
找一间小店吃饭 浪漫大戏开场
于烛光跟笑意里 谈谈童年 提及理想
吃到侍应生 静静话现已打烊
饭后未倦吗 跟我逛逛 再送你归家
我可以为你 关起手机 纯灵魂对话
怎知道霎眼 就谈到 赤柱了
错过了 你我的家
宁像个书生 初约佳人
与你有种牵引
蝴蝶满心飞 不过 未走近
胜过世间一见就吻
多想 一见即吻 但觉相衬
何妨从夏到秋 慢慢抱紧
明月正偷窥 这对璧人
两个坐这么近
何用太心急 一晚露底藴
故作老派手却在震
承袭 古典小说里优雅的情感
情愿 待新婚才献吻
不急于一晚散尽 十万夜那温柔
一针针 跟你刺绣
年华悠悠 怎会闷透
访西厢 登红楼 仍携着你手
初邂逅
我喜欢双双 漫步在雾里
赶摊牌 实在是没趣
跟你这 一种老派鸳侣
只想约会到八千岁
微醉写诗作对 下去
宁像个书生 初约佳人
与你有种牵引
蝴蝶满心飞 不过 未走近
胜过世间一见就吻
多想 一见即吻 但觉相衬
何妨从夏到秋 慢慢抱紧
明月正偷窥 这对璧人
两个坐这么近
何用太心急 一晚露底藴
故作老派手却在震
承袭 古典小说里优雅的情感
谁狂热 会自焚
谁又要火速 私订终身
与你有种牵引
甜蜜每日一小片比较动人
胜过世间一见就吻
情是 今晚浅酌过 一世都微醺
重演 父母初相识 的气氛
我俩这天初约
逛遍市区所有路灯
与你有种恋爱预感
`;

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;
};


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;
};
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 calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
               
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (audio.currentTime - lrcAr);
       
        showLrc(time);
};

let mState = () => audio.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));
audio.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});

audio.addEventListener('pause', () => mState());/**/
audio.addEventListener('play', () => mState());/**/
audio.addEventListener('seeked', () => calcKey());/**/
let lrcAr = getLrcAr(gc); /**/

})();
</script>

朵拉 发表于 2026-4-27 20:43

@亚伦影音工作室
亚伦老师好，学生交作业，请您指正{:4_190:}

亚伦影音工作室 发表于 2026-4-27 20:47

朵拉 发表于 2026-4-27 20:43
@亚伦影音工作室
亚伦老师好，学生交作业，请您指正

悟性很高，背景不够鲜明！

红影 发表于 2026-4-28 19:49

好漂亮的制作。欣赏朵宝好帖{:4_199:}
页: [1]
查看完整版本: 老派约会之必要（学习亚伦老师花潮小播）