登录表单,趣味背景
<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