主要使用的css3属性如下：
:before:after:nth-child()animationtransform: rotate(angle)transform: skew(x,y)transform: scale(x,y)transform: translate3d(x,y,z)background-image:linear-gradient()复制代码
html
chick 复制代码我是一只鸡
css
css有点长，github上有，
html{min-width:320px;overflow-x:hidden}body,html{height:100%;line-height:1;-webkit-user-select:none;//禁止用户复制页面文本 -webkit-touch-callout:none;-webkit-overflow-scrolling:touch;//ios滚动效果 -webkit-font-smoothing:antialiased;//mac下字体 -webkit-tap-highlight-color:rgba(242,137,76,.05);://a标签点击高亮效果}article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,pre,section,span,td,textarea,th,ul{margin:0;padding:0;list-style:none;-webkit-text-size-adjust:none;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;word-wrap:break-word}.bee-body:after,.bee-body:before,.bee-box:before,.bee:after,.bee:before,.blusher span:after,.blusher span:before,.chick-body:before,.chick-head:after,.chick-head:before,.egg-wrapper span:before,.egg:before,.eye span:after,.eye span:before,.face:after,.face:before,.fence span:nth-child(1):after,.fence span:nth-child(1):before,.fence span:nth-child(2):after,.fence span:nth-child(2):before,.fence span:nth-child(3):after,.fence span:nth-child(3):before,.fence span:nth-child(4):after,.fence span:nth-child(4):before,.flower-head:after,.flower-head:before,.flower-top:before,.flowerpot-top:after,.flowerpot-top:before,.flowerpot:after,.fodder:after,.fodder:before,.foot span:before,.foot:before,.house-6:before,.house-7:after,.house-7:before,.house-8:after,.house-8:before,.soil:after,.soil:before,.trough span:after,.trough span:before,.trough:before,.wing-left:before{position:absolute;content:""}.loading{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;background-color:#b7eaff;z-index:99}.loading .pic{position:absolute;top:50%;left:50%;width:5rem;height:5rem;margin:-2.5rem 0 0 -2.5rem}.loading .pic p{position:absolute;bottom:0;width:100%;text-align:center;font-size:.6rem;color:#4d96b5}.loading .egg-wrapper{bottom:20%;left:0;-webkit-animation:pic 1.5s ease-in infinite}.loading .egg{-webkit-animation:none}.container{height:100%;overflow:hidden}.content{width:100%;position:absolute;top:0;bottom:0;background-image:-webkit-linear-gradient(to bottom,#75cefc,#fff);background-image:linear-gradient(to bottom,#75cefc,#fff);overflow:hidden}.sunlight{position:absolute;width:100%;height:100%;overflow:hidden}.sunlight span{position:absolute;top:-10%;height:150%;width:3rem;background-color:#fff;left:20%;transform:rotate(-14deg);z-index:20}.sunlight span:nth-child(1){-webkit-animation:sunlight-1 11s ease-in infinite}.sunlight span:nth-child(2){left:28%;-webkit-animation:sunlight-2 11.5s ease-in infinite}.sunlight span:nth-child(3){left:65%;width:5rem;transform:rotate(-18deg);-webkit-animation:sunlight-3 13s ease-in infinite}.sunlight span:nth-child(4){left:108%;width:1.6rem;transform:rotate(-22deg);-webkit-animation:sunlight-3 15s ease-in infinite}.grass-1{position:absolute;width:100%;height:40%;bottom:0;left:0;background-color:#b7f03b;box-shadow:0 0 5px #fff}.grass-1>span{position:absolute;display:block}.grass-1>span:nth-child(1),.grass-1>span:nth-child(2){height:30%;width:100%;top:0;left:0;background-image:-webkit-linear-gradient(225deg,rgba(164,214,51,.26),#b7f03b);background-image:linear-gradient(225deg,rgba(164,214,51,.26),#b7f03b)}.grass-1>span:nth-child(2){top:35%}.grass-1>span:nth-child(3){height:30%;width:100%;bottom:0;background-image:-webkit-linear-gradient(180deg,#38862c,#b7f03b);background-image:linear-gradient(180deg,#38862c,#b7f03b)}.grass-1>span:nth-child(4){height:30%;width:80%;bottom:30%;left:0;border-radius:0 10rem 10rem 0;background-image:-webkit-linear-gradient(180deg,#5dac34,#b7f03b);background-image:linear-gradient(180deg,#5dac34,#b7f03b)}.grass-1>span:nth-child(5),.grass-1>span:nth-child(6){height:13%}.grass-1>span:nth-child(5){width:95%;right:0;bottom:30%;border-radius:5rem 0 0 5rem;background-image:-webkit-linear-gradient(225deg,#b1e837,#b7f03b);background-image:linear-gradient(225deg,#b1e837,#b7f03b)}.grass-1>span:nth-child(6){width:70%;left:0;bottom:18%;border-radius:0 5rem 5rem 0;background-image:-webkit-linear-gradient(225deg,#b1e837,#b7f03b);background-image:linear-gradient(225deg,#b1e837,#b7f03b)}.grass-1>span:nth-child(5):before,.grass-1>span:nth-child(6):after,.grass-1>span:nth-child(6):before{position:absolute;width:80%;left:1rem;content:"";height:.8rem;border-radius:1rem}.grass-1>span:nth-child(5):before{bottom:.5rem;background-image:-webkit-linear-gradient(225deg,#bdf641,#b7f03b);background-image:linear-gradient(225deg,#bdf641,#b7f03b)}.grass-1>span:nth-child(6):before{top:.25rem;height:1rem;background-image:-webkit-linear-gradient(225deg,#c2f64e,#b7f03b);background-image:linear-gradient(225deg,#c2f64e,#b7f03b)}.grass-1>span:nth-child(6):after{width:65%;top:.8rem;height:1rem;background-image:-webkit-linear-gradient(225deg,#c2f64e,#b7f03b);background-image:linear-gradient(225deg,#c2f64e,#b7f03b)}.egg-wrapper{position:absolute;bottom:43%;left:10%;width:5rem;height:5rem;z-index:6}.egg-wrapper span{position:absolute}.egg-wrapper span:nth-child(1),.egg-wrapper span:nth-child(1):before{left:5%;bottom:0;width:90%;height:.6rem;background-color:#9fd444;border-radius:1rem 1rem 0 0}.egg-wrapper span:nth-child(1):before{left:12.5%;width:75%;bottom:.5rem}.egg-wrapper span:nth-child(2),.egg-wrapper span:nth-child(2):before{left:10%;bottom:0;width:80%;height:.6rem;background-color:#77b723;border-radius:1rem 1rem 0 0}.egg-wrapper span:nth-child(2):before{left:13%;width:74%;bottom:.5rem}.egg-wrapper span:nth-child(3),.egg-wrapper span:nth-child(3):before{left:20%;bottom:0;width:60%;height:.8rem;background-color:#bfe85c;border-radius:1rem 1rem 0 0;z-index:7}.egg-wrapper span:nth-child(3):before{bottom:.3rem}.egg-wrapper span:nth-child(4),.egg-wrapper span:nth-child(4):before{left:22.5%;bottom:0;width:55%;height:.6rem;background-color:#a0d231;border-radius:1rem 1rem 0 0;z-index:7}.egg-wrapper span:nth-child(4):before{bottom:.3rem}.egg{position:absolute;bottom:0;left:50%;width:2.5rem;height:3rem;margin-left:-1.25rem;background-color:#f2e3cb;border:2px solid #fff;border-radius:60% 60% 55% 55% / 80% 80% 40% 40%;z-index:6;display:block;overflow:hidden;-webkit-animation-name:greenpulse;-webkit-animation-duration:2s}.egg:before{top:-.1rem;left:-.4rem;width:2.5rem;height:2.6rem;background-color:#fff;border-radius:50%}.chick{position:absolute;bottom:45%;left:50%;display:block;width:7.6rem;height:8.6rem;margin-left:-3.5rem;z-index:5}.chick-head{top:-1rem;left:50%;width:1.2rem;height:1.5rem;margin-left:-.75rem;border-radius:1.5rem;background-color:#ea292c;transform:skew(0deg,-15deg)}.chick-head:before{bottom:-.1rem;left:1.3rem;width:.8rem;height:1rem;margin-left:-.4rem;border-radius:1rem;background-color:#ea292c;transform:skew(0deg,-15deg)}.chick-head:after{bottom:-.4rem;left:1.8rem;width:.4rem;height:.8rem;margin-left:-.2rem;border-radius:.8rem;background-color:#ea292c}.chick-body{position:absolute;display:block;width:7.6rem;height:8.6rem;background-color:#f2e3cb;border-radius:66% / 80% 80% 50% 50%;z-index:5;-webkit-animation:chickbody 1.5s ease-in infinite}.chick-body:before{left:-.05rem;width:7.6rem;height:8.2rem;background-image:-webkit-linear-gradient(-180deg,#fff,#fff,#f9e5e6);background-image:linear-gradient(-180deg,#fff,#fff,#f9e5e6);border-radius:66% / 80% 80% 50% 50%;-webkit-animation:chickbody-before 1.5s ease-in infinite}.chick>div{position:absolute}.eye{top:1.5rem;left:1.3rem;width:5rem;height:1rem;z-index:8}.eye span{position:absolute;left:1rem;width:.4rem;height:.9rem;background-color:#27221e;border-radius:60%}.eye span:nth-child(2){left:3.5rem}.eye span:before{width:.12rem;height:.12rem;border-radius:.12rem;background-color:#fff;top:.2rem;left:.15rem}.eye span:after{left:-.2rem;top:-1rem;width:1rem;height:1rem;background-color:#fff;border-radius:50%;z-index:6;-webkit-animation:eye 1.4s ease-in infinite}.blusher{top:3rem;left:1.3rem;width:5rem;height:1rem;-webkit-animation:blusher 3s ease-in infinite;z-index:8}.blusher span{position:absolute;left:.4rem;width:.8rem;height:.4rem;background-color:#fe8a78;border-radius:50%}.blusher span:nth-child(2){left:3.7rem}.blusher span:before{top:-.1rem;left:-.2rem;width:1.2rem;height:.6rem;border-radius:50%;background-color:rgba(254,138,120,.5);box-shadow:0 0 5px #fdccc4}.face{top:3.1rem;left:1.4rem;width:1.6rem;height:1.6rem;z-index:7;-webkit-animation:face 1.5s ease-in infinite}.face:before{top:50%;left:.3rem;margin-top:-.7rem;width:1.6rem;height:1.4rem;border-radius:80%;background-color:#fcf4f2}.face:after{top:0;left:0;width:1.6rem;height:1.6rem;border-radius:50%;background-color:#fff}.wing-left{left:-.34rem;width:2rem;height:4rem;border-radius:50%;background-color:#fbd6cd;bottom:2.2rem;z-index:-1;transform:rotate(20deg);overflow:hidden}.wing-left:before{left:-.4rem;width:.8rem;height:4rem;border-radius:50%;background-color:#fff;transform:rotate(-15deg)}.wing-content,.wing-dh,.wing-right{top:3rem;right:0;width:5rem;height:5rem;z-index:9}.wing-right{-webkit-animation:wingright 1.5s ease-in infinite}.wing-content{z-index:-1}.wing-content span{position:absolute;top:0;right:-.38rem;width:2rem;height:3rem;border-radius:50%;background-image:-webkit-linear-gradient(-180deg,#fff,#fbd6cd);background-image:linear-gradient(-180deg,#fff,#fbd6cd);z-index:-1;transform:rotate(-30deg);-webkit-animation:arm 1.5s ease-in infinite}.wing-right span{position:absolute}.wing-right span:nth-child(2){top:1.4rem;right:-.29rem;width:1.6rem;height:1rem;border-radius:3rem;transform:skew(-7deg,16deg);background-color:#fff6f7;z-index:10}.wing-right span:nth-child(3){top:1.5rem;right:1.1rem;width:1.2rem;height:1.1rem;border-radius:3rem;border-left:3px solid #fff;transform:skew(0deg,27deg);background-color:#fff6f7;z-index:11}.wing-right span:nth-child(4){top:1.9rem;right:1.8rem;width:1rem;height:1rem;border-radius:3rem;transform:skew(0deg,43deg);background-color:#fff6f7;border-left:2px solid #fff;z-index:11}.wing-right span:nth-child(5){top:2rem;right:-.3rem;width:3rem;height:1.5rem;background-color:#fff6f7;border-radius:0 0 1.5rem 1.5rem;z-index:9}.wing-right span:nth-child(6){top:1rem;right:0;width:1.9rem;height:1.1rem;border-radius:3rem;transform:skew(0deg,35deg);background-color:#fff6f7;z-index:10}.wing-right span:nth-child(7){top:2rem;right:-.5rem;width:3.3rem;height:1.65rem;background-image:-webkit-linear-gradient(-222deg,#fff,#fbd6cd);background-image:linear-gradient(-222deg,#fff,#fbd6cd);border-radius:0 0 1.65rem 1.65rem;z-index:8}.wing-right span:nth-child(8){top:1rem;right:0;width:1.9rem;height:1.1rem;border-radius:3rem;border-left:2px solid #fff;transform:skew(0deg,35deg);background-color:#fff6f7;z-index:10}.food{position:absolute;top:.7rem;right:1.3rem;width:2rem;height:2.2rem;background-color:#ffcf00;border-radius:60% 60% 55% 55% / 80% 80% 40% 40%;transform:skew(24deg,-10deg);z-index:7}.food p{position:absolute;left:.2rem;width:.3rem;height:.4rem;background-color:#fff;border-radius:.4rem;-webkit-animation:food-p 1.5s ease-in infinite}.food .dot-box{position:absolute;top:-.4rem;left:.4rem;width:.8rem;height:.8rem}.food .dot-box span{position:absolute;top:70%;left:20%;width:.16rem;height:.16rem;border-radius:50%;background-color:#ffcf00;-webkit-animation:dot-1 1s ease infinite}.food .dot-box span:nth-child(2){position:absolute;top:60%;left:.4rem;width:.1rem;height:.1rem;border-radius:50%;background-color:#ffcf00;-webkit-animation:dot-1 1.4s ease infinite}.mouth{top:3.2rem;left:3.45rem;width:.8rem;height:1rem;z-index:8}.mouth span{position:absolute;left:0;width:0;height:0;border-left:.4rem solid transparent;border-right:.4rem solid transparent;border-bottom:.5rem solid #fecd07;-webkit-animation:mouthspan 1.2s ease-in infinite}.mouth span:nth-child(2){top:.5rem;border-top:.5rem solid #fecd07;border-bottom:none;-webkit-animation:mouthspan 1.2s ease-in infinite}.mouth span:before{position:absolute;content:"";width:.1rem;height:.5rem;background-color:#fecd07;border-radius:150%;left:50%;margin-left:-.05rem}.mouth span:nth-child(2):before{top:-.5rem}.mouth p{position:absolute;top:50%;left:.1rem;margin-top:-.05rem;width:.6rem;height:.1rem;border-radius:50%;background-color:#cd553c;-webkit-animation:mouthp 1.2s ease-in infinite}.foot{bottom:-1rem;width:7.6rem;height:1rem}.foot:before{bottom:.3rem;left:1.8rem;width:4rem;height:.4rem;border-radius:50%;background-color:#87b934}.foot span{position:absolute;top:.4rem;left:2.3rem;width:.6rem;height:.14rem;border-radius:.1rem;background-color:#585c08}.foot span:nth-child(2){left:4.6rem}.foot span:before{top:-.7rem;left:.35rem;width:.16rem;height:.8rem;border-radius:.1rem;background-color:#585c08;transform:rotate(-15deg)}.foot span:nth-child(2):before{left:.1rem;transform:rotate(15deg)}.trough{bottom:-1rem;left:100%;width:5rem;height:4rem}.trough:before{bottom:-.2rem;width:5rem;height:.4rem;border-radius:50%;background-color:#155d2b;z-index:-1}.trough span{position:absolute}.trough span:nth-child(1){bottom:0;width:5rem;height:1.5rem;border-top:.15rem solid #663018;border-radius:0 0 1rem 1rem;background-color:#ac5b2c}.trough span:nth-child(1):after,.trough span:nth-child(1):before{top:.45rem;width:5rem;height:.1rem;background-color:#cc8547}.trough span:nth-child(1):after{width:3rem;top:.95rem;right:.25rem}.trough span:nth-child(2){bottom:1.5rem;left:-.2rem;width:5.4rem;height:.5rem;background-color:#9c4b38}.trough span:nth-child(2):after,.trough span:nth-child(2):before{top:0;left:0;width:2.5rem;height:.25rem;background-color:#fff}.trough span:nth-child(2):after{top:.25rem;background-color:#f6b03e}.trough .fodder{position:absolute;bottom:.5rem;left:1rem;width:3rem;height:3rem;border-radius:.25rem;background-color:#f7fb20;transform:rotate(45deg);z-index:-2;overflow:hidden}.trough .fodder:before{left:-.9rem;top:.6rem;width:0;height:0;border-left:2.5rem solid transparent;border-right:0 solid transparent;border-top:2.5rem solid #ffcf00;transform:skew(-36deg,24deg)}.trough .fodder:after{right:-1.5rem;top:0;width:0;height:0;border-left:2rem solid transparent;border-right:2rem solid transparent;border-top:1.5rem solid #f99b2a;transform:skew(34deg,0deg)}.trough .trough-l{position:absolute;bottom:0;left:0;width:2.3rem;height:1.3rem;border-top:.3rem solid #f7b986;border-radius:0 0 1rem 1rem;background-color:#e69c47;overflow:hidden}.trough .trough-l p{display:inline-block;width:.1rem;height:1.3rem;margin-left:.32rem;background-color:#9d5219}.heart{position:absolute;top:50%;left:50%;width:.8rem;height:.8rem;margin-left:-16%;margin-top:-30%}.heart:after,.heart:before{position:absolute;content:"";left:.35rem;top:0;width:.4rem;height:.7rem;background:red;border-radius:.5rem .5rem 0 0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}.heart:after{left:0;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}.triangle-box{position:absolute;width:100%;top:35.5%;left:0;height:5%;display:flex;align-items:flex-end}.triangle-box.two{top:3.2rem;width:90%;height:1rem;z-index:5}.triangle-box .item{display:inline-block;width:0;height:0;border-left:.25rem solid transparent;border-right:.25rem solid transparent;border-bottom:.5rem solid #60ae34;margin:0 .5rem}.triangle-box .item:nth-child(1),.triangle-box .item:nth-child(4){margin-left:1rem}.leaf-box{position:absolute;bottom:0;left:0;width:5rem;height:5rem;overflow:hidden}.leaf-box .leaf-item{content:'';position:absolute}.leaf-box .leaf-1{left:-2.5rem;bottom:2.2rem;width:4rem;height:2.5rem;border-top-left-radius:5rem;background:#236b37;transform:skew(120deg)}.leaf-box .leaf-2{left:-1.55rem;bottom:.5rem;width:4.1rem;height:3rem;border-bottom-right-radius:5rem;background:#0e4e20;transform:skew(-35deg,-30deg)}.leaf-box .leaf-3{left:-1.5rem;bottom:-.8rem;width:4rem;height:2.5rem;border-top-left-radius:5rem;background:#236b37;transform:skew(120deg,-12deg)}.leaf-box .leaf-4{left:-.5rem;bottom:-2rem;width:4.1rem;height:3rem;border-bottom-right-radius:5rem;background:#0e4e20;transform:skew(-35deg,-29deg)}.peak-box{position:absolute;top:5%;height:50%;width:100%}.peak-box>div{position:absolute}.peak-1{bottom:2rem;border-bottom:5rem solid #9adcf9;border-left:4rem solid transparent;border-right:4rem solid transparent;height:0;width:12rem;left:-6rem}.peak-2{content:"";left:3rem;bottom:4.5rem;width:4rem;height:1rem;border-top-right-radius:4rem;background:#9adcf9;transform:skew(38deg,-43deg)}.peak-3,.peak-4{left:2.5rem;bottom:2rem;width:0;height:0;border-left:8rem solid transparent;border-right:8rem solid transparent;border-bottom:8rem solid #9adcf9}.peak-4{left:6.8rem;bottom:3rem;border-bottom:8rem solid #92dafa}.peak-5{content:"";height:1rem;width:9rem;left:17rem;bottom:4.5rem;background:#92dafa;border-top-left-radius:4rem;transform:skew(-45deg,45deg)}.peak-6{width:100%;height:3.5rem;bottom:0;left:0;background-color:#73dbc5}.peak-7{left:2rem;bottom:3.5rem;width:14rem;height:14rem;overflow:hidden}.peak-7:before{position:absolute;content:"";bottom:-6.5rem;left:2rem;width:10rem;height:10rem;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-image:-webkit-linear-gradient(60deg,#76d6f5,#72dcb8);background-image:linear-gradient(60deg,#76d6f5,#72dcb8)}.peak-7-1{position:absolute;left:.4rem;bottom:-1.1rem;width:0;height:0;border-left:5.5rem solid transparent;border-right:0 solid transparent;border-bottom:5.5rem solid #cfeffd;transform:skew(-22deg,-22deg)}.peak-7-2{position:absolute;content:"";left:4.2rem;bottom:0;width:2rem;height:.3rem;border-bottom-right-radius:.1rem;background:#cfeffd;transform:skew(70deg,-68deg)}.peak-8{width:12rem;height:0;right:0;bottom:3.5rem;border-bottom:1.5rem solid #a0e8dd;border-left:1.5rem solid transparent;border-right:0 solid transparent}.peak-8:before{position:absolute;content:"";border-bottom:1rem solid #a0e8dd;border-left:1rem solid transparent;border-right:0 solid transparent;height:0;width:3rem;right:0;top:-1rem}.peak-9{left:0;bottom:-2.5rem;right:0;height:4rem;background-image:-webkit-linear-gradient(0deg,#7acaab,#4f8b74);background-image:linear-gradient(0deg,#7acaab,#4f8b74)}.peak-9:before{position:absolute;content:"";left:0;bottom:4rem;width:7rem;height:1rem;border-top-right-radius:4rem;background:#4f8b74}.peak-9:after{position:absolute;content:"";left:6.9rem;bottom:3.5rem;width:5.1rem;height:1rem;border-bottom-left-radius:4rem;border-bottom-right-radius:4rem;background:#73dbc5}.windmill{bottom:5rem;right:4.5rem;width:5rem;height:8rem;z-index:4}.windmill>div{position:absolute}.windmill-1{width:5rem;height:0;right:0;bottom:0;border-bottom:5rem solid #d1d6d7;border-left:1rem solid transparent;border-right:1rem solid transparent}.windmill-1:before{position:absolute;content:"";width:2.5rem;height:0;right:-.5rem;bottom:-5rem;border-bottom:5rem solid #f4f5f6;border-left:1rem solid transparent;border-right:1rem solid transparent}.windmill-2,.windmill-3{left:50%;bottom:2.8rem;width:1rem;height:1.2rem;background-color:#d39651;border-radius:1rem 1rem 0 0;margin-left:-.7rem;box-shadow:3px 0 5px #a26f35 inset}.windmill-3{bottom:.5rem}.windmill-2:before,.windmill-3:before{position:absolute;left:-.1rem;bottom:-.3rem;content:"";width:1.2rem;height:.3rem;background-color:#b1d9d4}.windmill-4{bottom:5.5rem;left:1rem;width:0;height:0;border-left:1.5rem solid transparent;border-right:1.5rem solid transparent;border-bottom:2rem solid #e25258}.windmill-4:before{position:absolute;content:"";bottom:-2.5rem;left:-1.5rem;width:3rem;height:.5rem;background-color:#c4c7c7}.windmill-4:after{position:absolute;content:"";right:-1rem;width:0;height:0;border-left:0 solid transparent;border-right:.5rem solid transparent;border-bottom:2rem solid #be2933;transform:skew(26deg,0deg)}.windmill-5{top:-2rem;width:5rem;height:5rem;-webkit-animation:rotate 5s linear infinite;z-index:2}.windmill-5>div{position:absolute}.windmill-5:before{position:absolute;left:50%;top:50%;content:"";width:.5rem;height:.5rem;border-radius:.5rem;margin:-.25rem 0 0 -.25rem;background-color:#fff;z-index:2}.windmill-5-1,.windmill-5-2{top:50%;width:5rem;height:.2rem;margin-top:-.1rem;background-color:#b5b2b2}.windmill-5-2{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.windmill-5-1:after,.windmill-5-1:before,.windmill-5-2:after,.windmill-5-2:before{position:absolute;content:"";width:1.8rem;height:.5rem;border-radius:0 0 .1rem .1rem;background-color:#fff7e0}.windmill-5-1:before,.windmill-5-2:before{top:.1rem}.windmill-5-1:after,.windmill-5-2:after{bottom:.2rem;right:0;border-radius:.1rem .1rem 0 0}.clouds{position:absolute;width:100%;height:50%;top:0;left:0;overflow:hidden}.cloud{position:absolute;top:2rem;width:5rem;height:1.5rem;border-radius:3rem;background-color:#cfeffd}.cloud:before{content:'';position:absolute;background:#cfeffd;width:5rem;height:.8rem;border-radius:.5rem;bottom:0}.cloud.x1{left:-30%;-webkit-animation:cloud 80s linear infinite}.cloud.x1:before{left:-1rem}.cloud.x2{right:-30%;top:8rem;width:4rem;height:1.6rem;-webkit-animation:cloudx2 150s linear infinite}.cloud.x2:before{width:3rem;height:.6rem;right:1.8rem}.cloud.x3{left:-50%;top:11rem;width:3rem;height:1.4rem;-webkit-animation:cloudx3 120s linear infinite}.cloud.x3:before{width:2rem;height:.4rem;left:1.8rem}.house{position:absolute;top:-6.5rem;right:0;width:12rem;height:8rem;overflow:hidden}.house>div{position:absolute}.house-1{bottom:0;width:7rem;height:3.5rem;background-color:#e75c62}.house-2{bottom:3.5rem;left:0;border-bottom:2rem solid #e75c62;border-left:1.5rem solid transparent;border-right:1.5rem solid transparent;height:0;width:7rem}.house-2-1{bottom:3.5rem;left:-.7rem;border-bottom:2rem solid #fff;border-left:1.5rem solid transparent;border-right:1.5rem solid transparent;height:0;width:8.4rem}.house-2-2{bottom:3.5rem;left:-.3rem;border-bottom:2rem solid #650e10;border-left:1.5rem solid transparent;border-right:1.5rem solid transparent;height:0;width:7.676rem}.house-3{bottom:5.5rem;left:1.5rem;width:0;height:0;border-left:2rem solid transparent;border-right:2rem solid transparent;border-bottom:1.5rem solid #e75c62}.house-3-1{bottom:5.5rem;left:.76rem;width:0;height:0;border-left:2.8rem solid transparent;border-right:2.8rem solid transparent;border-bottom:2.2rem solid #fff}.house-3-2{bottom:5.5rem;left:1.2rem;width:0;height:0;border-left:2.35rem solid transparent;border-right:2.35rem solid transparent;border-bottom:1.9rem solid #650e10}.house-4{top:.25rem;right:0;width:7.3rem;height:2rem;background-color:#643c3d;transform:skewX(51deg)}.house-5{top:2.25rem;right:-2.05rem;width:7.3rem;height:2.2rem;background-color:#573435;transform:skewX(36deg)}.house-6{top:4rem;right:0;width:5rem;height:.35rem;background-color:#fff}.house-6:before{top:.3rem;width:5rem;height:1.2rem;background-color:rgba(101,14,16,.82);z-index:2}.house-7{width:5rem;height:3.6rem;right:0;bottom:0;background:#be2933}.house-7:after,.house-7:before{width:.8rem;height:1.4rem;background-color:#482112;left:1.3rem;top:.5rem;border:.15rem solid #fff}.house-7:after{left:3.5rem}.house-8{width:4rem;height:3rem;background:#3d5246;bottom:0;left:1rem}.house-8:before{top:-.5rem;left:0;width:5rem;height:.5rem;background-color:#fff;border-radius:.1rem}.house-8:after{bottom:0;left:0;width:3.5rem;height:2.2rem;background-color:#6a876e}.house-9{width:6rem;height:1rem;background-color:#6db835;border-radius:2rem 0 0;bottom:0;right:0}.fence{position:absolute;top:-2rem;right:12rem;width:5rem;height:3rem}.fence span{position:absolute}.fence span:nth-child(1),.fence span:nth-child(2){left:0;width:.5rem;height:3rem;border-radius:.1rem .1rem 0 0;background-color:#d39651;box-shadow:-2px 0 0 #ab5e2b inset}.fence span:nth-child(1):before,.fence span:nth-child(2):before{width:.7rem;height:.2rem;bottom:-.2rem;left:-.1rem;background-color:#d0a989}.fence span:nth-child(1):after,.fence span:nth-child(2):after{top:0;left:.15rem;width:0;height:0;border-left:.2rem solid transparent;border-right:0 solid transparent;border-bottom:.5rem solid #ab5e2b;-webkit-transform:rotate(170deg);transform:rotate(170deg)}.fence span:nth-child(2):after{top:1.5rem;left:.05rem;-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}.fence span:nth-child(2){left:3rem}.fence span:nth-child(3),.fence span:nth-child(4){right:0;bottom:.5rem;height:.5rem;width:4.95rem;border-radius:.1rem 0 0 .1rem;box-shadow:0 2px 0 #f6ccaa inset;background-color:#e7aa62}.fence span:nth-child(3):after,.fence span:nth-child(3):before,.fence span:nth-child(4):after,.fence span:nth-child(4):before{top:.125rem;left:.1rem;width:.25rem;height:.25rem;border-radius:.25rem;background-color:#ab5e2b}.fence span:nth-child(3):after,.fence span:nth-child(4):after{left:3rem}.fence span:nth-child(4){bottom:1.8rem}.bee-box{position:absolute;top:1rem;left:0;width:7rem;height:4rem;transform:scale(.8,.8)}.bee-box>div{position:absolute}.bee-box:before{width:7rem;height:.6rem;background-color:#60ae34;border-radius:.5rem;bottom:-.3rem}.soil,.soil:before{width:2rem;height:1rem;border-radius:3rem 3rem 0 0}.soil{bottom:0;left:.8rem;background-color:#7e422b;z-index:2}.soil:before{left:-.8rem;background-color:#ab5e2b}.soil.two,.soil.two:before{width:1.8rem;height:1.2rem;border-radius:3rem 3rem 0 0}.soil.two:after,.soil:after{top:.5rem;left:0;width:.25rem;height:.25rem;border-radius:.25rem;background-color:#7e422b;z-index:2}.soil.two{bottom:0;left:3rem}.soil.two:before{left:-.5rem;background-color:#ab5e2b}.flowerpot{width:3.25rem;height:3.25rem;right:0;bottom:0}.flowerpot:after{right:0;bottom:-.25rem;left:0;height:.25rem;border-radius:.25rem;background-color:#60ae34;z-index:4}.flowerpot>div{position:absolute}.flowerpot-top{right:0;bottom:.6rem;width:3.5rem;height:0;border-bottom-left-radius:.25rem;border-bottom:1.6rem solid #ffd729;border-left:.5rem solid transparent;border-right:.5rem solid transparent;-webkit-transform:rotate(107deg);transform:rotate(107deg);z-index:3}.flowerpot-top:before{width:.25rem;height:3rem;left:1.1rem;top:-.6rem;border-radius:.25rem;background-color:#ef9f29;-webkit-transform:rotate(91deg);transform:rotate(91deg)}.flowerpot-top:after{width:.35rem;height:2.5rem;left:1.14rem;bottom:-1.2rem;border-radius:.1rem;background-color:#fff;-webkit-transform:rotate(91deg);transform:rotate(91deg)}.flowerpot-bottom{right:-.7rem;bottom:.298rem;width:2.5rem;height:0;border-top-left-radius:1.3rem;border-bottom:1.6rem solid #ffd729;border-left:.5rem solid transparent;border-right:.2rem solid transparent;-webkit-transform:rotate(107deg);transform:rotate(107deg)}.flower{width:2rem;height:4rem;top:0;left:1.5rem;-webkit-animation:rock 3s ease-in infinite}.flower>div{position:absolute}.flower-top{left:0;width:2rem;height:2rem;z-index:2}.flower-top:before{width:.5rem;height:.5rem;background-color:#fae134;border-radius:.5rem;top:50%;left:50%;margin:-.25rem 0 0 -.25rem;z-index:2}.flower-top p{position:absolute;top:50%;margin-top:-.15rem;width:2rem;height:.3rem;background-color:#fff;border-radius:.4rem}.flower-top p:nth-child(2){transform:rotate(45deg);transform-origin:50% 50%}.flower-top p:nth-child(3){transform:rotate(90deg);transform-origin:50% 50%}.flower-top p:nth-child(4){transform:rotate(135deg);transform-origin:50% 50%}.flower-head{bottom:0;left:.5rem;width:1rem;height:3rem;border:3px solid #60ae34;border-radius:100% 0 0 100%/50%;border-right:none}.flower-head:after{bottom:1rem;left:-.55rem;width:0;height:0;border-left:.25rem solid transparent;border-right:0 solid transparent;border-bottom:.7rem solid #64b033;transform:skewX(45deg)}.flower-head:before{bottom:1.3rem;left:0;width:0;height:0;border-left:.3rem solid transparent;border-right:0 solid transparent;border-bottom:.4rem solid #64b033;transform:skewX(-45deg)}.bee{width:1.5rem;height:.8rem;will-change:transform;-webkit-animation:bee1 6s ease-in infinite;z-index:5}.bee-2{right:0;will-change:transform;-webkit-animation:bee2 5s ease-in infinite}.bee>div{position:absolute}.bee:after,.bee:before{top:50%;right:.45rem;width:.1rem;height:.1rem;border-radius:.1rem;background-color:#feca21;margin-top:-.05rem}.bee:before{right:.7rem;z-index:5}.bee-body,.bee-body:after,.bee-body:before{left:0;width:.6rem;height:.6rem;border-radius:.6rem;background-color:#442418}.bee-body:before{left:.2rem;background-color:#feca21}.bee-body:after{left:.5rem;background-color:#442418}.infinite{-webkit-animation-iteration-count:infinite}@-webkit-keyframes greenpulse{from{-webkit-box-shadow:0 0 18px #f1ff93}50%{-webkit-box-shadow:0 0 36px rgba(205,229,41,.5)}to{-webkit-box-shadow:0 0 18px #f1ff93}}@-webkit-keyframes cloud{0%{left:-30%}50%{left:120%}100%{left:-30%}}@-webkit-keyframes cloudx2{0%{right:-30%}50%{right:130%}100%{right:-30%}}@-webkit-keyframes cloudx3{0%{left:-50%}50%{left:150%}100%{left:-50%}}@-webkit-keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@-webkit-keyframes rock{0%{transform:rotate(-5deg) translate3d(0,0,0)}50%{transform:rotate(5deg) translate3d(30%,0,0)}100%{transform:rotate(-5deg) translate3d(0,0,0)}}@-webkit-keyframes bee1{0%{transform:rotateY(0deg) translate3d(0,0,0)}25%{transform:rotateY(0deg) translate3d(50%,100%,0)}49.9%{transform:rotateY(0deg) translate3d(100%,0,0)}50%{transform:rotateY(180deg) translate3d(-100%,0,0)}75%{transform:rotateY(180deg) translate3d(-50%,-100%,0)}99.9%{transform:rotateY(180deg) translate3d(0,0,0)}100%{transform:rotateY(0deg) translate3d(0,0,0)}}@-webkit-keyframes bee2{0%{transform:rotateY(180deg) translate3d(0,0,0)}25%{transform:rotateY(180deg) translate3d(50%,80%,0)}49.9%{transform:rotateY(180deg) translate3d(80%,0,0)}50%{transform:rotateY(0deg) translate3d(-80%,0,0)}75%{transform:rotateY(0deg) translate3d(-50%,-80%,0)}99.9%{transform:rotateY(0deg) translate3d(0,0,0)}100%{transform:rotateY(180deg) translate3d(0,0,0)}}@-webkit-keyframes eye{0%,40%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,60%,0)}100%,60%{transform:translate3d(0,0,0)}}@-webkit-keyframes blusher{0%{transform:scale(1)}25%{transform:scale(.9)}50%{transform:scale(1)}75%{transform:scale(.9)}100%{transform:scale(1)}}@-webkit-keyframes mouth{0%{transform:rotate(45deg) scale(1,1)}50%{transform:rotate(45deg) scale(1.2,1.2)}100%{transform:rotate(45deg) scale(1,1)}}@-webkit-keyframes mouthspan{0%{left:0;border-left:.4rem solid transparent;border-right:.4rem solid transparent}50%{left:.1rem;border-left:.3rem solid transparent;border-right:.3rem solid transparent}100%{left:0;border-left:.4rem solid transparent;border-right:.4rem solid transparent}}@-webkit-keyframes mouthp{0%{left:0;width:.7rem;height:.1rem}50%{left:.1rem;width:.55rem;height:.14rem;margin-top:-.07rem}100%{left:0;width:.7rem;height:.1rem}}@-webkit-keyframes wingright{0%{transform:rotate(0deg) translate3d(0,0,0)}25%{transform:rotate(-2deg) translate3d(1.5%,1%,0)}50%{transform:rotate(0deg) translate3d(0,0,0)}75%{transform:rotate(-2deg) translate3d(1.5%,1%,0)}100%{transform:rotate(0deg) transform:translate3d(0,0,0)}}@-webkit-keyframes arm{0%{transform:translate3d(5%,10%,0)}25%{transform:translate3d(10%,12%,0)}50%{transform:translate3d(5%,10%,0)}75%{transform:translate3d(10%,12%,0)}100%{transform:translate3d(5%,10%,0)}}@-webkit-keyframes chickbody{0%{height:8.6rem;border-radius:66% / 80% 80% 50% 50%}25%{height:8.7rem;border-radius:66% / 75% 75% 50% 50%}50%{height:8.6rem;border-radius:66% / 80% 80% 50% 50%}75%{height:8.7rem;border-radius:66% / 75% 75% 50% 50%}100%{height:8.6rem;border-radius:66% / 80% 80% 50% 50%}}@-webkit-keyframes chickbody-before{0%{height:8.2rem;border-radius:66% / 80% 80% 50% 50%}25%{height:8.3rem;border-radius:66% / 75% 75% 50% 50%}50%{height:8.2rem;border-radius:66% / 80% 80% 50% 50%}75%{height:8.3rem;border-radius:66% / 75% 75% 50% 50%}100%{height:8.2rem;border-radius:66% / 80% 80% 50% 50%}}@-webkit-keyframes food-p{0%{opacity:1}25%{opacity:0}50%{opacity:1}75%{opacity:0}100%{opacity:1}}@-webkit-keyframes dot-1{0%{transform:translate3d(50%,-70%,0)}25%{transform:translate3d(50%,-170%,0)}50%{transform:translate3d(100%,-270%,0)}75%{transform:translate3d(100%,-370%,0)}100%{transform:translate3d(100%,-470%,0)}}@-webkit-keyframes face{0%{transform:scale(1,1) translate3d(5%,10%,0)}25%{transform:scale(1.1,1.1) translate3d(10%,12%,0)}50%{transform:scale(1,1) translate3d(5%,10%,0)}75%{transform:scale(1.1,1.1) translate3d(10%,12%,0)}100%{transform:scale(1,1) translate3d(5%,10%,0)}}@-webkit-keyframes sunlight-1{0%{opacity:0}50%{opacity:.15}100%{opacity:0}}@-webkit-keyframes sunlight-2{0%{opacity:0}50%{opacity:.1}100%{opacity:0}}@-webkit-keyframes sunlight-3{0%{opacity:0}50%{opacity:.08}100%{opacity:0}}@-webkit-keyframes pic{0%{transform:scale(.8,.8)}25%{transform:scale(1,1)}50%{transform:scale(.8,.8)}75%{transform:scale(1,1)}100%{transform:scale(.8,.8)}}/* .::::. .::::::::. ::::::::::: Come on baby ..:::::::::::' QQ: 1079832313 '::::::::::::' .:::::::::: '::::::::::::::.. ..::::::::::::. ``:::::::::::::::: ::::``:::::::::' .:::. ::::' ':::::' .::::::::. .::::' :::: .:::::::'::::. .:::' ::::: .:::::::::' ':::::. .::' :::::.:::::::::' ':::::. .::' ::::::::::::::' ``::::. ...::: ::::::::::::' ``::. ```` ':. ':::::::::' ::::.. '.:::::' ':'````.. */ 复制代码