以前在搜索页面的时候,曾经看到过一些星空特效的页面,感觉这个星空特效玩爆其他的星空特效,不服留言来辩。
项目已经发上来关联本文章了,这个星空特效背景图片可以不要,去掉图片就可以,喜欢纯黑不用加上图片也非常漂亮!
效果图如下:
一、Models实体类User
public class User
{
private int user_UserId;
/// <summary>
/// 用户信息编号
/// </summary>
public int User_UserId1 { get => user_UserId; set => user_UserId = value; }
private string user_LoginId;
/// <summary>
/// 用户信息账号
/// </summary>
public string User_LoginId { get => this.user_LoginId; set => this.user_LoginId = value; }
private string user_LoginPwd;
/// <summary>
/// 用户信息密码
/// </summary>
public string User_LoginPwd { get => this.user_LoginPwd; set => this.user_LoginPwd = value; }
}
二、路由规则配置文件
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Account", action = "Index", id = UrlParameter.Optional }
);
}
}
三、绑定规则配置文件
public class BundleConfig
{
// 有关捆绑的详细信息,请访问 https://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-{version}.min.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate.min.js"));
// 使用要用于开发和学习的 Modernizr 的开发版本。然后,当你做好
// 生产准备就绪,请使用 https://modernizr.com 上的生成工具仅选择所需的测试。
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.min.js",
"~/Scripts/Site.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.min.css",
"~/Content/Site.css"));
}
}
四、Account控制器
public class AccountController : Controller
{
/// <summary>
/// GET请求
/// 登录视图
/// </summary>
/// <returns>登录视图</returns>
[HttpGet]
public ActionResult Index()
{
return View();
}
/// <summary>
/// POST请求
/// 用户登录
/// </summary>
/// <param name="User_LoginId">用户信息账号</param>
/// <param name="User_LoginPwd">用户信息密码</param>
/// <returns>True:登录成功;False:登录失败</returns>
[HttpPost]
public ActionResult Index(string User_LoginId, string User_LoginPwd)
{
//判断当前数据
if (User_LoginId != null && User_LoginPwd != null)
{
//判断是否存在用户
if (User_LoginId == "admin" && User_LoginPwd == "admin"))
{
//保持用户状态
Session["HMS_User"] = User;
//返回首页
return Content("1");
}
else
{
//不存在用户
return Content("0");
}
}
else
{
//登录无效
return Content("0");
}
}
}
五、Account视图下的Index视图
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="width=device-width" />
<title>星空登录</title>
@Styles.Render("~/Content/css")
</head>
<body style="overflow:hidden;">
<div class="loginbox">
<div class="inputcontent">
<div class="logintitle">
<div>
<i class="titlebg left"></i>
Management System
<i class="titlebg right"></i>
</div>
<p>管理系统</p>
</div>
<form class="logininput">
<p class="p">
<input id="login_username" type="text" placeholder="账号" autocomplete="off" class="logintextbox" />
</p>
<p class="p">
<input id="login_password" type="password" placeholder="密码" autocomplete="off" class="logintextbox" />
</p>
<div id="Message" class="message"></div>
<div class="loginbtn">
<a id="Login" class="btnback" href="#" onclick="CheckLogin()">登 录</a>
<a id="Reset" class="btnback" href="#" onclick="CheckReset()">清 空</a>
</div>
</form>
</div>
<div class="canvaszz"></div>
<canvas id="canvas"></canvas>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/bootstrap")
<script type="text/javascript">
//登录页星空特效
Animation();
$("#login_username").focus();
/*页面高度宽度改变事件*/
window.onresize = function () {
location.reload();
//登录页星空特效
Animation();
$("#login_username").focus();
};
/*按Enter键触发登录事件*/
$(document).keydown(function (event) {
if (event.keyCode == 13) {
CheckLogin();
}
});
function CheckForm() {
//获取用户信息账号
var login_username = $("#login_username").val();
//获取用户信息密码
var login_password = $("#login_password").val();
//获取错误消息
var Msg = $("#Message");
if (login_username.trim() == "") {
Msg .html("请输入账号");
$('#login_username').focus();
return false;
} else if (login_password.trim() == "") {
Msg .html("请输入密码");
$('#login_password').focus();
return false;
} else {
Msg .html("");
return true;
}
};
function CheckReset() {
//获取错误消息
var Msg = $("#Message");
$("#login_username").val("");
$("#login_password").val("");
$("#login_username").focus();
Msg.html("");
};
/*登录提交*/
function CheckLogin() {
//接收判断结果
var flag = CheckForm();
if (!flag) return;
$.ajax({
url: '@Url.Action("Index","Account")',
type: 'POST',
async: false,
data: {
User_LoginId: $("#login_username").val(),
User_LoginPwd: $("#login_password").val()
},
success: function (data) {
if (data == "1") {
window.location.href = '@Url.Action("Index","Home")';
} else {
$("#Message").html("账号或密码不正确");
}
},
error: function () {
$("#Message").html("连接数据库失败!");
}
});
};
</script>
</body>
</html>
六、Site.css样式表
/* Others - Start */
*{ margin:0px; padding:0px;}
html{ margin:0px; padding:0px;}
body{ margin:0 auto; padding:0; font:18px "Microsoft YaHei", Arial, Helvetica, Sans-serif; text-align:center; line-height:1.5;}
img{ border:0px; display:block;}
ul li,ul,li{ list-style:none;}
/* Account/Index - Start */
.loginbox{ margin:0 auto; width:100%; height:100%; background-color:#000; position:relative;}
.loginbox .inputcontent{ width:580px; top:30%; margin-left:-290px; left:50%; padding:30px; position:absolute; z-index:9999; }
.loginbox .inputcontent .logintitle{ width:580px; top:-80px; left:-1px; text-align:center; color:#FFF; position:absolute;}
.loginbox .logintitle > div{ font-size:22px; font-weight:bold; position:relative;}
.loginbox .logintitle > p{ font-size:18px; font-family:Arial; margin:20px 0px;}
.loginbox .logintitle .titlebg{ width:90px; height:3px; top:50%; background:url('../Images/Account/login-tit.png'); display:inline-block; position:absolute;}
.loginbox .logintitle .titlebg.left{ left:0; transform:rotate(180deg);}
.loginbox .logintitle .titlebg.right{ right:0;}
.loginbox .inputcontent .logininput{ width:400px; left:50%; margin-left:59px; padding-top:40px;}
.inputcontent .logininput .p{ height:44px; margin:20px 0 10px; position:relative;}
.logintextbox::-webkit-input-placeholder{ color: rgba(255,255,255,.9);}
.logininput .message{ width:100%; height:21px; font-size:16px; color:red;}
.logininput .p .logintextbox{ width:100%; height:40px;text-indent:1em; font-size:14px; line-height:40px; border:1px solid #1D7EB8; color:white; background:rgba(0,0,0,.1);}
.logininput .loginbtn{ margin-top: 20px; text-align: center;}
.logininput .loginbtn a{ cursor:pointer;}
.logininput .loginbtn a.btnback{ width: 130px; height: 43px; line-height: 43px; text-decoration: none; font: 18px/43px 'Microsoft Yahei'; text-align: center; color: #0661C0; background: url("../Images/Account/nav_gv.png") repeat 0px 0px; margin: 8px 20px 8px 20px; display: inline-block; cursor: pointer;}
.logininput .loginbtn a.btnback:hover{ background: url("../Images/Account/nav_gv.png") repeat 0px -43px; color: #1D7EB8; -webkit-box-shadow: 0 0 6px #1D7EB8; transition-duration: 0.5s;}
.loginbox .canvaszz{ width: 100%; height: 800px; background-image: url("../Images/Account/in_top_bj1.png"); position: absolute; z-index: 10; opacity: 0.4;}
.loginbox canvas{ width: 100%; height: auto; display: inline-block; z-index: -1;}
七、Site.js脚本文件JavaScript
/*登录页星空特效*/
function Animation() {
var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), w = canvas.width = window.innerWidth, h = canvas.height = window.innerHeight, hue = 217, stars = [], count = 0, maxStars = 2500;//星星数量
var canvas2 = document.createElement('canvas'), ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width / 2, gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#CCC');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');
ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();
function random(min, max) {
if (arguments.length < 2) {
max = min;
min = 0;
}
if (min > max) {
var hold = max;
max = min;
min = hold;
}
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function maxOrbit(x, y) {
var max = Math.max(x, y), diameter = Math.round(Math.sqrt(max * max + max * max));
return diameter / 2;
//星星移动范围,值越大范围越小,
}
var Star = function () {
this.orbitRadius = random(maxOrbit(w, h));
this.radius = random(60, this.orbitRadius) / 18;
//星星大小
this.orbitX = w / 2;
this.orbitY = h / 2;
this.timePassed = random(0, maxStars);
this.speed = random(this.orbitRadius) / 500000;
//星星移动速度
this.alpha = random(2, 10) / 10;
count++;
stars[count] = this;
}
Star.prototype.draw = function () {
var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX, y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY, twinkle = random(10);
if (twinkle === 1 && this.alpha > 0) {
this.alpha -= 0.05;
} else if (twinkle === 2 && this.alpha < 1) {
this.alpha += 0.05;
}
ctx.globalAlpha = this.alpha;
ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
this.timePassed += this.speed;
}
for (var i = 0; i < maxStars; i++) {
new Star();
}
function animation() {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.5; //尾巴
ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
ctx.fillRect(0, 0, w, h);
ctx.globalCompositeOperation = 'lighter';
for (var i = 1, l = stars.length; i < l; i++) {
stars[i].draw();
};
window.requestAnimationFrame(animation);
}
animation();
};