首页 > 代码库 > 登录表单,趣味背景

登录表单,趣味背景

 

 

登录表单,趣味背景

<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