/* 超链接 */
  a:link, a:visited
       {
            text-decoration: underline; /*超链接有下划线*/
        }
        a:hover
        {
            text-decoration: none; /*鼠标放上没有下划线*/
        }
/* 导航 */
body,div,ul,li
        {
         padding:0; margin:0;
        }
        a
        {
         font-size:15px;
        }
        #but{
        width:600px;
        height:30px;
        background:#11739D;
        margin:0 auto;
        margin-top:30px;
        }
        #but ul{
        width:600px;
        height:10px;
        }
        #but ul li{
        height:5px;
        float:left;
        list-style:none;
        line-height:35px;
        text-align:center;
        padding:0 1px;
        }
        #but ul li a
        {
         display:block; 
         height:35px;  /*调整经过的阴影大小*/
         color:#DDDDDD; 
         text-decoration:none; 
         float:left; 
         padding:0 20px;
        }
        #but ul li a:hover
        {
         color:#48d1cc; 
         text-decoration:underline; 
         background:#959595;
       }
//流星雨效果
<script>
var count=10
var X=new Array(count)
var Y=new Array(count)
var W=new Array(count)
var H=new Array(count)
var Vx=new Array(count)
var Vy=new Array(count)
var t=new Array(count)var timeOut=50
var g=0.98function Shooting()
{
    for(i=0; i<count; i++)
    {
        x=X[i]-Vx[i]*t[i]
        y=Y[i]+Vy[i]*t[i]+g*t[i]*t[i]/2
        H[i]=(Vy[i]+g*t[i])/Vx[i]*W[i]
        t[i]++        cmd="shooting"+i+".style.posLeft="+x+";\n"
        cmd+="shooting"+i+".style.posTop="+y+";\n"
        cmd+="shooting"+i+".style.height="+H[i]+";"
        eval(cmd)        if(x<0||y>document.body.clientHeight)
        {
            X[i]=Math.random()*document.body.clientWidth
            Y[i]=Math.random()*document.body.clientHeight/2
            W[i]=Math.random()*10+10
            Vx[i]=Math.random()*8+2
            Vy[i]=Math.random()*8+2
            H[i]=Vy[i]/Vx[i]*W[i]
            t[i]=0
        }
    }    setTimeout("Shooting()", timeOut)
}function initShooting(src)
{
    for(i=0; i<count; i++)
    {
        X[i]=Math.random()*document.body.clientWidth
        Y[i]=Math.random()*document.body.clientHeight/2
        W[i]=Math.random()*10+10
        Vx[i]=Math.random()*8+2
        Vy[i]=Math.random()*8+2
        H[i]=Vy[i]/Vx[i]*W[i]
        t[i]=0
        document.write("<img align=bottom border=0 id='shooting"+i+"' src='"+src+"' style='LEFT: "+X[i]+"px; TOP: "+Y[i]+"; WIDTH: "+W[i]+"; HEIGHT: "+H[i]+"; POSITION: absolute;'>")
    }    setTimeout("Shooting()", timeOut)
}
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>rose</title>
</head>
<body  style="background: url('2.jpg') no-repeat ">
<script>initShooting("1.gif")</script>
<div style="position: absolute; top: 10px; left: 500px;" align="center">
<canvas></canvas>
</div>
<div style="width: 300px; height: 300px;position: absolute; top: 300px; left: 500px;" align="center">
Regardless of whether or not keep relationship with you, 
<br/>I would want to let you know. You are my only obsession
<br/>do it by  javascript  <br/> thanks for your love
</div>
//javascript→rose
<script>
var c = document.getElementsByTagName('canvas')[0];
var b = document.body;
var a = c.getContext('2d');
with(m=Math)C=cos,S=sin,P=pow;
O=a.getImageData(0,0,c.height=f=W=256,f);
U=O.data;
D={};
F=[];
function J(p){p[5]=Q=0;
for(j=3;j--;
)
if(!D[Q=(p[j]>>=2)+Q*f])
D[Q]=F.push(p)}setInterval(function(){for(i=1e3;i--;){c=i%42*1.35;H=T;T=m.random();A=H*2-1;B=T*2-1;J([S(H*7)*(o=13+5/(.2+P(T*4,4)))-T*50,T*550+500,(l=C(H*7))*o,(G=l/7+.5)-T/4,G]);if(A*A+B*B<1)if(c>32){J([(o=.5/(H+.01)-H*300)*C(n=(j=c&1)?6:4)+(w=T*-f)*S(n)+j*630-390,o*S(n)-w*C(n)+999-j*350,C(B+A)*99-j*50,(P(l=1-B*B,f*6)+C(H+T)+P(C((o*H+o+(B>0?w:-w))/25),30)*l-H+2)/5,o/1e3+.7-o*w/3e5]);J([(o=H*45-20)*C(l=c/.86)+(w=T*T)*f*S(l),C(B/2)*99-w*T*60+436,o*S(l)-w*f*C(l),w*.3+.3,T*.7])}else J([(o=A*(2-T)*(80-c*2))*C(c)-(w=99-C(A)*120-C(T)*(f-c*5)+C(P(1-T,7))*50+c*2)*S(c),(B*2-C(P(T,7))+9)*50,o*S(c)+w*C(c),1-T*.7,P(1-T,9)/4])}for(i=0;i<f*f;m[i++]=f)for(l=4;l--;)U[i*4+l]=255;for(c=C(W),s=S(W),j=F.length;j--;){k=F[j],x=k[0]*c+k[2]*s+99,z=k[0]*s-k[2]*c,y=k[1]-z*.4<<8;for(i=3;i--;)if(z<m[p=y-~x+[0,1,f][i]])for(m[p]=z,l=3;l--;)U[p*4+l]=k[l+3]*f}a.putImageData(O,0,0);W+=.03},T=0)
</script>
//javascript→rose
</body>
</html>