纯css设计个性登陆框效果，点击文本框后里面图片自己切换，可根据自己的需求来自己修改图片。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-Type" content="text/html;charset=utf-8">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>网页个性登录框特效分享_武鸣人</title>
<style type="text/css">
*{
padding:0px;margin:0px;
}
body{
background:#EAEAEA;font-size:12px;
}
#test{
position:absolute;width:751px;height:246px;left:380px;top:200px;margin:-123px 0 0 -375px;background:url(/img/20240327_www_wuming_ren_2.jpg);
}
#wuming_left{
float:left;width:459px;
}
#wuming_right{
float:right;width:292px; padding:51px 0px 0px 0px;
}
#wuming_right ul{
list-style:none;
}
#wuming_right ul li{
background:url(/img/20240327_www_wuming_ren_1.gif) no-repeat left center; padding:10px 0px 0px 4px; height:27px;
}
#wuming_right input{
height:17px;border:none;font-size:12px;
}
.test_buttom{
line-height:28px;text-align:center;
}
.test_buttom a:link, .test_buttom a:visited, .test_buttom a:active {
float:left;display:block;width:63px;background: url();text-decoration: none;color:#000000; margin:10px 15px 10px 15px;
}
.test_buttom a:hover {
position:relative;left:1px;top:1px;
}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="test">
<div id="wuming_left"></div>
<div id="wuming_right">
<ul>
<li><input name="username" type="text" id="username" style="background:url(/img/20240327_www_wuming_ren_3.jpg);width:202px;" onblur="if (this.value == '') { this.style.background='url(/img/20240327_www_wuming_ren_3.jpg)'; } else { this.style.background='url(/img/20240327_www_wuming_ren_3.jpg) 135px 0px'; }" onclick="if (this.value == '') { this.style.background='url(/img/20240327_www_wuming_ren_3.jpg) 135px 0px'; }" maxlength="10" /></li>
<li><input name="password" type="password" id="password" style="background:url(/img/20240327_www_wuming_ren_3.jpg) 0px -17px;width:202px;" onblur="if (this.value == '') { this.style.background='url(/img/20240327_www_wuming_ren_3.jpg) 0px -17px'; } else { this.style.background='url(/img/20240327_www_wuming_ren_3.jpg) 135px -17px'; }" onclick="if (this.value == '') { this.style.background='url(/img/20240327_www_wuming_ren_3.jpg) 135px -17px'; }" maxlength="10" /></li>
<li><input name="username" type="text" id="username" style="background:url(/img/20240327_www_wuming_ren_3.jpg) 0px -34px;width:150px;" onblur="if (this.value == '') { this.style.background='url(/img/20240327_www_wuming_ren_3.jpg) 0px -34px'; } else { this.style.background='url(/img/20240327_www_wuming_ren_3.jpg) 70px -34px'; }" onclick="if (this.value == '') { this.style.background='url(/img/20240327_www_wuming_ren_3.jpg) 70px -34px'; }" maxlength="4" /><img src="/img/20240327_www_wuming_ren_4.jpg" align="absmiddle" /></li>
</ul>
<div class="test_buttom"><a href="#">登 录</a><a href="#">刷 新</a></div>
</div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处