07.用fullpage+less实现360浏览器之第三屏（4）

发表于 | 分类于

第三屏想实现的效果是：小火箭从左下角慢慢飞到右上角

利用到：transform transition

html

1
2
3
4
5
6
7
8
9
<div class="section section-three">
       <div class="info">
           <img src="images/section3_info.png" alt="">
       </div>
       <div>
           <img src="images/section3_circle.png" alt="">
           <img src="images/section3_rocket.png" alt="" class="rocket">
       </div>
   </div>

less

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.section-three{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2%;
  .info{
    img{
      width: 388px;
    }
  }
  .rocket{
   transform: translate(-900px,110px);
    transition: all 0.5s linear 0s;
  }
  &.current{
    .rocket{
      transform:translate(-550px,-39px);
    }
  }
}

注意点：transform中的translate的x，y是根据自身的宽高+padding，边框(border)为标准计算的来计算的

测试证明：给元素（原高204）增加100px的padding-top，想实现transform: translateY(-50%);即transform: translateY(-102px);和transform: translateY(-152px); 前后差50px，发现前后停放的位置不一致，证明padding是计算了进去的

关于transform

translate 的50%是相对于自己的

translate 与 相对、绝对定位

效果：主要看第三屏

主要看第三屏