天降奇才 TO 马黑黑
<style>#papa { left: -302px; top:120px; width: 1200px; height: 675px; background: black url('https://pic.imgdb.cn/item/62f8cdea16f2c2beb167f0fb.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#canv { position: absolute; opacity: .45; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; bottom: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#lrcbox { position: absolute; left: 60px; bottom: 10px;font: bold 22px / 40px sans-serif; color: #cff; text-shadow: 2px 2px 4px #222; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<canvas id="canv" width="1200" height="675"></canvas>
<div style="position: absolute; left:0px; bottom: 0px; width:500px;">
<img alt="" src="https://pic.imgdb.cn/item/62f8cf5e16f2c2beb16bcff2.png"/>
</div>
<span id="lrcbox">天降奇才</span>
<span id="disc"></span>
</div><br><br><br><br><br><br>
<script type="text/javascript">
let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let texts = ('黑黑精彩 天降奇才 代码奇特').split(''),
fontsize = 18,
columns = Math.floor(w / fontsize) - 1,
drops = new Array(columns),
aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1333114268.mp3';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');
(function draw(){
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, w, h);
ctx.fillStyle = '#cff';
ctx.font = fontsize + 'px arial';
for(var j = 0; j < drops.length; j ++){
let text = texts;
ctx.fillText(text, j * fontsize + fontsize / 2 + 1, drops * fontsize);
if(drops*fontsize > h || Math.random() > 0.95){
drops = 0;
}
drops++;
}
setTimeout(draw, 64);
})();
</script> 用汉字代替一下字符，里面有黑黑的名字哦{:4_173:}@马黑黑 这个是天降马黑了哦。老黑是孙猴子变的。{:4_189:} 加林森 发表于 2022-8-15 20:34
这个是天降马黑了哦。老黑是孙猴子变的。
看我七十二变 构思巧妙，精巧制作。赞。 字符可以多一些，其他都很不错 哇瑟~~~亲爱的你太棒了，我就这个字符不晓得怎么换 现在晓得了，字符修改一下我就可以发了{:4_189:} 感觉这个字大了一点，还可以小一点 马黑黑 发表于 2022-8-15 21:09
看我七十二变
{:4_176:} 加林森 发表于 2022-8-15 20:34
这个是天降马黑了哦。老黑是孙猴子变的。
马黑黑的空降，才让我们有机会跟着学了这么多代码呢，是老天送来的奇才呢{:4_173:} 马黑黑 发表于 2022-8-15 21:09
构思巧妙，精巧制作。赞。
本来就是黑黑的代码呢，鼓励我其实也是赞誉你自己呢{:4_173:} 马黑黑 发表于 2022-8-15 21:10
字符可以多一些，其他都很不错
哦哦，夸奖你的话还说少了，我一共放了12个字，每4个字有个空格，可以连续多放点字会更好点。谢谢黑黑{:4_187:} 小辣椒 发表于 2022-8-15 21:22
哇瑟~~~亲爱的你太棒了，我就这个字符不晓得怎么换
直接换呀，特别简单的{:4_173:} 小辣椒 发表于 2022-8-15 21:25
感觉这个字大了一点，还可以小一点
我怕小了看不清字，还特地加大了一点的，里面有“黑黑精彩”“代码神奇”之类的字，我仔细看还是觉得看不出来，就加大了一点{:4_173:} 红影 发表于 2022-8-15 21:43
直接换呀，特别简单的
是的，已经直接发了{:4_170:} 红影 发表于 2022-8-15 21:44
我怕小了看不清字，还特地加大了一点的，里面有“黑黑精彩”“代码神奇”之类的字，我仔细看还是觉得看不 ...
加大了就感觉不太真实的，可能因为中文的原因，感觉黑客都是代码的{:4_189:} 2022-8-15 21:40
л
红影 发表于 2022-8-15 21:42
哦哦，夸奖你的话还说少了，我一共放了12个字，每4个字有个空格，可以连续多放点字会更好点。谢谢黑黑{:4 ...
可以把樵歌的诗词放进去 红影 发表于 2022-8-15 21:41
本来就是黑黑的代码呢，鼓励我其实也是赞誉你自己呢
没有呀，我没有你做的好