论坛 › 欢乐水吧 › 《黑骏马》- 学习马老师和亚伦老师帖代码

杨帆 发表于 2025-9-7 21:58

《黑骏马》- 学习马老师和亚伦老师帖代码

本帖最后由 杨帆 于 2025-9-13 13:36 编辑 <br /><br /><style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; background:url('https://pic1.imgdb.cn/item/68bea85758cb8da5c888ec1e.jpg') no-repeat 50% 50%/100% 100%, linear-gradient(45deg, #e56420, #c22525, #3d9c31, #37bbde);--bg:none; --ma-size: 12%;user-select: none; overflow: hidden;}
#btnFs { right: 20px; top: 20px; color: #ccc; border-color: currentColor!important; }       
#ma {right: 5px; bottom: 5px; border-radius: 50%;z-index: 2; }
.vid {position: absolute; width: 100%; height:100%;opacity: .5; object-fit: cover; mask: linear-gradient(to bottom,red 40%,transparent 45%,transparent); -webkit-mask: linear-gradient(to bottom, red 40%,transparent 45%,transparent); }
#msvg line { stroke-dasharray: 4 8 2 4; stroke-dashoffset: 100%;z-index:2;animation: move 3s linear infinite alternate var(--state); }
@keyframes move { to { stroke-dashoffset: 0; } }
#ma:hover{animation-play-state: paused;z-index:2;}
.intro {margin: 0px0px;width: 100%; height:100%; position: absolute;background:url('https://pic1.imgdb.cn/item/68bea85758cb8da5c888ec1e.jpg') no-repeat 50% 50%/100% 100%, linear-gradient(45deg, #e56420, #c22525, #3d9c31, #37bbde);background-size: cover;background-blend-mode:hard-light;animation: hue-rotate 10s linear infinitevar(--state);z-index: 1;}
@keyframes hue-rotate {5%{ transform:scale(1); opacity: 1;filter: hue-rotate(0deg);}20%{ transform:scale(1); opacity: 1;filter: hue-rotate(360deg);}100%{transform:scale(8);opacity: 0;filter: hue-rotate(0deg)}}
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #00BFFF, #FFF0F5, #FFF8DC);
position: absolute;z-index: 3;left: 5%; top: 10%;transform: translate(0%);letter-spacing: 2px;font:normal 2.2em/1em YouYuan; font-weight:500;color:#C71585;white-space: pre;writing-mode: vertical-lr;-webkit-background-clip: text;filter:drop-shadow( #00FFFF 1px 0 0)drop-shadow(#00FFFF 0 1px 0)drop-shadow(#00FFFF -1px 0 0) drop-shadow(#00FFFF 0 -1px0);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 0%;color: transparent;overflow: hidden;white-space: pre;background: url('https://638183.freep.cn/638183/small/2025/dream.webp') center;background-clip: text;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 { from { height: 0; }to { height: 100%; } }
@keyframes cover2 { from { height: 0; }to { height: 100%; } }
#prog { position: absolute; cursor: pointer; opacity: .8; top: 45%; right: -2%; width:18%; height:6px; transform: rotate(-90deg);   border-radius: 3px;border:none;color:#FFD700; background: rgba(255,255,255,0.2);z-index: 2;display: var(--display);--display:inline;}
#prog::-webkit-progress-bar {background-color: #E6E6FA;}
#prog::-webkit-progress-value {background-color:#FFD700;}
#prog::-moz-progress-bar {background-color: #FFD700;}
#prog:hover::-webkit-progress-value {background: #FFC107; transition: background .2s ease;}
#prog:active::-webkit-progress-value {transform: scaleX(1.02); }
#dancer{z-index: 5;display: var(--display);--display:inline;}
</style>
<div id="pa">
<audio id="aud" src="https://upfile.mp3.wf/view.php/7e9bb0ff6a8ea5bc2e987c4a7bada93e.mp3" autoplay loop></audio>       
<video class="vid" src="https://upfile.mp3.wf/view.php/7f9f1d52f7c575953b6957576cd5d0b2.mp4" autoplay loop muted></video>
<div id="ma" ><svg id="msvg" width="100%" height="100%" viewBox="-80 -80 160 160"></svg></div>
<div class='intro'></div>
<div data-lrc="" id="lrc"></div>
<progress id="prog"></progress>
</div>
<script>
(function() {
let lrcStr = `
黑骏马 - 乌兰托娅 (Wulan Tuoya)
词：王刚
曲：郭永利
编曲：小多
亲爱的人那你骑着黑骏马
啊
让我感受那么多的地老天荒
嘿
喜欢你的歌飘在蓝天下
长调像岁月悠悠的情话
一匹黑骏马草原上潇洒
目光追随你开成遍野鲜花
爱上你的笑真诚不掺假
透明像湖水清澈的脸颊
喝惯马奶酒风雪都不怕
有你在身边就是爱的神话
心爱的人啊你骑着黑骏马
幸福的感觉飘成了彩霞
让我感受那么多的地久天长
地久天长就是自由的刹那
心爱的人啊你骑着黑骏马
憨憨的笑脸把忧伤融化
让我感受那么多的地老天荒
地老天荒就是有你的牵挂
爱上你的笑真诚不掺假
透明像湖水清澈的脸颊
喝惯马奶酒风雪都不怕
有你在身边就是爱的神话
心爱的人啊你骑着黑骏马
幸福的感觉飘成了彩霞
让我感受那么多的地久天长
地久天长就是自由的刹那
心爱的人啊你骑着黑骏马
憨憨的笑脸把忧伤融化
让我感受那么多的地老天荒
地老天荒就是有你的牵挂
心爱的人啊你骑着黑骏马
憨憨的笑脸把忧伤融化
让我感受那么多的地老天荒
地老天荒就是有你的牵挂
地老天荒就是有你的牵挂

`;
/*变量 ：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 '000:000';
        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')) : (lrc.style.setProperty('--state','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); /*获得歌词数组*/
})();

var pic = document.createElement('img'); pic.id ='dancer';pic.style.cssText = `position: absolute;left: 8px;bottom:1px;width: 166px;height:198px;mix-blend-mode: multiply; opacity: 1; z-index: 2;cursor: pointer;`; pic.title = '播放/暂停';pic.alt = ''; pic.src = 'https://pic1.imgdb.cn/item/68be8e9558cb8da5c8883b8b.gif'; pa.appendChild(pic);
</script>
<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
        var dr = Dr.dr(msvg);
        dr.circle(0, 0, 60, 'none', 'Gold', 5).set('stroke-dasharray', '4 8 2 10');
var tt = 8;
Array.from({length: tt}).forEach((_,k) => {
        dr.line(2, 0, 55, 0, 'PaleGreen', 3).transform(`rotate(${360/tt*k})`).set('stroke-dasharray', '8 2');
});
   aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
   prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
   prog.title ='进度调节' ;
   function updateProgDisplay() { prog.style.setProperty('--display', aud.paused ? 'none' : 'inline');}
   updateProgDisplay();
   aud.addEventListener('play', updateProgDisplay);
   aud.addEventListener('pause', updateProgDisplay);
const dancer = document.getElementById('dancer');
dancer.onclick = () => ma.click();
aud.onplaying = aud.onpause = () => {dancer.style.setProperty('--display' , aud.paused ? 'none ': 'inline');}
FS(pa, ma);
</script>

红影 发表于 2025-9-7 22:54

杨帆还对小播里的虚线偏移做了修改，进度条也设置了相应的颜色。
还有漂亮的歌词同步。

红影 发表于 2025-9-7 22:55

欣赏杨帆好帖{:4_199:}

杨帆 发表于 2025-9-7 22:57

红影 发表于 2025-9-7 22:54
杨帆还对小播里的虚线偏移做了修改，进度条也设置了相应的颜色。
还有漂亮的歌词同步。

鼓捣着玩呢，谢谢影子鼓励{:4_204:}

梦江南 发表于 2025-9-8 12:21

太精彩了，欣赏杨帆带来的好帖。{:4_187:}

杨帆 发表于 2025-9-8 15:45

梦江南 发表于 2025-9-8 12:21
太精彩了，欣赏杨帆带来的好帖。

问好江南，谢谢鼓励，祝开心{:4_204:}

红影 发表于 2025-9-8 22:57

杨帆 发表于 2025-9-7 22:57
鼓捣着玩呢，谢谢影子鼓励

这个制作很赞的{:4_187:}

小辣椒 发表于 2025-9-11 13:59

欣赏杨帆美制作，就是不知道是黑黑那个教程，小辣椒现在许多黑黑的教程没有学习了

杨帆 发表于 2025-9-11 15:09

小辣椒 发表于 2025-9-11 13:59
欣赏杨帆美制作，就是不知道是黑黑那个教程，小辣椒现在许多黑黑的教程没有学习了
问好小辣椒 ，谢谢鼓励{:4_204:}

不急，慢慢学，这个小播及进度条来自马老师贴Anger
https://www.huachaowang.com/foru ... =85978&fromuid=7894

澜天 发表于 2025-9-13 12:57

代码帖还有这样的啊
长见识了呢

杨帆 发表于 2025-9-13 13:00

澜天 发表于 2025-9-13 12:57
代码帖还有这样的啊
长见识了呢

问好澜天，鼓捣着玩呢。谢谢兄弟鼓励{:4_191:}

澜天 发表于 2025-9-13 13:16

杨帆 发表于 2025-9-13 13:00
问好澜天，鼓捣着玩呢。谢谢兄弟鼓励

我原以为代码贴
就是那种有边框
里面加上图和文字
也可以加上播放器的那种
还不知道代码的这种效果呢
黑骏马就是静止的图
加上了光影和移动
生动了很多呢
赞

杨帆 发表于 2025-9-13 13:22

本帖最后由 杨帆 于 2025-9-13 13:26 编辑

澜天 发表于 2025-9-13 13:16
我原以为代码贴
就是那种有边框
里面加上图和文字

是啊，代码帖制作也在与时俱进，该贴也学习了亚伦老师代码帖

澜天 发表于 2025-9-13 13:25

杨帆 发表于 2025-9-13 13:22
是，代码帖制作也在与时俱进，你对代码帖的印象还是以前的呢

朋友曾经给我一个现成的代码帖
发帖确实好看多了
就是换里面的文字有点麻烦
一不小心就发不出帖子
所以现在我还是老一套
图加文字加播放器三件套
{:5_117:}

杨帆 发表于 2025-9-13 13:30

澜天 发表于 2025-9-13 13:25
朋友曾经给我一个现成的代码帖
发帖确实好看多了
就是换里面的文字有点麻烦


是，形式服务于内容，这要看帖子要展示的重点是什么了

澜天 发表于 2025-9-13 13:47

杨帆 发表于 2025-9-13 13:30
是，形式服务于内容，这要看帖子要展示的重点是什么了

好的形式会凸显内容的

小辣椒 发表于 2025-9-16 15:44

杨帆 发表于 2025-9-11 15:09
问好小辣椒 ，谢谢鼓励

不急，慢慢学，这个小播及进度条来自马老师贴Anger


杨帆制作漂亮的{:4_187:}

杨帆 发表于 2025-9-16 16:44

小辣椒 发表于 2025-9-16 15:44
杨帆制作漂亮的

谢谢小辣椒鼓励~

你制作的帖子颇具特色，很是欣赏{:4_204:}

查看完整版本: 《黑骏马》- 学习马老师和亚伦老师帖代码