炫酷科技感黑客感瀑布流html+js+css代码

效果如下

代码如下

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>炫酷科技感黑客感瀑布流html代码</title><style>* {margin: 0;padding: 0;}body {background: black;}canvas {display: block;}</style></head><body><canvas id="waterfall"></canvas><script>var waterfall = document.getElementById("waterfall");var ctx = waterfall.getContext("2d");waterfall.height = window.innerHeight;waterfall.width = window.innerWidth;var chinese = "瀑布流瀑布流瀑布流";chinese = chinese.split("");var font_size = 10;var columns = waterfall.width / font_size;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, waterfall.width, waterfall.height);ctx.fillStyle = "#0F0";ctx.font = font_size + "px arial";for (var i = 0; i < drops.length; i++) {var text = chinese[Math.floor(Math.random() * chinese.length)];ctx.fillText(text, i * font_size, drops[i] * font_size);if (drops[i] * font_size > waterfall.height && Math.random() > 0.975)drops[i] = 0;drops[i]++;}}setInterval(draw, 50);</script></body>
</html>

炫酷科技感黑客感瀑布流html+js+css代码相关推荐

炫酷科技感超前的电子产品发布广告海报psd分层模板，带给你炫酷的未来感
炫酷科技感超前的电子产品发布广告海报模板,带给你炫酷的未来感,是分层的PSD分层格式. PSD分层海报模板的好处就是,可以对应去根据自己的喜爱,去改字,变换图形,调整大小, 经过一番整改,就可以做成 ...
纯css3炫酷科技感菜单
下载地址一款样式炫酷的旋转导航菜单,纯css3代码实现的炫酷科技感菜单,带css3旋转动画特效. dd:
pr字幕模板炫酷科技蓝色流线条动画pr模板
pr字幕模板 12个炫酷科技蓝色流线条动画低三分之二pr模板富有创意的动画Premiere字幕模板.包含12个简洁,动态动画的文本动画. 它们易于使用,并且可以使用智能自定义控制器快速更改以适合您自 ...
炫酷计算机网络科技,科技改变未来!30款炫酷科技工具创意设计
[PConline 欣赏]有时候,想象力比智力更加重要,这是史上最伟大的天才之一爱因斯坦得出的结论.这个准则,对于科学家以及设计师而言,尤为重要.正是因为对未来有想象,才会有众多令人惊讶.与众不同的科 ...
炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】
一:源码获取这两天根据需求写了一个比较好看的有动态效果的登录注册切换页面,这里我将源码资源分享给大家,大家可以直接免费下载使用哦,没有 vip 的小伙伴找我私聊发送"登录注册"即 ...
原生js瀑布流效果，css+html+js，复制下来可直接使用
html里面总共需要引入三个文件 css文件两个,js代码一个 :::json文件里面的图片就自己增改把 html页面 <div class="container" id=& ...
React单页面图片瀑布流——Macy.js
图片瀑布流需求:一个数组里的图片按两列排列,图片尺寸不一样. 问题:如果只是简单的数组分成两个数组,有可能一组图片高度加起来远远高于另一组,视觉效果太差. 想了想简单的js实现逻辑: 1.一个图片数 ...
html li 做瀑布流,使用js来实现瀑布流效果
使用js来实现瀑布流效果瀑布流的实现方法有很多种,我这次采用的是使用绝对定位的方法来实现.页面中包含一个容器ul(设置为relative),然后所有添加的li都放在这个容器里面,li的宽度固定.在l ...
html 瀑布流样式,纯css如何实现瀑布流？css实现瀑布流的两种方式
瀑布流的布局感觉还是蛮不错的,所以本篇文章就给大家来分享一下css实现瀑布流布局的两种方法,通过multi-column多列布局实现瀑布流和flex布局实现瀑布流. 1.multi-column多列布 ...

炫酷科技感黑客感瀑布流html+js+css代码

效果如下

代码如下

炫酷科技感黑客感瀑布流html+js+css代码相关推荐

最新文章

热门文章