关于css3: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>