JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果资源-CSDN下载

93 浏览量 2020-12-28 18:42:37 上传评论收藏 125KB PDF 举报

资源推荐

资源详情

资源评论

JS+CSS+HTML实现实现“代码雨代码雨”类似黑客帝国文字下落效果类似黑客帝国文字下落效果

先看看JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落最终效果：

HTML代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css/ok.css" rel="external nofollow" >

<title>code by-zhenyu.sha</title>

</head>

<body>

<canvas id="canvas"></canvas>

</body>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<script src="http://neilcarpenter.com/demos/canvas/matrix/stats.min.js"></script>

<script type="text/javascript" src="js/ok.js"></script>

</html>

js代码：

(function() {

var lastTime = 0;

var vendors = ['ms', 'moz', 'webkit', 'o'];

for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {

window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];

window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||

window[vendors[x] + 'CancelRequestAnimationFrame'];

}

if (!window.requestAnimationFrame)

window.requestAnimationFrame = function(callback, element) {

var currTime = new Date().getTime();

var timeToCall = Math.max(0, 16 - (currTime - lastTime));

var id = window.setTimeout(function() {

callback(currTime + timeToCall);

},

timeToCall);

lastTime = currTime + timeToCall;

return id;

};

if (!window.cancelAnimationFrame)

window.cancelAnimationFrame = function(id) {

clearTimeout(id);

};

}());

// stats

var stats = new Stats();

stats.setMode(0);

stats.domElement.style.position = 'absolute';

stats.domElement.style.left = '0px';

stats.domElement.style.top = '0px';

document.body.appendChild(stats.domElement);

var M = {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

内容反馈

weixin_38522636

粉丝: 3

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip