Dynamic diagram of less frog and ship

Time:2021-10-25

Original website:https://codepen.io/jellynina/…
I changed it a little.

Animation using 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 encapsulation
*/

//Keyframes encapsulates @ prefix browser prefix @ name animation name @ content animation content execution function
.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 custom animation
//1. Background movement
.keyframes(all,bg-move,{
    0%   { background-position:  100% -560px; }
    100% { background-position: -350% -460px; }
});
//2. Frog movement
.keyframes(all,mike-move,{
    100% { left: 12%; }
});
//3. The frog floats
.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. Boat movement
.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. Boat steam
.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 call
------------------------------------------ */
//Moving background
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
.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的烟,伪元素生成
.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>

Dynamic diagram of less frog and ship