首页 > 代码库 > 登录表单,趣味背景
登录表单,趣味背景
登录表单,趣味背景
<style type="text/css">html,body,div,p,h1,h2,h3,h4,h5,h6,form,ul,li{margin:0;}#panel{margin:0 auto;width:400px;height:400px;position:relative;border:1px solid #ccc;padding:3px;}#div1{margin:0 auto;width:200px;height:200px;background-repeat:no-repeat;border:1px solid #ccc;background-image:url("2.png");}.button30{font-size:14px;line-height:14px;padding:9px 20px;border:0;margin-top:0.5em;color:#FFF;background:#000;}.input30{font-size:14px;line-height:14px;padding:8px 10px;border:1px solid #999;margin-top:0.5em;}.input30:focus{background:#e6ffee;}form{margin:0 auto;width:90%;text-align:center;}</style><div id="panel"><div id="div1"> <form action=""> <input type="text" name="" class="input30"><br> <input type="text" name="" class="input30"><br> <input type="button" value="提交" class="button30"> </form></div></div><script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script><script type="text/javascript">//初始化随机定位 var x=Math.random()*200 * -1; var y=Math.random()*200 * -1; $("#div1").css("backgroundPosition",x+"px " +y+"px");$(function(){ $("#div1").click(function(event){ //$("#div1").mousemove(function(event){ _this=$(this); var offsetX=_this.offset().left;//相对于文档 var offsetY=_this.offset().top; //alert(offsetX+", "+offsetY); var mouseX=event.pageX;//鼠标 var mouseY=event.pageY;//鼠标 //alert(mouseX+", "+mouseY); var x=mouseX-offsetX-200; var y=mouseY-offsetY-200; //alert(x+", "+y); _this.css("backgroundPosition",x+"px " +y+"px"); });});</script>
2.png制作方法: 用photoshop建一个400x400的图, 用油漆桶工具,选取"彩虹色", 选取"角度渐变", 在图片正中心点开始拉一个放射状的渐变图. 保存为2.png
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。