原网址：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>