css3鼠标果果变手型代码_圣诞节又到了，作为程序猿的我用代码给女朋友送了一个礼物...

圣诞节又到了，拿什么来哄女朋友开心？ 我们先来做一个简单的雪人动画： 项目结构：

html:

CSS3圣诞树雪人下雪动画效果body{margin:0;padding:0;list-style-type:none;}  .header{  margin: 0 0 30px;  background: url(css/img/header-bg.png);  background: url(css/img/snow-bg.png) repeat-y center, url(css/img/header-bg.png);  -webkit-animation: animate-snow 9s linear infinite;  -moz-animation: animate-snow 9s linear infinite;  -ms-animation: animate-snow 9s linear infinite;  animation: animate-snow 9s linear infinite;    }
@-webkit-keyframes animate-snow{  0% { background-position: center 0, 0 0;}  100% { background-position: center 885px, 0 0;}}
@-moz-keyframes animate-snow{  0% { background-position: center 0, 0 0;}  100% { background-position: center 885px, 0 0;}}
@-ms-keyframes animate-snow{  0% { background-position: center 0, 0 0;}  100% { background-position: center 885px, 0 0;}}    
@keyframes animate-snow{  0% { background-position: center 0, 0 0;}  100% { background-position: center 885px, 0 0;}}  
.wrapper{ width: 960px; height: 315px; margin: auto; overflow: hidden; position: relative; background-image: url(css/img/wrapper-bg.png); background-repeat: no-repeat; background-position: bottom;    }  
@-moz-keyframes animate-drop {
  0% {opacity:0;-moz-transform: translate(0, -315px);}  100% {opacity:1;-moz-transform: translate(0, 0);}}
@-webkit-keyframes animate-drop {
  0% {opacity:0;-webkit-transform: translate(0, -315px);}  100% {opacity:1;-webkit-transform: translate(0, 0);}}
@-ms-keyframes animate-drop {
  0% {opacity:0;-ms-transform: translate(0, -315px);}  100% {opacity:1;-ms-transform: translate(0, 0);}}
@keyframes animate-drop {
  0% {opacity:0;transform: translate(0, -315px);}  100% {opacity:1;transform: translate(0, 0);}}    
.christmas-tree, .snowman {  position: absolute;  -moz-animation: animate-drop 1s linear;  -webkit-animation: animate-drop 1s linear;  -ms-animation: animate-drop 1s linear;  animation: animate-drop 1s linear;}
.christmas-tree {  width: 112px;  height: 137px;  background: url(css/img/christmas-tree.png);}
.snowman {  width: 115px;  height: 103px;  top: 195px;  left: 415px;  background: url(css/img/snowman.png);  -moz-animation-duration: .6s;  -webkit-animation-duration: .6s;  -ms-animation-duration: .6s;  animation-duration: .6s;}  
.tree1 {  top: 165px;  left: 35px;  -moz-animation-duration: .6s;  -webkit-animation-duration: .6s;  -ms-animation-duration: .6s;  animation-duration: .6s;    }
.tree2 {  left: 185px;  top: 175px;    -moz-animation-duration: .9s;  -webkit-animation-duration: .9s;  -ms-animation-duration: .9s;  animation-duration: .9s;    }
.tree3 {  left: 340px;  top: 125px;    -moz-animation-duration: .7s;  -webkit-animation-duration: .7s;  -ms-animation-duration: .7s;  animation-duration: .7s;    }
.tree4 {  left: 555px;  top: 155px;    -moz-animation-duration: .8s;  -webkit-animation-duration: .8s;  -ms-animation-duration: .8s;  animation-duration: .8s;    }
.tree5 {  left: 710px;  top: 170px;    -moz-animation-duration: .7s;  -webkit-animation-duration: .7s;  -ms-animation-duration: .7s;  animation-duration: .7s;    }
.tree6 {  left: 855px;  top: 125px;    -moz-animation-duration: .6s;  -webkit-animation-duration: .6s;  -ms-animation-duration: .6s;  animation-duration: .6s;    }  

来源:孙叫兽的博客

图片下载地址：https://download.csdn.net/download/weixin_41937552/13786683 效果图：

这样就完成了在HTML中使用css3实现雪人动画效果。 下面我们玩一个比较有特色的圣诞树。 圣诞节虽然不是中国的传统节日，但当下很多时髦的年轻人却很喜欢过这个欢乐的节日，并乐于打造参与属于这个节日的仪式感。 除了所知的圣诞老人、圣诞树、互送礼物、吃大餐等传统习俗外，其实程序员能为今天的节日增加一些特别的环节。

圣诞树下载：

https://download.csdn.net/download/weixin_41937552/13780446

我们把下载的压缩包解压，把exe文件放到桌面，双击打开即可。

桌面效果图：

可以打开多个圣诞树，如果关闭圣诞树需要鼠标右键点击exit即可。 代码如下：

html, body{ width: 100%; height: 100%; margin: 0; padding: 0; border: 0; }div{margin: 0;padding: 0;border: 0;}.nav{position: absolute;top: 0;left: 0;width: 100%;height: 27px;background-color: white;                   color: black;text-align: center;line-height: 25px;}a{color: black;text-decoration: none;border-bottom: 1px dashed black;}a:hover{border-bottom: 1px solid red;}.previous{float: left;margin-left: 10px;}.next{float: right;margin-right: 10px;}.green{color: green;}.red{color: red;}textarea{width: 100%;height: 100%;border: 0;                padding: 0;                margin: 0;                padding-bottom: 20px;                }            .block-outer            {                float: left;                width: 22%;                height: 100%;                padding: 5px;                border-left: 1px solid black;                margin: 30px 3px 3px 3px;                }            .block-inner            {                height: 68%;                }            .one            {                border: 0;                }            M=Math;Q=M.random;J=[];U=16;T=M.sin;E=M.sqrt;for(O=k=0;x=z=j=i=k<200;)with(M[k]=k?c.cloneNode(0):c){    width=height=k?32:W=446;        with(getContext('2d'))        if(k>10|!k)        for(        font='60px Impact',        V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':        V+(147+I)+','+(k%2?128+I:0)+','+I+',.5)':'#cca',i<7;        )    beginPath(        fill(            arc(                U-i/3,                24-i/2,                k==13?4-(i++)/2:8-i++,                0,                M.PI*2,1                )            )            );else for(;x=T(i),        y=Q()*2-1,        D=x*x+y*y,        B=E(D-x/.9-1.5*y+1),        R=67*(B+1)*(L=k/9+.8)>>1,        i++)if(D<1)    beginPath(        strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'        ),        moveTo(U+x*8,U+y*8),        lineTo(U+x*U,U+y*U),        stroke();for(        y=H=k+E(k++)*25,        R=Q()*W;        P=3,j)    J[O++]=[x+=T(R)*P+Q()*6-3,y+=Q()*U-8,z+=T(R-11)*P+Q()*6-3,j/H*20+((j+=U)>H&Q()>.8?Q(P=9)*4:0)>>1]}setInterval(function G(m,l){    A=T(D-11);    if(l)return(        m[2]-l[2])*A+(l[0]-m[0])*T(D);        a.clearRect(0,0,W,W);        J.sort(G);for(        i=0;        L=J[i++];        a.drawImage        (            M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1)    )    {        if(i==2e3)        a.fillText        (            'Happy Christmas!',            U,345);if(!(i%7))        a.drawImage        (            M[13],((157*(i*i)+T(D*5+i*i)*5)%W)>>0,            ((113*i+(D*i)/60)%(290+i/99))>>0            );    }    D+=.02},1)

好啦，本期内容就介绍到这里，我们下期见！