工业风代码
<style>
#papa {
margin:auto;
width: 1024px;
height: 640px;
background: tan url('https://s1.ax1x.com/2023/06/13/pCeLGLt.jpg');
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
--state: paused;
}
css-doodle { position: absolute; }
</style>
<div id="papa">
<!-- 播放器 -->
<css-doodle grid="1" id="mplayer">
:doodle { @size: 400px; cursor: pointer; right: 490px; top: 110px; opacity: .96;z-index: 4; }
clip-path: @shape(
frame: 4;
points: 40;
x: cos(12t)^1 * cos(15t);
y: cos(12t)^1 * sin(15t););
background: linear-gradient(DeepSkyBlue,RoyalBlue,MediumPurple);
animation: rot 6s infinite linear var(--state);
@keyframes rot { to { transform: rotate(360deg); }}
</css-doodle><!-- 弧 -->
<css-doodle grid="6x1">
:doodle { @size: 1024px 640px;
background: url('https://s1.ax1x.com/2023/06/13/pCejaFK.jpg') no-repeat center / cover; box-shadow: 0 0 6px #000;
margin: 20px auto;}
@size: 120px;
position: absolute;
background: linear-gradient(Snow,RoyalBlue,DeepSkyBlue);
clip-path: @shape(
frame: 4;points: 40;
x: cos(12t)^1 * cos(15t);
y: cos(12t)^1 * sin(15t););
border-radius: 50%;
cursor: pointer;
offset-path: path('M310 70 A120 120 0 1 0 310 560');
offset-distance: calc((@i - 1) * 20%);
animation: rot 6s infinite linear var(--state);
@keyframes rot {
to {
transform: rotate(360deg);
}}
</css-doodle><!-- 粒子 -->
<css-doodle grid="40x1">
:doodle { @size: 1024px 640px; perspective: 60px; }
:container { transform-style: preserve-3d;}
background: @m(@r(140, 100), radial-gradient(@p(#00b8a9, #f8f3d4, #f6416c, #ffde7d) 10%, transparent 50%) @r(100%) @r(100%) / @r(1%, 3%) @lr no-repeat);
@size: 10%;
@place-cell: center;
border-radius: 30%;
animation: scale-up 48s calc(@i * -.4s) linear infinite var(--state);
@keyframes scale-up {
0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0);
}
10% { opacity: 0.9; }
95% { transform: translate3d(0, 0, @r(20vmin, 35vmin)) rotate(@r(-360deg, 360deg)); }
100% { opacity: 0; transform: translate3d(0, 0, 1vmin); }
}
</css-doodle>
<css-doodle id="lrc">
:doodle {
@size: auto 4em;
z-index:5;
bottom: 10px;
--geci: "
css-doodle player";
--motion: cover2; --tt: 1s;
}
/* 单元格两个伪元素显示lrc歌词 */
display: grid;
place-items: center start;
:before, :after {
content: var(--geci);
color: Honeydew; /* 歌词底色 */
font: bold 2em sans-serif;
text-shadow: 1px 1px 2px #000;
white-space: pre;
}
:after {
position: absolute;
width: 0;
color:RoyalBlue; /* 同步歌词颜色 */
overflow: hidden;
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%; } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1465313631" autoplay="autoplay" loop="loop"></audio>
</div>
<script>let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let lrcAr = [
[2.51,"单曲：化身孤岛的鲸",0.8],
[3.33,"歌手：周深",0.7],
[4.06,"所属专辑：化身孤岛的鲸",1.2],
[5.3,"作曲 : 徐浩",0.9],
[6.15,"编曲 : 唐汉霄",1.5],
[7.67,"制作人 : 唐汉霄",0.4],
[8.03,"学习黑师优弧劣弧路径作业之四",4.0],
[12,"我是只化身孤岛的蓝鲸",2.3],
[14.62,"有着最巨大的身影",2.9],
[19.17,"鱼虾在身侧穿行",2.5],
[23.35,"也有飞鸟在背上停",3.3],
[28.51,"",0.0],
[28.51,"我路过太多太美的奇景",3.0],
[31.75,"如同伊甸般的仙境",2.9],
[36.14,"而大海太平太静",2.6],
[40.65,"多少故事无人倾听",2.9],
[43.59,"",0.2],
[44.9,"我爱地中海的天晴",3.2],
[49.3,"爱西伯利亚的雪景",2.8],
[52.6,"爱万丈高空的鹰",1.9],
[54.73,"爱肚皮下的藻荇",2.0],
[57.63,"我在尽心尽力地多情",2.7],
[61.19,"直到那一天",1.8],
[63.01,"",2.6],
[65.56,"你的衣衫破旧",1.8],
[67.75,"而歌声却温柔",1.8],
[70.02,"陪我漫无目的地四处漂流",3.4],
[74.03,"我的背脊如荒丘",2.0],
[76.21,"而你却微笑摆首",2.0],
[78.97,"把它当成整个宇宙",3.0],
[82.66,"",0.6],
[83.3,"你与太阳挥手",1.2],
[84.87,"也同海鸥问候",1.8],
[87.14,"陪我爱天爱地的四处风流",3.3],
[91.16,"只是遗憾你终究",2.0],
[93.3,"无法躺在我胸口",2.0],
[96.29,"欣赏夜空最辽阔的不朽",2.9],
[99.77,"把星子放入眸",2.0],
[101.74,"",0.4],
[110,"我是只化身孤岛的蓝鲸",2.8],
[113.21,"有着最巨大的身影",3.3],
[117.85,"鱼虾在身侧穿行",2.3],
[121.86,"也有飞鸟在背上停",3.3],
[125.39,"",1.7],
[127.04,"我有着太冷太清的天性",3.1],
[130.37,"对天上的她动过情",2.8],
[134.92,"而云朵太远太轻",2.5],
[139.03,"辗转之后各安天命",3.3],
[142.28,"",0.3],
[143.48,"我未入过繁华之境",3.2],
[147.79,"未听过喧嚣的声音",2.9],
[151.2,"未见过太多生灵",1.7],
[153.37,"未有过滚烫心情",2.0],
[156.02,"所以也未觉大洋正中",3.1],
[159.72,"有多么安静",2.7],
[164.03,"",0.3],
[164.28,"你的衣衫破旧",1.7],
[166.43,"而歌声却温柔",1.7],
[168.45,"陪我漫无目的地四处漂流",3.5],
[172.55,"我的背脊如荒丘",1.9],
[174.76,"而你却微笑摆首",1.9],
[177.63,"把它当成整个宇宙",2.9],
[180.82,"",0.7],
[181.49,"你与太阳挥手",1.6],
[183.49,"也同海鸥问候",1.8],
[185.7,"陪我爱天爱地的四处风流",3.4],
[189.52,"只是遗憾你终究",2.2],
[191.85,"无法躺在我胸口",2.0],
[194.77,"欣赏夜空最辽阔的不朽",2.9],
[198.34,"把星子放入眸",2.5],
[200.97,"",6.1],
[207.1,"你的指尖轻柔",1.8],
[209.17,"抚摸过我所有",2.1],
[211.4,"风浪冲撞出的丑陋疮口",3.4],
[215.57,"你眼中有春与秋",1.9],
[217.71,"胜过我见过爱过",1.7],
[220,"的一切山川与河流",3.0],
[222.99,"",0.5],
[224.22,"曾以为我肩头",2.1],
[226.36,"是那么的宽厚",2.6],
[228.94,"足够撑起海底那座琼楼",3.7],
[232.68,"而在你到来之后",2.0],
[234.73,"它显得如此清瘦",2.9],
[237.64,"我想给你能奔跑的岸头",4.0],
[245.59,"让你如同王后",3.2]
];
let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.body.appendChild(script);
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr[mKey][1] + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr[j][0]) {cKey = j;if (mKey === j) showLrc(lrcAr[j][2]);else continue;}}mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`);});
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
#papa {
margin:auto;
width: 1024px;
height: 640px;
background: tan url('https://s1.ax1x.com/2023/06/13/pCeLGLt.jpg');
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
--state: paused;
}
css-doodle { position: absolute; }
</style>
<div id="papa">
<!-- 播放器 -->
<css-doodle grid="1" id="mplayer">
:doodle { @size: 400px; cursor: pointer; right: 490px; top: 110px; opacity: .96;z-index: 4; }
clip-path: @shape(
frame: 4;
points: 40;
x: cos(12t)^1 * cos(15t);
y: cos(12t)^1 * sin(15t););
background: linear-gradient(DeepSkyBlue,RoyalBlue,MediumPurple);
animation: rot 6s infinite linear var(--state);
@keyframes rot { to { transform: rotate(360deg); }}
</css-doodle><!-- 弧 -->
<css-doodle grid="6x1">
:doodle { @size: 1024px 640px;
background: url('https://s1.ax1x.com/2023/06/13/pCejaFK.jpg') no-repeat center / cover; box-shadow: 0 0 6px #000;
margin: 20px auto;}
@size: 120px;
position: absolute;
background: linear-gradient(Snow,RoyalBlue,DeepSkyBlue);
clip-path: @shape(
frame: 4;points: 40;
x: cos(12t)^1 * cos(15t);
y: cos(12t)^1 * sin(15t););
border-radius: 50%;
cursor: pointer;
offset-path: path('M310 70 A120 120 0 1 0 310 560');
offset-distance: calc((@i - 1) * 20%);
animation: rot 6s infinite linear var(--state);
@keyframes rot {
to {
transform: rotate(360deg);
}}
</css-doodle><!-- 粒子 -->
<css-doodle grid="40x1">
:doodle { @size: 1024px 640px; perspective: 60px; }
:container { transform-style: preserve-3d;}
background: @m(@r(140, 100), radial-gradient(@p(#00b8a9, #f8f3d4, #f6416c, #ffde7d) 10%, transparent 50%) @r(100%) @r(100%) / @r(1%, 3%) @lr no-repeat);
@size: 10%;
@place-cell: center;
border-radius: 30%;
animation: scale-up 48s calc(@i * -.4s) linear infinite var(--state);
@keyframes scale-up {
0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0);
}
10% { opacity: 0.9; }
95% { transform: translate3d(0, 0, @r(20vmin, 35vmin)) rotate(@r(-360deg, 360deg)); }
100% { opacity: 0; transform: translate3d(0, 0, 1vmin); }
}
</css-doodle>
<css-doodle id="lrc">
:doodle {
@size: auto 4em;
z-index:5;
bottom: 10px;
--geci: "
css-doodle player";
--motion: cover2; --tt: 1s;
}
/* 单元格两个伪元素显示lrc歌词 */
display: grid;
place-items: center start;
:before, :after {
content: var(--geci);
color: Honeydew; /* 歌词底色 */
font: bold 2em sans-serif;
text-shadow: 1px 1px 2px #000;
white-space: pre;
}
:after {
position: absolute;
width: 0;
color:RoyalBlue; /* 同步歌词颜色 */
overflow: hidden;
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%; } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1465313631" autoplay="autoplay" loop="loop"></audio>
</div>
<script>let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let lrcAr = [
[2.51,"单曲：化身孤岛的鲸",0.8],
[3.33,"歌手：周深",0.7],
[4.06,"所属专辑：化身孤岛的鲸",1.2],
[5.3,"作曲 : 徐浩",0.9],
[6.15,"编曲 : 唐汉霄",1.5],
[7.67,"制作人 : 唐汉霄",0.4],
[8.03,"学习黑师优弧劣弧路径作业之四",4.0],
[12,"我是只化身孤岛的蓝鲸",2.3],
[14.62,"有着最巨大的身影",2.9],
[19.17,"鱼虾在身侧穿行",2.5],
[23.35,"也有飞鸟在背上停",3.3],
[28.51,"",0.0],
[28.51,"我路过太多太美的奇景",3.0],
[31.75,"如同伊甸般的仙境",2.9],
[36.14,"而大海太平太静",2.6],
[40.65,"多少故事无人倾听",2.9],
[43.59,"",0.2],
[44.9,"我爱地中海的天晴",3.2],
[49.3,"爱西伯利亚的雪景",2.8],
[52.6,"爱万丈高空的鹰",1.9],
[54.73,"爱肚皮下的藻荇",2.0],
[57.63,"我在尽心尽力地多情",2.7],
[61.19,"直到那一天",1.8],
[63.01,"",2.6],
[65.56,"你的衣衫破旧",1.8],
[67.75,"而歌声却温柔",1.8],
[70.02,"陪我漫无目的地四处漂流",3.4],
[74.03,"我的背脊如荒丘",2.0],
[76.21,"而你却微笑摆首",2.0],
[78.97,"把它当成整个宇宙",3.0],
[82.66,"",0.6],
[83.3,"你与太阳挥手",1.2],
[84.87,"也同海鸥问候",1.8],
[87.14,"陪我爱天爱地的四处风流",3.3],
[91.16,"只是遗憾你终究",2.0],
[93.3,"无法躺在我胸口",2.0],
[96.29,"欣赏夜空最辽阔的不朽",2.9],
[99.77,"把星子放入眸",2.0],
[101.74,"",0.4],
[110,"我是只化身孤岛的蓝鲸",2.8],
[113.21,"有着最巨大的身影",3.3],
[117.85,"鱼虾在身侧穿行",2.3],
[121.86,"也有飞鸟在背上停",3.3],
[125.39,"",1.7],
[127.04,"我有着太冷太清的天性",3.1],
[130.37,"对天上的她动过情",2.8],
[134.92,"而云朵太远太轻",2.5],
[139.03,"辗转之后各安天命",3.3],
[142.28,"",0.3],
[143.48,"我未入过繁华之境",3.2],
[147.79,"未听过喧嚣的声音",2.9],
[151.2,"未见过太多生灵",1.7],
[153.37,"未有过滚烫心情",2.0],
[156.02,"所以也未觉大洋正中",3.1],
[159.72,"有多么安静",2.7],
[164.03,"",0.3],
[164.28,"你的衣衫破旧",1.7],
[166.43,"而歌声却温柔",1.7],
[168.45,"陪我漫无目的地四处漂流",3.5],
[172.55,"我的背脊如荒丘",1.9],
[174.76,"而你却微笑摆首",1.9],
[177.63,"把它当成整个宇宙",2.9],
[180.82,"",0.7],
[181.49,"你与太阳挥手",1.6],
[183.49,"也同海鸥问候",1.8],
[185.7,"陪我爱天爱地的四处风流",3.4],
[189.52,"只是遗憾你终究",2.2],
[191.85,"无法躺在我胸口",2.0],
[194.77,"欣赏夜空最辽阔的不朽",2.9],
[198.34,"把星子放入眸",2.5],
[200.97,"",6.1],
[207.1,"你的指尖轻柔",1.8],
[209.17,"抚摸过我所有",2.1],
[211.4,"风浪冲撞出的丑陋疮口",3.4],
[215.57,"你眼中有春与秋",1.9],
[217.71,"胜过我见过爱过",1.7],
[220,"的一切山川与河流",3.0],
[222.99,"",0.5],
[224.22,"曾以为我肩头",2.1],
[226.36,"是那么的宽厚",2.6],
[228.94,"足够撑起海底那座琼楼",3.7],
[232.68,"而在你到来之后",2.0],
[234.73,"它显得如此清瘦",2.9],
[237.64,"我想给你能奔跑的岸头",4.0],
[245.59,"让你如同王后",3.2]
];
let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.body.appendChild(script);
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr[mKey][1] + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr[j][0]) {cKey = j;if (mKey === j) showLrc(lrcAr[j][2]);else continue;}}mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`);});
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
前一篇: 走在阳光里（学习黑师《鹰》贴子效果）
下一篇: 工业风（学习黑师优弧劣弧路径作业之四第二版）
发表评论:
评论列表 [2条]
#2 | 马黑 于 2023-6-13 19:14 发布: 本地做帖，代码在编辑器里规范就好，发布到网上，可以压缩
#1 | 飞飞 于 2023-6-13 18:34 发布: 很努力的码清楚一些了。。。
