《我从哪里来哪里去》（学习黑黑代码效果）
<style>#papa { margin: 20px 0 20px calc(50% - 681px); width: 1200px; height: 675px; background: tan; box-shadow: 3px 3px 6px gray; z-index: 1; overflow: hidden; user-select: none; display: grid; place-items: center; position: relative; }
.vid { position: absolute; top: 0; width: 100%; height: 100%; object-fit: cover; }
.vid:nth-of-type(2) { left: 480px; width: 1024px; height: 520px;clip-path: inset(0 220px 160px 250px round 10px 20px 220px 262px);mix-blend-mode: darken; opacity: 0.55;}
.vid:nth-of-type(3) { left: 10px; top: 60px; width: 390px; height: 220px;border-radius: 0px 100px 80px 0px;mix-blend-mode: screen; opacity: 0.8;}
.vid:nth-of-type(4) { width: 130px; height: 130px; right: 440px; top: 530px; box-shadow: 0 0 6px #00FFFF; border-radius: 50%; cursor: pointer; mix-blend-mode: screen; transform: skew(0deg); }
#textClock { position: absolute; left: 35px; top: 20px; font-size: 20px; color: LightSteelBlue; font-family:微软雅黑; text-shadow:1px 1px 2px #222222; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1357628162" autoplay loop></audio>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6cc57e1cd4f962cfeb5ed78b20cc6155_preview.mp4 " poster="https://638183.freep.cn/638183/web/svg/3star.svg" disablePictureInPicture loop muted></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3b0d5e3c35cca1738eee02e8677563be_preview.mp4" disablePictureInPicture loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b48e5eb5f244_10s_big.mp4" disablePictureInPicture loop muted></video>
<video class="vid" id="player" src="https://img.tukuppt.com/video_show/2402760/00/01/84/5b4b3840eb83e_10s_big.mp4" poster="https://638183.freep.cn/638183/web/svg/3star.svg" title="播放/暂停" disablePictureInPicture loop muted></video>
<div id="textClock"></div>
</div>
<script>
var sF = document.createElement('script');
sF.charset = 'UTF-8';
sF.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
document.body.appendChild(sF);
sF.onload = () => LRC({papa: '#papa', lrc_css: 'right: 100px; bottom: 60px; color: rgba(235,248,255,.9); --bg: linear-gradient(rgba(122,252,255,.2), rgba(5,205,255,.6))', lrcAr: lrcAr, btn: '#player'});
papa.oncontextmenu = (e) => e.preventDefault();
showTime();
setInterval(showTime, 1000);
function showTime(){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var day = now.getDay();
var hour = now.getHours();
if(hour < 10) hour = "0" + hour;
var minute = now.getMinutes();
if(minute < 10) minute = "0" + minute;
var second = now.getSeconds();
if(second < 10) second = "0" + second;
document.getElementById("textClock").innerHTML ="地球时 " +year + "年" + month + "月" + date + "日 星期" + toHz(day) + "" + hour + ":" + minute + ":" + second;
}
function toHz(num) {
var hz = "日一二三四五六";
return(hz.charAt(num));
}
var lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script> @马黑黑 找到的行走没舍得丢掉，继续做个帖子{:4_173:} 感觉这个是在地球上行走的穿着太空服的，所以加了个地球时间的数字表示，很喜欢的一个数字时间效果，这个帖子里继续使用和复习一下{:4_187:} 背景歌曲是什么歌啊？谁唱的啊？ 红影 发表于 2024-5-19 16:11
@马黑黑 找到的行走没舍得丢掉，继续做个帖子
效果很赞。
请将 let lrcAr = ...中的 let 改为 var，酱紫评分、恢复帖子能正常从头运行 途中行走的人设计得真好，它既没往回走，也没停顿，而是一刻不停地往前走。 愤怒的葡萄 发表于 2024-5-19 16:15
背景歌曲是什么歌啊？谁唱的啊？
歌词里有的啊，是张也作词作曲和演唱的。不认识的一个人{:4_173:} 马黑黑 发表于 2024-5-19 16:21
效果很赞。
请将 let lrcAr = ...中的 let 改为 var，酱紫评分、恢复帖子能正常从头运行
已经改好了，这个帖子本来想加画布环绕文本呢，没加进去，就只能用这样的歌名了来代替本来想滚动的字了{:4_173:} 梦油 发表于 2024-5-19 16:35
途中行走的人设计得真好，它既没往回走，也没停顿，而是一刻不停地往前走。
这个是视频呢，本来就是个一直行走的{:4_173:} 红影 发表于 2024-5-19 17:25
已经改好了，这个帖子本来想加画布环绕文本呢，没加进去，就只能用这样的歌名了来代替本来想滚动的字了{: ...
画布id，以及相应的JS语句改改 好威武哦 马黑黑 发表于 2024-5-19 17:25
画布id，以及相应的JS语句改改
我试过了，没弄出来{:4_173:} 上海朝阳 发表于 2024-5-19 18:41
好威武哦
迷失在地球，回不去他原来的星球了{:4_173:} 红影 发表于 2024-5-19 18:41
我试过了，没弄出来
这不太可能 马黑黑 发表于 2024-5-19 19:30
这不太可能
真的啊，否则早弄上去了{:4_173:} 亲爱的，又一个航天人出现了{:4_178:} 非常漂亮的制作，漫步天空 仔细看看亲爱的代码，有时间学习做一次 这个贴子就是影子说的另一个航天视频，效果清晰震撼，真是太棒了{:4_187:} 还加了时钟显示，影子就是可以任意组合各种代码，创意一流
{:4_187:}