马黑黑 发表于 2022-11-18 07:56

萬劍歸宗

<style>
#papa {
        margin: 0 0 0 calc(50% - 681px);
        width: 1200px;
        height: 750px;
        background: #666 url('https://638183.freep.cn/638183/t22/webp/wjgz.webp') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
}
#papa::before, #papa::after {
        --delay: 0s;
        position: absolute;
        content: url('https://638183.freep.cn/638183/t22/webp/jm.webp');
        opacity: 1;
        animation: change 2s var(--delay) infinite alternate;
}
#papa::after { --delay: 1s; top: 40px; right: 40px; transform: rotate(45deg); }
@keyframes change { to {opacity: .15; } }
</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1453326535" loop autoplay></audio>

<script>
(function(mkPlayer) {let defaults = {lrcAr : [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%); --bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65));',player_css : 'bottom: 10px; left: calc(50% - 60px); --track: hsla(100,30%,80%,.65); --prog: hsla(100,60%,50%,.55); --color: silver;',playerCode : `<style>#mplayer { position: absolute; }#btnwrap { display: block; fill: var(--color); opacity: .85; cursor: pointer; }#btnwrap:hover { opacity: 1; }#track {fill: none; stroke: var(--track); }#prog {fill: none; stroke: var(--prog); }#tmsg { fill: var(--color); stroke: none; font: bold 1em sans-serif; }#lrc { --motion: cover2; --tt: 1s; --state: running; --bg: red; position: absolute; font: bold 2.4em sans-serif; color: hsl(100,100%,90%); white-space: nowrap;-webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); z-index: 900; }#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: var(--bg); filter: inherit; -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><svg id="mplayer" width="120" height="120"><g id="circle_wrap" transform="rotate(-90, 60, 60)" style="cursor: pointer;"><circle id="track" cx="60" cy="60" r="50" stroke-width="10" /><circle id="prog" cx="60" cy="60" r="50" stroke-width="10" /></g><g id="btnwrap"><path id="btnplay" d="M 50 50,50 70,70, 60 z"></path><path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z" style="display: none;"></path><path d="M 57 50,60 50,60 70,57 70 z" fill="transparent" /></g><path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/><path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/><g id="tmsg"><text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text><text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text></g></svg><div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>`,};let playCode = (user_config) => {let data = Object.assign({},defaults,user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, cc = {x: 1 * track.getAttribute('cx'),y: 1 * track.getAttribute('cy'),len: track.getTotalLength(),};prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();circle_wrap.onclick = (e) => {let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * deg / 360;};aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = toMin(aud.duration);for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = data.lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for(j = 0; j < data.lrcAr.length; j ++) {if(aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.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;};};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [
        ,
];
HCPlayer({
        lrcAr: lrcAr,
        player_css: 'bottom: 20px; left: calc(50% - 60px); --track: #bacac6; --prog: #2edfa3; --color: #e3f9fd; opacity: .85;',
        lrc_css: 'top: 20px; left: 50%; transform: translateX(-50%); --bg: #a4e2c6;',
});
</script>

马黑黑 发表于 2022-11-18 07:56

本帖最后由 马黑黑 于 2022-11-18 08:10 编辑

本帖演示测试中的圆环播放器插件。若使用此插件,可以减少播放器、lrc歌词对编写代码的干扰,做帖时能更专注于帖子内容。

使用了播放器插件,你的帖子代码结构将如下所示:

<style>
#papa {
      /* css代码 */
}
/* 帖子相关的其他CSS代码 */
</style>

<div id="papa">
    <!-- 帖子内容的HTML代码 -->
</div>
<audio id="aud" src="音频地址" loop autoplay></audio>

<script>
//播放器+lrc歌词插件代码(略)

let lrcAr = [
      ,
];

HCPlayer({
      lrcAr: lrcAr,
      player_css: 'bottom: 20px; left: 20px; --track: #bacac6; --prog: #2edfa3; --color: #e3f9fd; opacity: .85;',
      lrc_css: 'top: 20px; left: 50%; --bg: #a4e2c6;',
});
</script>


彩色部分的代码是基于播放器和lrc歌词的,发帖要操作的部分。其中:

    蓝色部分是必须的,它是调用插件功能的固定格式;
    红色部分必须给出,同步歌词所依赖的歌词数组(发纯音乐帖子时做标题用);
    粉色部分可以不要,不要的话就是使用插件的预设样式。

马黑黑 发表于 2022-11-18 07:56

本帖最后由 马黑黑 于 2022-11-18 08:13 编辑

插件代码(做帖时不用去理睬它,让它放在自己的位置就行):
(function(mkPlayer) {let defaults = {lrcAr : [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%); --bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65));',player_css : 'bottom: 10px; left: calc(50% - 60px); --track: hsla(100,30%,80%,.65); --prog: hsla(100,60%,50%,.55); --color: silver;',playerCode : `<style>#mplayer { position: absolute; }#btnwrap { display: block; fill: var(--color); opacity: .85; cursor: pointer; }#btnwrap:hover { opacity: 1; }#track {fill: none; stroke: var(--track); }#prog {fill: none; stroke: var(--prog); }#tmsg { fill: var(--color); stroke: none; font: bold 1em sans-serif; }#lrc { --motion: cover2; --tt: 1s; --state: running; --bg: red; position: absolute; font: bold 2.4em sans-serif; color: hsl(100,100%,90%); white-space: nowrap;-webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); z-index: 900; }#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: var(--bg); filter: inherit; -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><svg id="mplayer" width="120" height="120"><g id="circle_wrap" transform="rotate(-90, 60, 60)" style="cursor: pointer;"><circle id="track" cx="60" cy="60" r="50" stroke-width="10" /><circle id="prog" cx="60" cy="60" r="50" stroke-width="10" /></g><g id="btnwrap"><path id="btnplay" d="M 50 50,50 70,70, 60 z"></path><path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z" style="display: none;"></path><path d="M 57 50,60 50,60 70,57 70 z" fill="transparent" /></g><path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/><path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/><g id="tmsg"><text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text><text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text></g></svg><div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>`,};let playCode = (user_config) => {let data = Object.assign({},defaults,user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, cc = {x: 1 * track.getAttribute('cx'),y: 1 * track.getAttribute('cy'),len: track.getTotalLength(),};prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();circle_wrap.onclick = (e) => {let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * deg / 360;};aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = toMin(aud.duration);for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = data.lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for(j = 0; j < data.lrcAr.length; j ++) {if(aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.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;};};mkPlayer.HCPlayer = playCode;})(this);

马黑黑 发表于 2022-11-18 07:56

本帖最后由 马黑黑 于 2022-11-18 08:51 编辑

插件的调用与调配——
调用本插件语法:

HCPlayer({
        lrcAr: lrc歌词数组,
        player_css: 'CSS描述语句',
        lrc_css: 'CSS描述语句',
});


共3个接口参数,一一描述如下:

① lrcAr: lrc歌词数组

lrc歌词数组接受标准的花潮LRC在线歌词格式,例如,[, ,],如果是做纯音乐帖,可以是这样:

HCPlayer({
        lrcAr: ,
        //player_css: 'CSS描述语句',
        //lrc_css: 'CSS描述语句',
});


如果是歌词同步帖,因为歌词数组代码量较大,可以先声明,再把数组变量赋值给 lrcAr 接口参数:

let lrcAr = [
    ,
    // 其他歌词数组元素
];

HCPlayer({
        lrcAr: lrcAr,
        //player_css: 'CSS描述语句',
        //lrc_css: 'CSS描述语句',
});


② player_css: 'CSS描述语句'

这个接口接受播放器CSS样式,可以不提供,如果提供,必须包含 left(或right)、top(或bottom)、--track、--prog、--color 这5个属性,其中 --track 是底轨颜色、--prog 是进度轨颜色、--color 是文本和按钮颜色。例:

HCPlayer({
        lrcAr: ,
        //lrc_css: 'CSS描述语句',
        player_css: 'bottom: 20px; left: 50%; --track: #bacac6; --prog: #2edfa3; --color: #e3f9fd;',
});


也可以先声明字串,用变量给接口参数赋值(接口参数还可接受额外的CSS设定,看下面的粉色语句):

let player_css = 'bottom: 20px; left: 50%; --track: #bacac6; --prog: #2edfa3; --color: #e3f9fd; opacity: .8';

HCPlayer({
        lrcAr: ,
        //lrc_css: 'CSS描述语句',
        player_css: player_css,
});


③ lrc_css: 'CSS描述语句'

这个接口参数接受lrc歌词同步的CSS样式,可以不提供,如果提供,则必须包含left(或right)、top(或bottom)、--bg 共3个属性,其中 --bg 用于设定歌词同步颜色。例:

HCPlayer({
        lrcAr: ,
        lrc_css: 'top: 20px; left: 20px; --bg: #a4e2c6;',
        player_css: player_css,
});


也可以先声明字串,用变量给接口参数赋值(接口参数还可接受额外的CSS设定,看下面的粉色语句):

let lrcCss = 'top: 20px; left: 20px; --bg: #a4e2c6; opacity: .95';
let player_css = 'bottom: 20px; left: 50%; --track: #bacac6; --prog: #2edfa3; --color: #e3f9fd; opacity: .8';

HCPlayer({
        lrcAr: ,
        lrc_css: lrcCss,
        player_css: player_css,
});


三个接口参数都不是必须的,所以,调用插件功能最简单的语句是:

    HCPlayer({});


但帖子总不能只显示“花潮论坛lrc在线”字样,所以建议至少是这样调用插件:

HCPlayer({ lrcAr: , });


或写成分行的:

HCPlayer({
        lrcAr: ,
});


要弄清楚的是,lrc_css 和 player_css 这两个接口参数,如果需要提供,则要求必须包含的参数一个不能少。

马黑黑 发表于 2022-11-18 08:13

本帖最后由 马黑黑 于 2022-11-18 08:52 编辑

一楼帖子完整代码:<style>
#papa {
        margin: 0 0 0 calc(50% - 681px);
        width: 1200px;
        height: 750px;
        background: #666 url('https://638183.freep.cn/638183/t22/webp/wjgz.webp') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
}
#papa::before, #papa::after {
        --delay: 0s;
        position: absolute;
        content: url('https://638183.freep.cn/638183/t22/webp/jm.webp');
        opacity: 1;
        animation: change 2s var(--delay) infinite alternate;
}
#papa::after { --delay: 1s; top: 40px; right: 40px; transform: rotate(45deg); }
@keyframes change { to {opacity: .15; } }
</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1453326535" loop autoplay></audio>

<script>
(function(mkPlayer) {let defaults = {lrcAr : [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%); --bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65));',player_css : 'bottom: 10px; left: calc(50% - 60px); --track: hsla(100,30%,80%,.65); --prog: hsla(100,60%,50%,.55); --color: silver;',playerCode : `<style>#mplayer { position: absolute; }#btnwrap { display: block; fill: var(--color); opacity: .85; cursor: pointer; }#btnwrap:hover { opacity: 1; }#track {fill: none; stroke: var(--track); }#prog {fill: none; stroke: var(--prog); }#tmsg { fill: var(--color); stroke: none; font: bold 1em sans-serif; }#lrc { --motion: cover2; --tt: 1s; --state: running; --bg: red; position: absolute; font: bold 2.4em sans-serif; color: hsl(100,100%,90%); white-space: nowrap;-webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); z-index: 900; }#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: var(--bg); filter: inherit; -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><svg id="mplayer" width="120" height="120"><g id="circle_wrap" transform="rotate(-90, 60, 60)" style="cursor: pointer;"><circle id="track" cx="60" cy="60" r="50" stroke-width="10" /><circle id="prog" cx="60" cy="60" r="50" stroke-width="10" /></g><g id="btnwrap"><path id="btnplay" d="M 50 50,50 70,70, 60 z"></path><path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z" style="display: none;"></path><path d="M 57 50,60 50,60 70,57 70 z" fill="transparent" /></g><path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/><path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/><g id="tmsg"><text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text><text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text></g></svg><div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>`,};let playCode = (user_config) => {let data = Object.assign({},defaults,user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, cc = {x: 1 * track.getAttribute('cx'),y: 1 * track.getAttribute('cy'),len: track.getTotalLength(),};prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();circle_wrap.onclick = (e) => {let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * deg / 360;};aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = toMin(aud.duration);for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = data.lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for(j = 0; j < data.lrcAr.length; j ++) {if(aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.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;};};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [
        ,
];
HCPlayer({
        lrcAr: lrcAr,
        player_css: 'bottom: 20px; left: calc(50% - 60px); --track: #bacac6; --prog: #2edfa3; --color: #e3f9fd; opacity: .85;',
        lrc_css: 'top: 20px; left: 50%; transform: translateX(-50%); --bg: #a4e2c6;',
});
</script>


马黑黑 发表于 2022-11-18 09:20

重要:插件约定,帖子父框的id必须是 papa,所以,帖子HTML代码必须是这样的结构:

<div id="papa">...</div>

红影 发表于 2022-11-18 12:56

这个太方便了。那两侧的两把小剑也设计得精巧,这个是JS封装的具体应用,黑黑太棒了{:4_199:}

马黑黑 发表于 2022-11-18 13:00

红影 发表于 2022-11-18 12:56
这个太方便了。那两侧的两把小剑也设计得精巧,这个是JS封装的具体应用,黑黑太棒了

还不够方便,还需要改进一下接口参数。现在差不多调整好了,晚上发出来

梦油 发表于 2022-11-18 15:22

欣赏佳作,问候黑黑。

红影 发表于 2022-11-18 15:57

马黑黑 发表于 2022-11-18 13:00
还不够方便,还需要改进一下接口参数。现在差不多调整好了,晚上发出来

太好了,黑黑辛苦了。替花潮人谢谢你{:4_187:}

马黑黑 发表于 2022-11-18 17:54

红影 发表于 2022-11-18 15:57
太好了,黑黑辛苦了。替花潮人谢谢你

先整理几个,其余的有空再做

马黑黑 发表于 2022-11-18 17:58

梦油 发表于 2022-11-18 15:22
欣赏佳作,问候黑黑。

感谢支持

梦油 发表于 2022-11-18 20:18

马黑黑 发表于 2022-11-18 17:58
感谢支持

黑黑朋友别客气。

红影 发表于 2022-11-18 20:36

马黑黑 发表于 2022-11-18 17:54
先整理几个,其余的有空再做

把应该css做的事,除了必须的,都封装起来了,这样真方便{:4_187:}

马黑黑 发表于 2022-11-18 21:09

红影 发表于 2022-11-18 20:36
把应该css做的事,除了必须的,都封装起来了,这样真方便

基于播放控制器和歌词的CSS也被封装在里面了

马黑黑 发表于 2022-11-18 21:10

梦油 发表于 2022-11-18 20:18
黑黑朋友别客气。

{:4_191:}

泡沫 发表于 2022-11-18 21:34

厉害了黑黑,问好{:4_199:}

马黑黑 发表于 2022-11-18 21:49

泡沫 发表于 2022-11-18 21:34
厉害了黑黑,问好

{:4_190:}{:5_108:}

红影 发表于 2022-11-18 23:10

马黑黑 发表于 2022-11-18 21:09
基于播放控制器和歌词的CSS也被封装在里面了

真的太好了,省得看得晕了,下回直接套用封装的,也可以防止不小心就出错了{:4_173:}

马黑黑 发表于 2022-11-18 23:19

红影 发表于 2022-11-18 23:10
真的太好了,省得看得晕了,下回直接套用封装的,也可以防止不小心就出错了

插件的好处多多,即使插件像现在这个样子应用
页: [1] 2 3 4 5 6 7 8 9
查看完整版本: 萬劍歸宗