自己绘制的小兔子，白云动画改变margin-left实现。

小兔子是自己绘制的，虽然不太美观。

5朵白云使用同一个动画帧。为了让白云在动画第一帧的位置不相同，我改变白云的margin-left属性而不是left属性，这样的视觉效果更好。

完整代码如下（经测试，兼容IE10+）。

HTML代码

<div class="BlueSky"> <!--蓝天-->
   <div class="cloud one"></div> <!--云朵1-->
   <div class="cloud two"></div> <!--云朵2-->
   <div class="cloud three"></div> <!--云朵3-->
   <div class="cloud four"></div> <!--云朵4-->
   <div class="cloud five"></div> <!--云朵5-->
</div>
<div class="GreenGrassland"> <!--绿地-->
   <div class="rabbit"> <!--兔子-->
      <div class="face"></div> <!--脸-->
      <div class="LeftEye"></div> <!--左眼-->
      <div class="RightEye"></div> <!--右眼-->
      <div class="nose"></div> <!--鼻子-->
      <div class="LeftLip"></div> <!--左嘴唇-->
      <div class="RightLip"></div> <!--右嘴唇-->
      <div class="beard"></div> <!--胡须-->
      <div class="beard right"></div> <!--右胡须-->
      <div class="LeftEar"></div> <!--左耳朵-->
      <div class="RightEar"></div> <!--右耳朵-->
      <div class="body"> <!--身体部分-->
         <div class="LeftHand"></div> <!--左手-->
         <div class="RightHand"></div> <!--右手-->
         <div class="leg"></div> <!--腿-->
      </div>
      <div class="tail"></div> <!--尾巴-->
   </div>

CSS代码

body
{
    overflow: hidden; /*防止窗口出现滚动条*/
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh; /*整体高度100vh*/
}

.BlueSky /*蓝天*/
{
    position: relative;
    width: 100%;
    height: 60vh; /*蓝天高度占60%*/
    background-image: -webkit-linear-gradient(to bottom, rgba(196, 228, 253, 1), rgba(196, 228, 253, 0));
    background-image: -moz-linear-gradient(to bottom, rgba(196, 228, 253, 1), rgba(196, 228, 253, 0));
    background-image: -o-linear-gradient(to bottom, rgba(196, 228, 253, 1), rgba(196, 228, 253, 0));
    background-image: -ms-linear-gradient(to bottom, rgba(196, 228, 253, 1), rgba(196, 228, 253, 0));
    background-image: linear-gradient(to bottom, rgba(196, 228, 253, 1), rgba(196, 228, 253, 0));
    z-index: -2;
}

.GreenGrassland /*绿地*/
{
    position: relative;
    width: 100%;
    height: 40vh; /*绿地高度占40%*/
    background-image: -webkit-linear-gradient(to top, rgba(148, 190, 89, 1), rgba(148, 190, 89, 0));
    background-image: -moz-linear-gradient(to top, rgba(148, 190, 89, 1), rgba(148, 190, 89, 0));
    background-image: -o-linear-gradient(to top, rgba(148, 190, 89, 1), rgba(148, 190, 89, 0));
    background-image: -ms-linear-gradient(to top, rgba(148, 190, 89, 1), rgba(148, 190, 89, 0));
    background-image: linear-gradient(to top, rgba(148, 190, 89, 1), rgba(148, 190, 89, 0));
    z-index: -2;
}

.cloud /*云朵*/
{
    position: absolute;
    border-radius: 14%/50%;
    width: 210px;
    height: 60px;
    background-color: #FFF;
}

.cloud::before
{
    top: -28%;
    left: 8%;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg);
    border-radius: 50%/30%;
    width: 70px;
    height: 86px;
    background-color: #FFF;
}

.cloud::after
{
    top: -98%;
    left: 30%;
    border-radius: 50% 50% 50% 38%/50%;
    width: 130px;
    height: 128px;
    background-color: #FFF;
}

.cloud.one /*云朵1*/
{
    top: 30%;
    left: 50%;
    -webkit-transform: scale(1.3); /*放大1.3倍*/
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-animation: CloudAnimation 10s linear infinite;
    -moz-animation: CloudAnimation 10s linear infinite;
    -o-animation: CloudAnimation 10s linear infinite;
    -ms-animation: CloudAnimation 10s linear infinite;
    animation: CloudAnimation 10s linear infinite;
}

.cloud.two /*云朵2*/
{
    top: 10%;
    left: 10%;
    opacity: .9; /*透明度90%*/
    -webkit-animation: CloudAnimation 14s linear infinite;
    -moz-animation: CloudAnimation 14s linear infinite;
    -o-animation: CloudAnimation 14s linear infinite;
    -ms-animation: CloudAnimation 14s linear infinite;
    animation: CloudAnimation 14s linear infinite;
}

.cloud.three /*云朵3*/
{
    top: 50%;
    left: 30%;
    -webkit-transform: scale(.9); /*缩小为原来的90%*/
    -moz-transform: scale(.9);
    -o-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
    opacity: .8; /*透明度80%*/
    -webkit-animation: CloudAnimation 12s linear infinite;
    -moz-animation: CloudAnimation 12s linear infinite;
    -o-animation: CloudAnimation 12s linear infinite;
    -ms-animation: CloudAnimation 12s linear infinite;
    animation: CloudAnimation 12s linear infinite;
}

.cloud.four /*云朵4*/
{
    top: 16%;
    left: 70%;
    -webkit-transform: scale(.8); /*缩小为原来的80%*/
    -moz-transform: scale(.8);
    -o-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8);
    opacity: .7; /*透明度70%*/
    -webkit-animation: CloudAnimation 12s linear infinite;
    -moz-animation: CloudAnimation 12s linear infinite;
    -o-animation: CloudAnimation 12s linear infinite;
    -ms-animation: CloudAnimation 12s linear infinite;
    animation: CloudAnimation 12s linear infinite;
}

.cloud.five /*云朵5*/
{
    top: 50%;
    left: 65%;
    -webkit-transform: scale(.72); /*缩小为原来的72%*/
    -moz-transform: scale(.72);
    -o-transform: scale(.72);
    -ms-transform: scale(.72);
    transform: scale(.72);
    opacity: .6; /*透明度60%*/
    -webkit-animation: CloudAnimation 16s linear infinite;
    -moz-animation: CloudAnimation 16s linear infinite;
    -o-animation: CloudAnimation 16s linear infinite;
    -ms-animation: CloudAnimation 16s linear infinite;
    animation: CloudAnimation 16s linear infinite;
}

@-webkit-keyframes CloudAnimation /*云朵动画*/
{
    0%
    {margin-left: 54%;}
    100%
    {margin-left: -100%;}
}

@-moz-keyframes CloudAnimation /*云朵动画*/
{
    0%
    {margin-left: 54%;}
    100%
    {margin-left: -100%;}
}

@-o-keyframes CloudAnimation /*云朵动画*/
{
    0%
    {margin-left: 54%;}
    100%
    {margin-left: -100%;}
}

@-ms-keyframes CloudAnimation /*云朵动画*/
{
    0%
    {margin-left: 54%;}
    100%
    {margin-left: -100%;}
}

@keyframes CloudAnimation /*云朵动画*/
{
    0%
    {margin-left: 54%;}
    100%
    {margin-left: -100%;}
}

.rabbit /*兔子*/
{
    position: absolute;
    bottom: 5%;
    right: 10%;
    width: 300px;
    height: 250px;
}

.face /*脸*/
{
    position: absolute;
    top: 18%;
    left: 2%;
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    transform: rotate(-35deg);
    border-radius: 50%/ 50% 36% 50% 50%;
    width: 120px;
    height: 120px;
    background-color: #FFF;
    z-index: 0;
}

.LeftEye /*左眼*/
{
    position: absolute;
    top: 16%;
    left: 11%;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    border-radius: 26% 70% 70% 25%/50%;
    width: 18px;
    height: 40px;
    background-color: #838383;
}

.LeftEye::after
{
    top: 19%;
    left: 3%;
    border-radius: 34% 50% 50% 30%/50%;
    width: 6px;
    height: 12px;
    background-color: #FFF;
}

.RightEye /*右眼*/
{
    position: absolute;
    top: 30%;
    left: 24%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-radius: 45% 45% 48% 40%/ 50% 30% 50% 50%;
    width: 24px;
    height: 38px;
    background-color: #838383;
}

.RightEye::after
{
    top: 18%;
    left: 28%;
    border-radius: 48% 50% 50%/50%;
    width: 8px;
    height: 12px;
    background-color: #FFF;
}

.nose /*鼻子*/
{
    position: absolute;
    top: 34%;
    left: 4%;
    -webkit-transform: rotate(42deg);
    -moz-transform: rotate(42deg);
    -o-transform: rotate(42deg);
    -ms-transform: rotate(42deg);
    transform: rotate(42deg);
    border-width: 20px;
    border-style: solid;
    border-color: #7E7E7F transparent transparent transparent;
    border-radius: 50%;
    width: 2px;
    height: 2px;
}

.nose::before
{
    top: -20px;
    left: -14px;
    border-radius: 50%;
    width: 30px;
    height: 10px;
    background-color: #7E7E7F;
}

.LeftLip /*左嘴唇*/
{
    top: 39%;
    left: 5%;
    -webkit-transform: rotate(46deg);
    -moz-transform: rotate(46deg);
    -o-transform: rotate(46deg);
    -ms-transform: rotate(46deg);
    transform: rotate(46deg);
    border-radius: 58% 40% 76% 40%/44% 10% 80% 68%;
    width: 15px;
    height: 8px;
}

.RightLip /*右嘴唇*/
{
    top: 44%;
    left: 8%;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    border-radius: 50%;
    width: 24px;
    height: 12px;
}

.LeftLip,
.RightLip
{
    position: absolute;
    border-width: 1px;
    border-style: solid;
    border-color: transparent #7E7E7F #7E7E7F #7E7E7F;
    background-color: transparent;
}

.beard /*胡须*/
{
    top: 19%;
    left: -6%;
    -webkit-transform: rotate(50deg);
    -moz-transform: rotate(50deg);
    -o-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    transform: rotate(50deg);
    border-top: 1px solid #7E7E7F;
    border-radius: 42% 0 0/40% 0 0;
}

.beard::before
{
    top: 114%;
    left: 30%;
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    -o-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    transform: rotate(-25deg);
    border-top: 1px solid #7E7E7F;
    border-radius: 42% 0 0/40% 0 0;
}

.beard::after
{
    top: -209%;
    left: 25%;
    -webkit-transform: rotate(27deg);
    -moz-transform: rotate(27deg);
    -o-transform: rotate(27deg);
    -ms-transform: rotate(27deg);
    transform: rotate(27deg);
    border-bottom: 1px solid #7E7E7F;
    border-radius: 50%/0 0 0 18%;
}

.beard,
.beard::before,
.beard::after
{
    position: absolute;
    width: 30px;
    height: 16px;
    background-color: transparent;
}

.beard.right /*右胡须*/
{
    -webkit-transform: scale(-1, 1) rotate(-42deg) translate(-120px, 22px);
    -moz-transform: scale(-1, 1) rotate(-42deg) translate(-120px, 22px);
    -o-transform: scale(-1, 1) rotate(-42deg) translate(-120px, 22px);
    -ms-transform: scale(-1, 1) rotate(-42deg) translate(-120px, 22px);
    transform: scale(-1, 1) rotate(-42deg) translate(-120px, 22px);
}

.LeftEar /*左耳朵*/
{
    -webkit-transform: rotate(40deg) translate(65px, -110px);
    -moz-transform: rotate(40deg) translate(65px, -110px);
    -o-transform: rotate(40deg) translate(65px, -110px);
    -ms-transform: rotate(40deg) translate(65px, -110px);
    transform: rotate(40deg) translate(65px, -110px);
    -webkit-animation: LeftEarAnimation .6s ease-in-out infinite;
    -moz-animation: LeftEarAnimation .6s ease-in-out infinite;
    -o-animation: LeftEarAnimation .6s ease-in-out infinite;
    -ms-animation: LeftEarAnimation .6s ease-in-out infinite;
    animation: LeftEarAnimation .6s ease-in-out infinite;
}

.RightEar /*右耳朵*/
{
    -webkit-transform: rotate(65deg) translate(-24px, -184px);
    -moz-transform: rotate(65deg) translate(-24px, -184px);
    -o-transform: rotate(65deg) translate(-24px, -184px);
    -ms-transform: rotate(65deg) translate(-24px, -184px);
    transform: rotate(65deg) translate(-24px, -184px);
    -webkit-animation: RightEarAnimation .6s ease-in-out infinite;
    -moz-animation: RightEarAnimation .6s ease-in-out infinite;
    -o-animation: RightEarAnimation .6s ease-in-out infinite;
    -ms-animation: RightEarAnimation .6s ease-in-out infinite;
    animation: RightEarAnimation .6s ease-in-out infinite;
}

.LeftEar,
.RightEar
{
    border-radius: 50% 50% 40% 40%/50%;
    width: 30px;
    height: 108px;
    background-image: -webkit-linear-gradient(45deg, #DCDCCC, #FFF);
    background-image: -moz-linear-gradient(45deg, #DCDCCC, #FFF);
    background-image: -o-linear-gradient(45deg, #DCDCCC, #FFF);
    background-image: -ms-linear-gradient(45deg, #DCDCCC, #FFF);
    background-image: linear-gradient(45deg, #DCDCCC, #FFF);
    z-index: -1;
}

@-webkit-keyframes LeftEarAnimation /*左耳朵动画*/
{
    0%
    {transform: rotate(40deg) translate(65px, -110px);}
    50%
    {transform: rotate(48deg) translate(66px, -120px);}
    100%
    {transform: rotate(40deg) translate(65px, -110px);}
}

@-moz-keyframes LeftEarAnimation /*左耳朵动画*/
{
    0%
    {transform: rotate(40deg) translate(65px, -110px);}
    50%
    {transform: rotate(48deg) translate(66px, -120px);}
    100%
    {transform: rotate(40deg) translate(65px, -110px);}
}

@-o-keyframes LeftEarAnimation /*左耳朵动画*/
{
    0%
    {transform: rotate(40deg) translate(65px, -110px);}
    50%
    {transform: rotate(48deg) translate(66px, -120px);}
    100%
    {transform: rotate(40deg) translate(65px, -110px);}
}

@-ms-keyframes LeftEarAnimation /*左耳朵动画*/
{
    0%
    {transform: rotate(40deg) translate(65px, -110px);}
    50%
    {transform: rotate(48deg) translate(66px, -120px);}
    100%
    {transform: rotate(40deg) translate(65px, -110px);}
}

@keyframes LeftEarAnimation /*左耳朵动画*/
{
    0%
    {transform: rotate(40deg) translate(65px, -110px);}
    50%
    {transform: rotate(48deg) translate(66px, -120px);}
    100%
    {transform: rotate(40deg) translate(65px, -110px);}
}

@-webkit-keyframes RightEarAnimation /*右耳朵动画*/
{
    0%
    {transform: rotate(65deg) translate(-24px, -184px);}
    50%
    {transform: rotate(61deg) translate(-25px, -185px);}
    100%
    {transform: rotate(65deg) translate(-24px, -184px);}
}

@-moz-keyframes RightEarAnimation /*右耳朵动画*/
{
    0%
    {transform: rotate(65deg) translate(-24px, -184px);}
    50%
    {transform: rotate(61deg) translate(-25px, -185px);}
    100%
    {transform: rotate(65deg) translate(-24px, -184px);}
}

@-o-keyframes RightEarAnimation /*右耳朵动画*/
{
    0%
    {transform: rotate(65deg) translate(-24px, -184px);}
    50%
    {transform: rotate(61deg) translate(-25px, -185px);}
    100%
    {transform: rotate(65deg) translate(-24px, -184px);}
}

@-ms-keyframes RightEarAnimation /*右耳朵动画*/
{
    0%
    {transform: rotate(65deg) translate(-24px, -184px);}
    50%
    {transform: rotate(61deg) translate(-25px, -185px);}
    100%
    {transform: rotate(65deg) translate(-24px, -184px);}
}

@keyframes RightEarAnimation /*右耳朵动画*/
{
    0%
    {transform: rotate(65deg) translate(-24px, -184px);}
    50%
    {transform: rotate(61deg) translate(-25px, -185px);}
    100%
    {transform: rotate(65deg) translate(-24px, -184px);}
}

.body /*身体部分*/
{
    position: absolute;
    top: 45%;
    left: 26%;
    -webkit-transform: rotate(-14deg);
    -moz-transform: rotate(-14deg);
    -o-transform: rotate(-14deg);
    -ms-transform: rotate(-14deg);
    transform: rotate(-14deg);
    border-radius: 62% 38% 47% 100%/60% 70% 80% 84%;
    width: 128px;
    height: 75px;
    background-image: -webkit-linear-gradient(to top, #DCDCCC, #FFF);
    background-image: -moz-linear-gradient(to top, #DCDCCC, #FFF);
    background-image: -o-linear-gradient(to top, #DCDCCC, #FFF);
    background-image: -ms-linear-gradient(to top, #DCDCCC, #FFF);
    background-image: linear-gradient(to top, #DCDCCC, #FFF);
    z-index: -2;
}

.LeftHand /*左手*/
{
    position: absolute;
    top: 46%;
    left: -15%;
    -webkit-transform: rotate(69deg);
    -moz-transform: rotate(69deg);
    -o-transform: rotate(69deg);
    -ms-transform: rotate(69deg);
    transform: rotate(69deg);
    border-radius: 42% 50% 50% 40%/40% 40% 40% 45%;
    width: 22px;
    height: 34px;
    background-image: -webkit-linear-gradient(to bottom, #DCDCCC, #FFF);
    background-image: -moz-linear-gradient(to bottom, #DCDCCC, #FFF);
    background-image: -o-linear-gradient(to bottom, #DCDCCC, #FFF);
    background-image: -ms-linear-gradient(to bottom, #DCDCCC, #FFF);
    background-image: linear-gradient(to bottom, #DCDCCC, #FFF);
}

.RightHand /*右手*/
{
    position: absolute;
    top: 58%;
    left: -2%;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    border-radius: 50% 50% 56% 56%/60% 72% 55% 58%;
    width: 22px;
    height: 48px;
    background-image: -webkit-linear-gradient(to top, #DCDCCC, #FFF 80%);
    background-image: -moz-linear-gradient(to top, #DCDCCC, #FFF 80%);
    background-image: -o-linear-gradient(to top, #DCDCCC, #FFF 80%);
    background-image: -ms-linear-gradient(to top, #DCDCCC, #FFF 80%);
    background-image: linear-gradient(to top, #DCDCCC, #FFF 80%);
}

.leg /*腿*/
{
    position: absolute;
    top: 22%;
    left: 38%;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
    border-radius: 64% 74% 60% 100%/50% 52% 92% 108%;
    width: 62px;
    height: 80px;
    background-image: -webkit-linear-gradient(-18deg, #DCDCCC, #FFF 80%);
    background-image: -moz-linear-gradient(-18deg, #DCDCCC, #FFF 80%);
    background-image: -o-linear-gradient(-18deg, #DCDCCC, #FFF 80%);
    background-image: -ms-linear-gradient(-18deg, #DCDCCC, #FFF 80%);
    background-image: linear-gradient(-18deg, #DCDCCC, #FFF 80%);
}

.leg::after
{
    top: 71%;
    left: -37%;
    -webkit-transform: rotate(22deg);
    -moz-transform: rotate(22deg);
    -o-transform: rotate(22deg);
    -ms-transform: rotate(22deg);
    transform: rotate(22deg);
    border-radius: 50%/50% 42% 30% 30%;
    width: 70px;
    height: 20px;
    background-image: -webkit-linear-gradient(-18deg, #DCDCCC, #FFF 80%);
    background-image: -moz-linear-gradient(-18deg, #DCDCCC, #FFF 80%);
    background-image: -o-linear-gradient(-18deg, #DCDCCC, #FFF 80%);
    background-image: -ms-linear-gradient(-18deg, #DCDCCC, #FFF 80%);
    background-image: linear-gradient(-18deg, #DCDCCC, #FFF 80%);
}

.cloud::before,
.cloud::after,
.LeftEye::after,
.RightEye::after,
.nose::before,
.beard::before,
.beard::after,
.leg::after /*before和after伪元素的通用样式*/
{
    content: "";
    display: block;
    position: absolute;
}

.tail /*尾巴*/
{
    position: absolute;
    top: 39%;
    left: 60%;
    border-radius: 90% 55% 100% 60%/73% 73% 85% 50%;
    width: 56px;
    height: 68px;
    background-color: #FFF;
    z-index: -3;
}

演示效果（gif图）如下。