登录表单,趣味背景

登录表单,趣味背景

<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