less青蛙与船的动图

原网址：https://codepen.io/jellynina/...
我拿来改了一点点。

使用了CSS的动画：

<template>
<div>
      <div class="boat">
        ![](https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/boat.png)
    </div>
    ![](https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/mike.png)
  </div>
</template>

<script>
  export default {
    name:'boat'
  }
</script>

<style lang="less" scoped>
/**
* animation 封装
*/

// keyframes 封装 @prefix浏览器前缀 @name动画名称 @content动画内容执行函数
.keyframes (@prefix,@name,@content) when (@prefix=def) {
  @keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) {
  @prefix+'-keyframes' @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=all) {
  .keyframes(moz,@name,@content);
  .keyframes(o,@name,@content);
  .keyframes(webkit,@name,@content);
  .keyframes(def,@name,@content);
}
// animation 自定义动画
// 1.背景移动
.keyframes(all,bg-move,{
    0%   { background-position:  100% -560px; }
    100% { background-position: -350% -460px; }
});
// 2.青蛙移动
.keyframes(all,mike-move,{
    100% { left: 12%; }
});
// 3.青蛙浮起来
.keyframes(all,mike-float,{
    50% {
    transform: rotateZ(5deg) translateY(-5px); 
    -moz-transform: rotateZ(5deg) translateY(-5px);
    -o-transform: rotateZ(5deg) translateY(-5px);
    -webkit-transform: rotateZ(5deg) translateY(-5px);
     }
});
// 4.小船移动
.keyframes(all,rock-boat,{
    50%  { 
    transform: rotate(-5deg) translateY(-10px); 
    -moz-transform: rotate(-5deg) translateY(-10px);
    -o-transform: rotate(-5deg) translateY(-10px);
    -webkit-transform: rotate(-5deg) translateY(-10px);
     }
});
// 5.小船蒸汽
.keyframes(all,steam-boat,{
    40%,
    60%  { opacity: .8; }
    100% {
      transform: translate(-15%, -35%) rotateZ(20deg); 
     -moz-transform: translate(-15%, -35%) rotateZ(20deg);
     -o-transform: translate(-15%, -35%) rotateZ(20deg);
     -webkit-transform: translate(-15%, -35%) rotateZ(20deg);
      }
});

/*    Animations 调用
------------------------------------------ */
// 移动背景
body {
    background: 
    #F0FCFF url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/island.png') repeat-x 100% -460px;
    background-size: auto;
    background-size: 780px;
    animation: bg-move 8s ease-out forwards;
   -moz-animation:bg-move 8s ease-out forwards;
   -o-animation:bg-move 8s ease-out forwards;
     -webkit-animation: bg-move 8s ease-out forwards;
}
// 船
.boat {
  animation: rock-boat 3s ease-in-out infinite;
  -moz-animation: rock-boat 3s ease-in-out infinite;
  -o-animation: rock-boat 3s ease-in-out infinite;
    -webkit-animation: rock-boat 3s ease-in-out infinite;
}
// 船的烟，伪元素生成
.boat::after {
    content: "";
    animation: steam-boat 4s 2s infinite;
    -moz-animation: steam-boat 4s 2s infinite;
    -o-animation: steam-boat 4s 2s infinite;
      -webkit-animation: steam-boat 4s 2s infinite;
    display: block;
    width: 120px;
    height: 120px;
    background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/steam.png') no-repeat;
    background-size: auto;
    background-size: 120px;
    position: absolute;
    top: -25%;
    left: 5%;
    opacity: 0;
}
.mike {
  animation: mike-move 6s 6s ease-out forwards,
                       mike-float 3.2s infinite;
  -moz-animation:mike-move 6s 6s ease-out forwards,
                       mike-float 3.2s infinite;
  -o-animation:mike-move 6s 6s ease-out forwards,
                       mike-float 3.2s infinite;
    -webkit-animation: mike-move 6s 6s ease-out forwards,
                       mike-float 3.2s infinite;
}

</style>