JDX01(2017):Travel World(2)

範例結果

練習3:sec4 動畫應用

S1:html結構

      <section id="sec4">
        <h2>section4.動畫</h2>
        <div class="earth">
          <img src="image/sec4_01.png" alt=""/>
          <img src="image/sec4_02.png" alt=""/>
        </div>
        <img class="airplane" src="image/sec04_03.png" alt=""/>
      </section>

pug 結構

      section#sec4
        h2 section4.動畫
        .earth
          img(src="image/sec4_01.png", alt="")
          img(src="image/sec4_02.png", alt="")
        img.airplane(src="image/sec04_03.png", alt="")

S2:SCSS結構

//#sec4 Start
.earth{
  position: absolute;
  bottom:-80px; 
  width:100%; height: 760px;
  /* background: red; */
  animation: earthAn 50s infinite linear;
  transform-origin: 50% 100% 0px;
  
  img{
    /* display: block; */
    position: absolute;
    bottom:0; 
    left: 50%;
    transform: translate(-50%, 50%);  
    
  }
}
.airplane{
  animation: airplaneAn 5s infinite linear;
  position: absolute;
  bottom:0; 
  left: 50%;
}
@keyframes earthAn{
  0%{ transform: rotate(0);}
  100%{transform:  rotate(360deg);}
}
@keyframes airplaneAn {
  0% {  transform: rotate(0deg) translate(-450px) rotate(0deg) ; }
  100% {  transform: rotate(180deg) translate(-450px) rotate(-180deg) ; }
}
//#sec4 End