朵拉 发表于 2022-8-21 14:16

西界（马黑黑原创）

本帖最后由 朵拉 于 2022-8-21 14:26 编辑 <br /><br /><style>
      #papa { left: -214px; width: 1024px; height: 640px; background: black url('https://pic.imgdb.cn/item/6301cbc616f2c2beb1478ab5.png') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
      #canv { position: absolute; opacity: .60; }
      #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: #859670; text-shadow: 2px 2px 4px #222; }
      @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <span id="lrcbox">西界</span>
      <canvas id="canv" width="1024" height="640"></canvas>
      <span id="disc"></span>
</div>

<script type="text/javascript">

let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let texts = Array.from(Array(94), (x,k) => String.fromCharCode(33+k)),
      fontsize = 16,
      columns = Math.floor(w / fontsize) - 1,
      drops = new Array(columns),
      aud = new Audio();
      
aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/08/21/34a16889600ee1baf918cfde4678312f.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>

朵拉 发表于 2022-8-21 14:22

@马黑黑
马老师好，背景图片 不显示，怎么调整{:4_190:}

马黑黑 发表于 2022-8-21 14:26

朵拉 发表于 2022-8-21 14:22
@马黑黑
马老师好，背景图片 不显示，怎么调整

有背景的，暗一点而已。调整CSS：

#canv { position: absolute; opacity: .75; }

红色部分表示透明度，是 0.75 的意思，值越大也不透明，值在 0 - 1之间。你可以改小一点看看， 如 .45 或 .5

朵拉 发表于 2022-8-21 14:31

马黑黑 发表于 2022-8-21 14:26
有背景的，暗一点而已。调整CSS：

#canv { position: absolute; opacity: .75; }


马师，我调到60，您电脑再看下
另：下落的字符速度怎么调整{:4_190:}

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

朵拉真聪明，制作得很漂亮。赞！{:4_199:}

马黑黑 发表于 2022-8-21 16:59

朵拉 发表于 2022-8-21 14:31
马师，我调到60，您电脑再看下
另：下落的字符速度怎么调整

下落速度要调整，需要换一个刷新机制，改一句。在下面的函数，把红色那句，

(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);
})();

换成：

setTimeout(draw,80);

其中，80还可以调整，数字越小，速度越大

红影 发表于 2022-8-21 19:02

这个有意思，杀手离得那么近，还有心情摇摆啊{:4_173:}

红影 发表于 2022-8-21 19:02

朵宝的制作很漂亮，赞一个{:4_187:}

樵歌 发表于 2022-8-22 10:48

这个美女杀手好漂亮，被杀了也心甘{:4_189:}
页: [1]
查看完整版本: 西界（马黑黑原创）