06.用fullpage+less实现360浏览器之第二屏（3）

发表于 | 分类于

这一屏想实现的效果是：滚进第二屏，散开的图片重新组合成完整的图片
利用到的知识：flex布局，transition，transform

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="section section-two">
        <div class="shield">
            <img src="images/section2_shield_1.png" alt="">
            <img src="images/section2_shield_2.png" alt="">
            <img src="images/section2_shield_3.png" alt="">
            <img src="images/section2_shield_4.png" alt="">
            <img src="images/section2_shield_5.png" alt="">
            <img src="images/section2_shield_6.png" alt="">
            <img src="images/section2_shield_7.png" alt="">
            <img src="images/section2_shield_8.png" alt="">
            <img src="images/section2_shield_9.png" alt="">
        </div>
        <div class="info">
            <img src="images/section2_info.png" alt="">
        </div>
    </div>

less布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/*第二屏*/
.section-two{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
  .shield{
    width: 428px;
    height: 498px;
    img{
      transition: all 1s linear 0s;
      &:nth-child(1){
        transform: translate(35px, 78px) rotate(45deg);
      }
      &:nth-child(2){
        transform: translate(135px, 382px) rotate(15deg);
      }
      &:nth-child(3){
        transform: translate(187px, 162px) rotate(15deg);
      }
      &:nth-child(4){
        transform: translate(10px, 162px) rotate(30deg);
      }
      &:nth-child(5){
        transform: translate(465px, 322px) rotate(30deg);
      }
      &:nth-child(6){
        transform: translate(480px, 62px) rotate(90deg);
      }
      &:nth-child(7){
        transform: translate(180px, -305px) rotate(80deg);
      }
      &:nth-child(8){
        transform: translate(150px, -50px) rotate(70deg);
      }
      &:nth-child(9){
        transform: translate(280px, -322px) rotate(60deg);
      }
    }
  }
  &.current{
    .shield{
      img{
        transform: none;
      }
    }
  }
}

如何实现散开凌乱的几行图片重组成完整的图片？

散开如何实现？利用translate rotate

重组如何实现？利用transition，从有transform到无，也就不会散乱了，

注意：不要忘了给shield设置宽高，因为img是行内元素，会尽量在一行显示的，除非一行放不下，所以设置宽高，才会有理想的效果

效果：主要看第二屏

主要看第二屏