蚂蚁庄园 | 易学教程

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>chick</title>
<style>

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)}}

</style>
</head>
<body>
<div class="container">
<div class="content">

<div class="sunlight">
<span></span>
<span></span>
<span></span>
<span></span>
</div>

<div class="peak-box">
<div class="peak-1"></div>
<div class="peak-2"></div>
<div class="peak-3"></div>
<div class="peak-4"></div>
<div class="peak-5"></div>
<div class="peak-6"></div>
<div class="peak-7">
<div class="peak-7-1"></div>
<div class="peak-7-2"></div>
</div>
<div class="peak-8"></div>
<div class="peak-9"></div>

<div class="windmill">
<div class="windmill-1"></div>
<div class="windmill-2"></div>
<div class="windmill-3"></div>
<div class="windmill-4"></div>
<div class="windmill-5">
<div class="windmill-5-1"></div>
<div class="windmill-5-2"></div>
</div>
</div>
</div>

<div class="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
</div>
<div class="grass-1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>

<div class="house">
<div class="house-1"></div>
<div class="house-2-1"></div>
<div class="house-2-2"></div>
<div class="house-2"></div>
<div class="house-3-1"></div>
<div class="house-3-2"></div>
<div class="house-3"></div>
<div class="house-4"></div>
<div class="house-5"></div>
<div class="house-6"></div>
<div class="house-7"></div>
<div class="house-8"></div>

<div class="house-9"></div>
</div>

<div class="fence">
<span></span>
<span></span>
<span></span>
<span></span>
</div>

<div class="bee-box">
<div class="soil two"></div>
<div class="soil"></div>
<div class="flowerpot">
<div class="flowerpot-top"></div>
<div class="flowerpot-bottom"></div>
</div>
<div class="flower">
<div class="flower-top">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="flower-head"></div>
</div>
<div class="bee">
<div class="bee-body"></div>
</div>
<div class="bee bee-2">
<div class="bee-body"></div>
</div>
<div class="triangle-box two">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>

<div class="egg-wrapper">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="egg infinite">
<div class="heart"></div>
</div>
</div>

<div class="triangle-box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

<div class="chick">
<div class="chick-head"></div>
<div class="chick-body"></div>
<div class="eye">
<span></span>
<span></span>
</div>
<div class="blusher">
<span></span>
<span></span>
</div>
<div class="face"></div>
<div class="wing-left"></div>
<div class="wing-content">
<span></span>
</div>
<div class="wing-right">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<div class="food">
<p></p>
<div class="dot-box">
<span></span>
<span></span>
</div>
</div>
</div>
<div class="mouth">
<span></span>
<span></span>
<p></p>
</div>
<div class="foot">
<span></span>
<span></span>
</div>

<div class="trough">
<span></span>
<span></span>
<div class="fodder"></div>
<div class="trough-l">
<p></p>
<p></p>
<p></p>
</div>
</div>
</div>
</div>

<div class="leaf-box">
<div class="leaf-item leaf-1"></div>
<div class="leaf-item leaf-2"></div>
<div class="leaf-item leaf-3"></div>
<div class="leaf-item leaf-4"></div>
</div>
</div>
</div>
<!--<div class="loading">
<div class="pic">
<div class="egg-wrapper">
<div class="egg infinite">
</div>
</div>
<p>我是一只鸡</p>
</div>
</div>

来源：https://www.cnblogs.com/skzxcwebblogs/p/8523775.html

标签

transform

background

border-radius

border