关键词：
一、HTML代码：
<!DOCTYPE html> <html> <head> <title>Matrix Text - HTML5 Canvas Demo</title> <script type="text/javascript" src="matrixtext.js"></script> <style> @font-face { font-family: ‘MatrixCode‘; src: url("matrix code nfi.otf") format("opentype"); } html, body { background: #000; margin: 0; padding: 0; overflow-x: hidden; overflow-y: hidden; } canvas { font-family: ‘MatrixCode‘; } p { font-family: ‘MatrixCode‘; color: #fff; } </style> </head> <body onload="init();"> <canvas id="theMatrix" width="1280" height="800"> <p>Your browser doesn‘t support canvas...L0Z3R</p> </canvas> </body> </html>
二、JS代码：
var textStrip = [‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘, ‘f‘, ‘g‘, ‘h‘, ‘i‘, ‘j‘, ‘k‘, ‘l‘, ‘m‘, ‘n‘, ‘o‘, ‘p‘, ‘q‘, ‘r‘, ‘s‘, ‘t‘, ‘u‘, ‘v‘, ‘w‘, ‘x‘, ‘y‘, ‘z‘]; var stripCount=90, stripX=new Array(), stripY=new Array(), dY=new Array(), stripFontSize = new Array(); for (var i = 0; i < stripCount; i++) { stripX[i] = Math.floor(Math.random()*1265); stripY[i] = -100; dY[i] = Math.floor(Math.random()*7)+3; stripFontSize[i] = Math.floor(Math.random()*24)+12; } var theColors = [‘#cefbe4‘, ‘#81ec72‘, ‘#5cd646‘, ‘#54d13c‘, ‘#4ccc32‘, ‘#43c728‘]; var elem, context, timer; function drawStrip(x, y) { for (var k = 0; k <= 20; k++) { var randChar = textStrip[Math.floor(Math.random()*textStrip.length)]; if (context.fillText) { switch (k) { case 0: context.fillStyle = theColors[0]; break; case 1: context.fillStyle = theColors[1]; break; case 3: context.fillStyle = theColors[2]; break; case 7: context.fillStyle = theColors[3]; break; case 13: context.fillStyle = theColors[4]; break; case 17: context.fillStyle = theColors[5]; break; } context.fillText(randChar, x, y); } y -= stripFontSize[k]; } } function draw() { // clear the canvas and set the properties context.clearRect(0, 0, elem.width, elem.height); context.shadowOffsetX = context.shadowOffsetY = 0; context.shadowBlur = 8; context.shadowColor = ‘#94f475‘; for (var j = 0; j < stripCount; j++) { context.font = stripFontSize[j]+‘px MatrixCode‘; context.textBaseline = ‘top‘; context.textAlign = ‘center‘; if (stripY[j] > 1358) { stripX[j] = Math.floor(Math.random()*elem.width); stripY[j] = -100; dY[j] = Math.floor(Math.random()*7)+3; stripFontSize[j] = Math.floor(Math.random()*24)+12; drawStrip(stripX[j], stripY[j]); } else drawStrip(stripX[j], stripY[j]); stripY[j] += dY[j]; } } function init() { // get the canvas‘ id elem = document.getElementById(‘theMatrix‘); if (!elem || !elem.getContext) return; // get the canvas‘ context context = elem.getContext(‘2d‘); if (!context) return; timer = setInterval(‘draw()‘, 70); }
在 webkit 浏览器中通过 Javascript 使用 CSS 重绘减速
...一直在制作一个幻灯片脚本，它使用CSS3过渡，或jQuery的动画（当它们不可用时）。我创建了一个自定义函数来执行幻灯片动画，这很合适。一切似乎都运行良好，但我在测试过程中遇到了一个重大问题。 查看详情
html5canvas首屏自适应背景动画循环效果怎么插入
html5canvas首屏自适应背景动画循环效果的插入方法：1、demo.html代码如下：<htmllang="en"class="no-js"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewp... 查看详情
如何使用 javascript 创建自定义关键帧 css 动画
】如何使用javascript创建自定义关键帧css动画【英文标题】：HowmayIcreatecustomkeyframecssanimationwithjavascript【发布时间】：2012-04-0408:42:39【问题描述】：我需要使用javascript创建和运行自定义css3动画。当我需要创建过渡时，我会写如下... 查看详情
使用 CSS 自定义煎茶
...-03-1413:12:49【问题描述】：萨拉姆我想用CSSsencha自定义html文本、按钮和文本字段。我能怎么做？如果我必须将所有CSS代码分开放在一个文件中，我如何将每个CSS代码连接到特定部分。例子：我想更改以下文本的字体“它符合您的... 查看详情
winform绘制自定义控件
绘制一个矩形，在运行时可以点击，并且能像文本框一样输入文本。这样的控件该怎么实现啊画矩形可以不用说了，很简单，但是后面的没头绪...2楼方法我曾想过，但这样的话会像和label就没有多大分别了，也就是多了个框3楼... 查看详情
如何在 MUI 中应用自定义动画效果@keyframes？
】如何在MUI中应用自定义动画效果@keyframes？【英文标题】：Howtoapplycustomanimationeffect@keyframesinMUI?【发布时间】：2020-03-1520:22:27【问题描述】：我学会了使用@keyframe在CSS中使用动画。但是，我想将自定义动画代码写入我的React项目... 查看详情
html5canvas首屏自适应背景动画循环效果怎么插入
参考技术A以demo为例<!--必要样式--><linkrel="stylesheet"type="text/css"href="css/component.css"/><!--[ifIE]><scriptsrc="js/html5.js"></script><![endif]--></head><body><divclass="containerdemo-4&... 查看详情
vscode自定义代码片段7——css动画(代码片段)
CSS动画//CSS'animation//7如何自定义用户代码片段：VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存//CSS的动画"Printtoconsole":"prefix... 查看详情
在自定义绘制的视图中动画大小变化的问题
...ct，以使用渐变背景和边缘周围的1像素黑色边框以及一些文本来呈现自己。在我的父视图控制器中，我尝试使用以下代码将我的自定义视图从原来的小尺寸动画化为全屏：[UIViewbeginAn 查看详情
使用 WPF 平滑文本动画（选取框）
】使用WPF平滑文本动画（选取框）【英文标题】：Smoothtextanimation(Marquee)usingWPF【发布时间】：2011-03-0110:39:50【问题描述】：尝试构建一个带有平滑文本动画的选取框控件。目前的努力包括：使用平移变换在Canvas依赖属性（左、右... 查看详情
使用自定义动画删除自定义 UIStoryboardSegue
】使用自定义动画删除自定义UIStoryboardSegue【英文标题】：RemovecustomUIStoryboardSeguewithcustomanimation【发布时间】：2012-10-2608:12:05【问题描述】：我已经看到了几个如何使用自定义动画呈现自定义UIStoryboardSegue的示例。基本上，您将UI... 查看详情
悬停时的 Tailwind Css 自定义动画
】悬停时的TailwindCss自定义动画【英文标题】：TailwindCssCustomAnimationonHover【发布时间】：2021-09-1103:21:09【问题描述】：我创建了一个带有顺风的眼睛图标动画，但是我无法在悬停时制作它:(你能指导我如何在悬停时制作动画吗？:)... 查看详情
导航栏项目的文本颜色不反映自定义 CSS [重复]
】导航栏项目的文本颜色不反映自定义CSS[重复]【英文标题】：TextcolorofnavbaritemsnotreflectingcustomCSS[duplicate]【发布时间】：2021-08-1618:28:15【问题描述】：我的导航栏文本的颜色没有改变。我猜我正在使用默认导航栏。我对Bootstrap很... 查看详情
性能：CSS3 动画 vs. HTML5 Canvas
】性能：CSS3动画vs.HTML5Canvas【英文标题】：Performance:CSS3animationsvs.HTML5Canvas【发布时间】：2012-06-2607:17:26【问题描述】：我正在开发一个当前使用CSS3过渡构建的web应用（将仅在Chrome19+中运行）。更具体地说，我使用JqueryTransit来使... 查看详情
vueinput标签隐藏使用label自定义样式
...杂。通过为input设置属性id，在label标签中设置for=id使label文本与对应的inpu他结合起来。label标签包裹input标签，点击label时，label两次响应，即label本身触发和input触发后冒泡到label上。label标签使用过滤器把数据重新组装做显示，in... 查看详情
使用 flex css 样式时的自定义控件宽度
...】：2021-12-1606:07:46【问题描述】：我自定义的控件有一个文本框和文本框旁边的图标return(<divclassName="useFlex"><TextInput></TextInput><div><Icon></ 查看详情
css自定义动画在微信中无法执行的原因
...享到朋友圈的页面里，安卓机器无法执行页面中的自定义动画(元宝的位移，进入按钮的放大缩小等等)。这让我很无法理解，相同的代码苹果可以，安卓却不行。而且页面上的点击事件无法执行。之后我给 自定义动画animation... 查看详情
如何从视图控制器获取自绘视图中的文本
】如何从视图控制器获取自绘视图中的文本【英文标题】：Howtogettextforinselfdrawnviewfromviewcontroller【发布时间】：2014-06-0615:24:53【问题描述】：我有带有文字的自绘视图：NSString*text=@"text";UIFont*font=[UIFontsystemFontOfSize:14.f];NSShadow*shado... 查看详情