JS_HTML5+CSS3实现数字滚动特效

野性酷女 2022-09-11 01:26 442阅读 0赞

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5q2qIHwg5YmN56uv_size_20_color_FFFFFF_t_70_g_se_x_16]

<!DOCTYPE html>
    <html>
    <head>
        <title>number falls</title>
    </head>
    <body>
    <canvas id="canvas"></canvas>
    <style type="text/css"> body { margin: 0; padding: 0; overflow: hidden; } </style>
    <script type="text/javascript"> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var texts = '0123456789'.split(''); var fontSize = 12; canvas.height = window.screen.height; canvas.width = window.screen.width; var columns = canvas.width/fontSize; var drops = []; for (var x = 0; x < columns; x++) { drops[x] = 1; } function draw() { //透明 -> 不透明 ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); //文字 ctx.fillStyle = '#0F0'; ctx.font = fontSize + 'px arial'; //逐行输出文字 for (var i = 0; i < drops.length; i++) { //texts中随机取一个数 var text = texts[Math.floor(Math.random() * texts.length)]; ctx.fillText(text, i * fontSize, drops[i] * fontSize); if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) { drops[i] = 0; } drops[i]++; } } setInterval(draw, 33); </script>
    </body>
    <html>

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5q2qIHwg5YmN56uv_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/cbeba237def64ad5ac596ef2781eb59a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，442人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3实现瀑布流图片特效

htmL: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti

忘是亡心i/ 2022年11月03日 11:52/ 0 赞/ 184 阅读

相关 CSS3实现文字横向滚动

上效果图： ![在这里插入图片描述][20210609141329914.gif_pic_center] 上代码： <div id="tips" :style=

短命女/ 2022年10月05日 13:49/ 0 赞/ 210 阅读

相关 JS_HTML5+CSS3实现数字滚动特效

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5q2qIHwg5

野性酷女/ 2022年09月11日 01:26/ 0 赞/ 443 阅读

相关 CSS3 HTML5下雪特效雪花飘飘

<!doctype html> <html lang="en"> <head> <meta charset=utf-8 /> <titl

阳光穿透心脏的1/2处/ 2022年08月13日 14:46/ 0 赞/ 200 阅读

相关 CSS3 实现3D特效

CSS3 中的动画效果 transition animate transition主要是从一个属性平滑过渡到另一个属性，而animate则是结合关键帧技术，

朱雀/ 2022年07月13日 08:55/ 0 赞/ 264 阅读

相关 CSS3 + JavaScript原生实现翻转特效

利用CSS3 动画： @keyframes 一个定义动画的属性具体在这里就不详细解释了，想要详细了解的可以访问下面这个网址： http://www.

太过爱你忘了你带给我的痛/ 2022年06月03日 06:07/ 0 赞/ 142 阅读

相关 css3+jquery实现简单时钟特效

推荐一个自己的博客：[JS -- 手动实现数组原生方法][JS --] 初探前端开发，前期写一些小demo，后期会慢慢写些学习经验，欢迎各位看官交流学习经验（Q

浅浅的花香味﹌/ 2022年05月26日 01:16/ 0 赞/ 153 阅读

相关 css3实现流星雨特效

用到css3知识: radial-gradient 径向渐变， filter， transform， animation以及 nth-child选择器等

今天药忘吃喽~/ 2021年12月10日 08:37/ 0 赞/ 358 阅读

相关隐藏滚动条css3实现滚动同时隐藏滚动条

1. 1. 主要代码：　　ul ::-webkit-scrollbar\{

Bertha 。/ 2021年10月23日 07:13/ 0 赞/ 435 阅读

相关隐藏滚动条css3实现滚动同时隐藏滚动条

项目场景需求要在局部实现滚动，但是滚动出现了滚动条，一瞬间感觉整个页面都不好了，经过努力css成功实现滚动同时隐藏滚动条，废话不多说，直接上代码核心代码： :

╰+哭是因爲堅強的太久メ/ 2021年07月04日 21:32/ 0 赞/ 618 阅读