利用css实现代码雨背景用户注册表单代码



21 82 28



特效描述:利用css实现 代码雨背景 用户注册 表单代码,利用css实现代码雨背景用户注册表单代码

代码结构

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />
<link type="text/css" href="css/style.css" rel="stylesheet" />

2. HTML代码

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!-- 登录 -->
<div class="register">
	<form id="ajaxForm" class="login-wrap">
		<img class="avatar" src="img/4.jpg">
		<ul>
			<li>
				<label for="">用 户 名 :</label>
				<input type="text" name="userName" class="name">
			</li>
			<li>
				<label for="">设置密码 :</label>
				<input type="password" name="password" class="pass">
			</li>
			<li>
				<label for="">确认密码 :</label>
				<input type="password" name="" class="repass">
			</li>
			<li>
				<label for="">验证手机 :</label>
				<input type="text" name="phone" class="mobile">
			</li>
			<li>
				<label for="">短信验证 :</label>
				<input type="text" name="" class="code">
				<input type="button" value="获取验证码" class="verify">
			</li>
			<li>
				<label for=""></label>
				<input type="button" class="submit " value="立即注册">
			</li>
		</ul>
	</form>
</div>
<!--代码雨区域-->
<canvas id="canvas" style="background:#000"></canvas>
<script>
// 代码雨
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// 浏览器宽高
var W = window.screen.availWidth;
var H = window.screen.availHeight;
canvas.width = W;
canvas.height = H;
var fontSize = 18;
var colunms = Math.floor(W / fontSize);
// 坐标
var coordinate = [];
for (var i = 0; i < colunms; i++) {
coordinate.push(0);
}
var str = "javascript html5 canvas";
function draw() {
// 背景色
context.fillStyle = "rgba(0,0,0,0.05)";
context.fillRect(0, 0, W, H);
context.font = "800 " + fontSize + "px  宋体";
// 字体颜色
context.fillStyle = "#01fef5";
for (var i = 0; i < colunms; i++) {
	var index = Math.floor(Math.random() * str.length);
	var x = i * fontSize;
	var y = coordinate[i] * fontSize;
	context.fillText(str[index], x, y);
	if (y >= canvas.height && Math.random() > 0.88) {
		coordinate[i] = 0;
	}
	coordinate[i]++;
}
}
function randColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
draw();
setInterval(draw, 30);
};
</script>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 注册框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到