自制小型登录界面

最新推荐文章于 2023-04-04 12:41:29 发布

原创最新推荐文章于 2023-04-04 12:41:29 发布 · 525 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#语言 #脚本 #css #界面

想看效果的同学要在本文件下放入jquery包，切记，需要的图片已经上传了

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width-device-width,initial-scale=1.0" />
<title>登录界面</title>
<style type="text/css">
body{
background-image: url(5.jpg);
text-shadow: 5px 5px 5px rgb(153,153,153);
font-family: 微软雅黑;
font-size: 1.4em;
font-weight: bold;
}
#container{
position: absolute;
top:10%;
left:20%;
border: #d7d7d7;
border-radius: 5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
width: 799px;
height: 572px;
background-image: url(4.jpg);
box-shadow: 0px 0px 15px rgb(153,153,153);
}
#loginframe{
position: relative;
top:10%;
left:20%;
width: 599px;
height: 372px;
border: #b3cbcb;
border-radius: 15px;
-o-border-radius:15px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
box-shadow: 0px 0px 10px rgb(153,153,153);
}

#loginfield{
position: relative;
top:12%;
left:15%;
width: 300px;
}
#loginframe:hover{
cursor: pointer;
}
#loginfield input.textBox{
outline: none;
box-shadow: 5px 5px 25px rgb(153,153,153);
width: 200px;
padding: 5px 15px;
border-radius:6px;
-o-border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
}
#loginfield input.button{
outline: none;
box-shadow: 5px 5px 25px rgb(153,153,153);
text-shadow: 5px 5px 5px rgb(153,153,153);
padding: 5px 25px;
margin: auto 15px;
border-radius:6px;
-o-border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
font-size: 1em;
font-weight: bolder;
}
#loginfield input.button:hover{
background-color: #a0c2c3;
color: white;
}
.transitionXYZ{
transition: transform 1s;
-moz-transition: -moz-transform 1s;
-webkit-transition: -webkit-transform 1s;
-o-transition: -o-transform 1s;
}
.transformXYZ{
transform:rotateZ(360deg) rotateY(360deg) ;
-webkit-transform: rotateZ(360deg) rotateY(360deg) ;
-moz-transform:rotateZ(360deg) rotateY(360deg) ;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#loginframe").fadeIn(1000);
$(function(){
window.setInterval(function(){
$("img").toggleClass("transformXYZ");$("img").fadeOut(1000);
$("img").fadeIn(1000);
},1000);

});
});
</script>
</head>
<body>
<div id="container">
<div id="loginframe" style="display:none;">
<div id="loginfield">
<form>
<label for="name">账号：</label><br />
<input type="text" name="name" id="name" class="textBox" required autofocus placeholder="请输入账号"/><br /><br />
<label for="password">密码：</label><br />
<input type="password" name="password" id="password" class="textBox" required placeholder="请输入密码"/><br /><br />
<input type="radio" name="profession" id="student" value="学生" />
<label for="student">学生</label>  
<input type="radio" name="profession" id="administrator" value="管理员" />
<label for="administrator">管理员</label><br /><br />
<input type="submit" value="登录" class="button"/>
<input type="reset" value="重置" class="button"/>
</form>
</div>
<div style="float:right">
<img src="6.jpg" alt="旋转图片" style="position: absolute;top:46%;left:63%;" class="transitionXYZ">
</div>
</div>
</div>
</body>
</html>