前几天,学习了某站的大大写的仿造黑客帝国字符雨效果,今天拿出来分享一下。
首先,我们使用 HTML5的canvas来写一个,废话不多说直接上代码!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5模仿骇客帝国文字雨</title>
</head>
<body>
<canvas id="q"></canvas>
<script type="text/javascript" >
var s = window.screen;
var width = q.width = s.width;
var height = q.height = s.height;
var letters = Array(256).join(1).split(‘‘);
var draw = function () {
q.getContext(‘2d‘).fillStyle=‘rgba(0,0,0,.05)‘;
q.getContext(‘2d‘).fillRect(0,0,width,height);
q.getContext(‘2d‘).fillStyle=‘#0F0‘;
letters.map(function(y_pos, index){
text = String.fromCharCode(3e4+Math.random()*33);
x_pos = index * 10;
q.getContext(‘2d‘).fillText(text, x_pos, y_pos);
letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
});
};
setInterval(draw, 33);
</script>
</body>
</html>
看效果,直接复制 copy .html 就可以看到效果了,如果自己还想更改直接自己更改就可以了。
接着,我们再来一个 HTML+ CSS + JS(jquery)的方法。
代码:
<!DOCTYPE html>
<html>
<head>
<!-- CSS 样式 -->
<style>
* {
margin: 0;
padding: 0;
box-sizing: content-box;
}
#pg {
position: absolute;
width: 100%;
height: 40%;
font-size: 0px;
background-color: black;
overflow: hidden;
}
#pg>div {
display: inline-block;
text-align: center;
position: absolute;
width: 1em;
line-height: 1em;
height: 100%;
color: green;
font-size: 15px;
font-weight: bold;
}
a {
color: #eeffee;
font-weight: bold;
}
</style>
</head>
<body>
<div id=pg>
<div></div>
</div>
<audio>
<source src="http://pisa.ucsd.edu/cse125/2001/cse190g1/matrix4.mp3" type="audio/mpeg">
</audio>
</body>
</html>
<!-- JS 的jquery使用 -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(‘audio‘)[0].play();
// $(‘#pg>div‘).css("height", $(‘#pg‘).css("height"));
$(‘#pg>div‘).height($(‘#pg‘).height());
var wid = $("#pg>div").width();
var sum = Math.ceil($(‘#pg‘).width() / wid);
$(‘#pg‘).html(new Array(sum + 1).join("<div></div>"));
var t_life = Array(sum + 1).join(0).split(‘‘);
var life = [], hei = [], Yg = [], Yc = [], Y_born = [];
$("#pg>div").map(function (index) {
$(this).css("left", (wid * index) + ‘px‘);
});
var hei_page = Math.ceil($("#pg>div").height() / wid);
var full_blank = Array(hei_page + 1).join(‘ <br>‘);
window.setInterval(‘tick();‘, 30);
function tick() {
$("#pg>div").map(function (i) {
if (+t_life[i] <= 0) {
$(this).html(full_blank);
hei[i] = Math.round(Math.random() * (hei_page - 2) + 2);
Yg[i] = Yc[i] = Y_born[i] = Math.round(Math.random() * (hei_page - hei[i]));
life[i] = Math.round(Math.random() * (hei[i] - 2) + 2);
t_life[i] = hei[i] + life[i];
}
t_life[i]--, life[i]--, hei[i]--;
var t, j;
if (life[i] < 0) {
t = $(this).html();
j = Yc[i] * 5, $(this).html(t.slice(0, j) + ‘ ‘ + t.slice(j + 1));
Yc[i]++;
}
if (hei[i] >= 0) {
t = $(this).html();
var drill = ‘<a>‘ + (Math.random() < .1 ? ‘ ‘ : String.fromCharCode(Math.round(Math.random() * 25 + ‘A‘.charCodeAt(0)))) + ‘</a>‘;
if (Yg[i] == Y_born[i]) {
$(this).html(t.slice(0, Yg[i] * 5) + drill);
} else {
j = (Yg[i] - 1) * 5, $(this).html(t.slice(0, j) + t.substr(j + 3, 1) + ‘<br>‘ + drill);
}
Yg[i]++;
} else if (hei[i] == -1) {
t = $(this).html();
j = (Yg[i] - 1) * 5, $(this).html(t.slice(0, j) + t.substr(j + 3, 1));
}
});
}
</script>
还是一样 直接贴代码就可以看到效果了。
其实我也在研究中,大家一起努力。
时间： 2024-10-04 21:14:49