魏佳艺 - 寻光路
本帖最后由 醉美水芙蓉 于 2023-4-22 17:49 编辑 <br /><br /><style>#papa {margin: 50px 0 0 calc(50% - 593px);width: 1024px;height: 640px;background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/a9903bbafba80f349d5c6f787021ab4d.jpg') no-repeat center/cover;box-shadow: 0 0 8px #444;position: relative;--state: paused;}
#lrc {--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6));position: absolute;left: 50%;bottom: 20px;transform: translate(-50%);font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));}
#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-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="papa">
<css-doodle id="mplayer" click-to-update>
:doodle {
@grid: 5 / 200px;
@shape: circle;
position: absolute;
left: 750px;
top: 20px;
filter: drop-shadow(10px 10px 20px snow);
cursor: pointer;
}
background: #@repeat(6, @p());
@shape: clover @p(3,4,5);
@size: @r(20, 40)px;
animation: rot 6s infinite linear var(--state);
@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music272139968.mp3" autoplay loop></audio>
</div>
<script>
let mKey = 0, mFlag = true;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let scriptEle = document.createElement('script');
scriptEle.setAttribute('type','text/javascript');
scriptEle.setAttribute('src','https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js');
document.head.appendChild(scriptEle);
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('seeked', () => calcKey());
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};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);};
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
</script> 芙蓉制作得真漂亮。赞~~~~~~~~~~~~~{:4_171:} 真美丽，人美歌好听，欣赏点赞！{:4_176:} 加林森 发表于 2023-4-22 18:48
芙蓉制作得真漂亮。赞~~~~~~~~~~~~~
队长晚上好！ 梦缘 发表于 2023-4-22 19:16
真美丽，人美歌好听，欣赏点赞！
谢谢朋友支持！ AI美女。欣赏美作。 黑黑的醉新3D球播放器，这个制作漂亮。欣赏水芙蓉好帖{:4_199:} 醉美水芙蓉 发表于 2023-4-22 19:19
队长晚上好！
芙蓉晚上好！ 马黑黑 发表于 2023-4-22 19:32
AI美女。欣赏美作。
谢谢黑黑老师分享代码！ 红影 发表于 2023-4-22 19:34
黑黑的醉新3D球播放器，这个制作漂亮。欣赏水芙蓉好帖
谢谢红影美女支持！ 欣赏水芙蓉精彩的制作{:4_199:} 小辣椒 发表于 2023-4-22 21:06
欣赏水芙蓉精彩的制作
小辣椒晚上好！ 醉美水芙蓉 发表于 2023-4-22 20:55
谢谢黑黑老师分享代码！
{:4_190:} 芙蓉的这个制作真漂亮 绿叶清舟 发表于 2023-4-22 21:19
芙蓉的这个制作真漂亮
清舟美女晚上好！ 醉美水芙蓉 发表于 2023-4-22 20:55
谢谢红影美女支持！
问好水芙蓉，晚上好{:4_204:} 太漂亮了！ 马黑黑 发表于 2023-4-22 19:32
AI美女。欣赏美作。
真的假的啊{:4_203:} 樵歌 发表于 2023-4-23 06:54
真的假的啊
这是一眼就瞧得出来是用AI绘制的镁铝。AI需要一个原形，也可以不需要，然后就绘制，你想要多美它就能画多美，不过这些画都有一个共同特点，就是一眼看得出来是出自AI之手 马黑黑 发表于 2023-4-23 07:17
这是一眼就瞧得出来是用AI绘制的镁铝。AI需要一个原形，也可以不需要，然后就绘制，你想要多美它就能画多 ...
那竹哪天做个尤物来看合不会胃口{:4_189:}
页:
[1]
2