小辣椒 发表于 2022-8-15 21:33

少年黑客（套用一个）

<style>
      #papa { left: -134px; width: 911px; height: 662px; top:150px; background: black url('https://pic.imgdb.cn/item/62fa47cf16f2c2beb12f6fa5.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
      #canv { position: absolute; opacity: .75; }
   
      #disc { position: absolute; width: 40px; height: 40px; left: 50px; bottom: 50px; 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: 400px; bottom: 150px;font: bold 32px / 40px sans-serif; color: #ffffff; text-shadow: 1px 1px 2px #222; }
      @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <span id="lrcbox">少年黑客</span>
      <canvas id="canv" width="911" height="662"></canvas>

      <span id="disc"></span>
</div>

<script type="text/javascript">

let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let texts = ('The Matrix; Matrix,The; The Specialists;').split(''),
      fontsize = 12,
      columns = Math.floor(w / fontsize) - 1,
      drops = new Array(columns),
      aud = new Audio();
      
aud.src = 'https://music.163.com/song/media/outer/url?id=34167131.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 = '#0f0';
      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++;
      }
      requestAnimationFrame(draw);
})();

</script>
<br><br><br><br><br><br><br>

小辣椒 发表于 2022-8-15 21:35

@马黑黑

黑黑套用你的教程做一个，就字符弄不好，刚才看见红影的我用了拼音

小辣椒 发表于 2022-8-15 21:36

亲爱的，字符学习你的，我用了拼音@红影

加林森 发表于 2022-8-15 21:39

小辣椒晚上，！制作得真漂亮。大赞！

东篱闲人 发表于 2022-8-15 21:40

还越黑越年轻啦？{:5_117:}

小辣椒 发表于 2022-8-15 21:43

加林森 发表于 2022-8-15 21:39
小辣椒晚上，！制作得真漂亮。大赞！

谢谢队长，我也是套用的{:4_189:}

小辣椒 发表于 2022-8-15 21:43

东篱闲人 发表于 2022-8-15 21:40
还越黑越年轻啦？

老头晚上好{:4_187:}

东篱闲人 发表于 2022-8-15 21:44

小辣椒 发表于 2022-8-15 21:43
老头晚上好

师傅吉祥。。。。{:4_204:}

加林森 发表于 2022-8-15 21:53

小辣椒 发表于 2022-8-15 21:43
谢谢队长，我也是套用的

我昨天说了的就是字符串很重要的。老黑也重点讲了的哦。

小辣椒 发表于 2022-8-15 22:02

加林森 发表于 2022-8-15 21:53
我昨天说了的就是字符串很重要的。老黑也重点讲了的哦。

问题这个字符我自己重新敲不出来就只能套用了，现在是用的拼音

红影 发表于 2022-8-15 22:10

小辣椒 发表于 2022-8-15 21:36
亲爱的，字符学习你的，我用了拼音@红影

哈哈，黑黑推出字符雨后，坛子里就出来了一大批黑客。亲爱的这个更好，还是少年的黑客，前途无量啊{:4_173:}

红影 发表于 2022-8-15 22:11

亲爱的聪明，想到用拼音，现在齐全了，字符集，拼音，汉字等全都有了{:4_187:}

小辣椒 发表于 2022-8-15 22:12

红影 发表于 2022-8-15 22:10
哈哈，黑黑推出字符雨后，坛子里就出来了一大批黑客。亲爱的这个更好，还是少年的黑客，前途无量啊{:4_17 ...

哈哈~~~黑客花潮打堆了{:4_170:}

小辣椒 发表于 2022-8-15 22:13

东篱闲人 发表于 2022-8-15 21:44
师傅吉祥。。。。

老头你今天的视频还是老的制作方法？

小辣椒 发表于 2022-8-15 22:13

红影 发表于 2022-8-15 22:11
亲爱的聪明，想到用拼音，现在齐全了，字符集，拼音，汉字等全都有了

我就是不会修改字符，看见你刚才的我想我改拼音了

加林森 发表于 2022-8-15 22:14

小辣椒 发表于 2022-8-15 22:02
问题这个字符我自己重新敲不出来就只能套用了，现在是用的拼音

都可以的。加长字符更加好。

小辣椒 发表于 2022-8-15 22:16

加林森 发表于 2022-8-15 22:14
都可以的。加长字符更加好。

这个拼音我按中文文字的，文字翻译成英语

东篱闲人 发表于 2022-8-15 22:21

小辣椒 发表于 2022-8-15 22:13
老头你今天的视频还是老的制作方法？

嗯嗯，年轻的还没研究呢。。。{:5_103:}

小辣椒 发表于 2022-8-15 22:23

东篱闲人 发表于 2022-8-15 22:21
嗯嗯，年轻的还没研究呢。。。

哈哈，昨天这个最简单，修改位置就可以了

东篱闲人 发表于 2022-8-15 22:24

小辣椒 发表于 2022-8-15 22:23
哈哈，昨天这个最简单，修改位置就可以了

嗯嗯，俺做了一个，不理想，还没构思出来。
页: [1] 2
查看完整版本: 少年黑客（套用一个）