analysis

图片叠层效果

效果展示如图：

伪元素实现

使用伪元素首先要搞清楚的就是伪元素的层级关系。伪元素与标签的层级关系是：after>before>标签元素

我们可以先做一个小demo做个测试。

{% hideBlock 测试代码%}

演示地址：https://gethtml.cn/project/2020/03/25/demo.html

例如：


x
1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>伪元素层级关系测试</title>
7
    <style>
8
      /* 为div设置样式 */
9
      .test {
10
        width: 150px;
11
        height: 150px;
12
        background-color: lightcoral;
13
        margin: 150px auto;
14
        position: relative;
15
      }
16
17
      /* 伪元素before */
18
      .test::before {
19
        content: "这是before元素";
20
        width: 150px;
21
        height: 150px;
22
        background-color: lightyellow;
23
        position: absolute;
24
        left: 70px;
25
      }
26
27
      /* 伪元素after */
28
      .test::after {
29
        content: "这是after元素";
30
        width: 150px;
31
        height: 150px;
32
        background-color: lightblue;
33
        position: absolute;
34
        left: 160px;
35
      }
36
    </style>
37
  </head>
38
39
  <body>
40
    <div class="test">这是标签</div>
41
  </body>
42
</html>
43

{% endhideBlock %}

如果很清晰的可以看到三个div的层级关系。标签元素在最下边，标签元素的上方是before，在上边就是after元素了。

既然搞明白了他们的层级关系，那么接下来利用为元素实现层叠图片效果就很容易了。

效果中存在三张尺寸不同的图。那么最小的自然要用标签做了，做大的用after。这样就可以避免给伪元素调整层级的坑了。

演示地址：https://gethtml.cn/project/2020/03/12/index.html


xxxxxxxxxx
63
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>Document</title>
7
    <style>
8
        .container{
9
            margin: 100px auto;
10
            width: 300px;
11
        }
12
        /* 引入图片 */
13
        .container .radio-img{
14
            background: url(https://ae01.alicdn.com/kf/U0a5fce922da54a278213b077d869bb81o.jpg);
15
            width: 240px;
16
            height: 240px;
17
            background-repeat: no-repeat;
18
            background-size: contain;
19
            border-radius: 2%;
20
            box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .2);
21
            position: relative;
22
            transform: rotate(-90deg);
23
        }
24
        /* 为after与before伪元素设置共同样式 */
25
        .radio-img::before,.radio-img::after{
26
            content: "";
27
            background: url(https://ae01.alicdn.com/kf/U0a5fce922da54a278213b077d869bb81o.jpg);
28
            background-repeat: no-repeat;
29
            background-size: contain;
30
            position: absolute;
31
            top: 50%;
32
            transform: translateY(-50%);
33
        }
34
        
35
        .container .radio-img::before{
36
            width: 270px;
37
            height: 270px;
38
            border-radius: 2%;
39
            box-shadow: 0 10px 24px 0 rgba(0, 0, 0, .1);
40
            left: 10px;
41
            transform: translateY(-50%) rotate(180deg);
42
        }
43
        .container .radio-img::after{
44
            width: 300px;
45
            height: 300px;
46
            border-radius: 2%;
47
            box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .1);
48
            left: 20px;
49
            transform: translateY(-50%) rotate(90deg);
50
        }
51
    </style>
52
</head>
53
<body>
54
    <div class="container">
55
        <!-- 1. 使用::before和::after实现 -->
56
        <div class="radio-img"></div>
57
        <!-- 2. 使用三个img标签实现 -->
58
        <!-- <img src="http://pkicdn.image.alimmdn.com/old/newuploads/d02e858975daa236c3cb82231561fe69.jpg" alt="">
59
        <img src="http://pkicdn.image.alimmdn.com/old/newuploads/d02e858975daa236c3cb82231561fe69.jpg" alt="">
60
        <img src="http://pkicdn.image.alimmdn.com/old/newuploads/d02e858975daa236c3cb82231561fe69.jpg" alt=""> -->
61
    </div>
62
</body>
63
</html>

利用图片元素实现

利用图实现较为简单。因为图片可以对每一张单独设置，而无需考虑层级问题。


xxxxxxxxxx
60
1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>图片叠层效果</title>
7
    <style>
8
      .container {
9
        margin: 200px auto;
10
        width: 300px;
11
        position: relative;
12
      }
13
      /* 默认的图片样式 */
14
      .container img {
15
        position: absolute;
16
        width: 300px;
17
        height: 300px;
18
        left: 50%;
19
        transform: translateX(-50%);
20
      }
21
      .container img:nth-of-type(1) {
22
        width: 240px;
23
        height: 240px;
24
        border-radius: 2%;
25
        box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
26
        transform: translateX(-50%) rotate(-90deg);
27
        top: 60px;
28
      }
29
      .container img:nth-of-type(2) {
30
        width: 270px;
31
        height: 270px;
32
        border-radius: 2%;
33
        box-shadow: 0 10px 24px 0 rgba(0, 0, 0, 0.1);
34
        transform: translateX(-50%) rotate(90deg);
35
        top: 40px;
36
      }
37
      .container img:nth-of-type(3) {
38
        width: 300px;
39
        height: 300px;
40
        border-radius: 2%;
41
        box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.1);
42
      }
43
    </style>
44
  </head>
45
46
  <body>
47
    <div class="container">
48
      <img
49
        src="https://ae01.alicdn.com/kf/U0a5fce922da54a278213b077d869bb81o.jpg"
50
      />
51
      <img
52
        src="https://ae01.alicdn.com/kf/U0a5fce922da54a278213b077d869bb81o.jpg"
53
      />
54
      <img
55
        src="https://ae01.alicdn.com/kf/U0a5fce922da54a278213b077d869bb81o.jpg"
56
      />
57
    </div>
58
  </body>
59
</html>
60

演示地址：https://gethtml.cn/project/2020/03/12/index-img.html

轮播图示例

演示地址：https://gethtml.cn/project/2020/03/25/slide.html

实现思路

两侧旁的按钮可以参考2020-03-17小米轮播图示例。

主要是利用checked伪类判断那一个被选中，然后切换图片。

动画效果方面：首先默认布局应该是中间的变大，左右一边一个。

当被选中后，那么移动到中间，并且原来放大的图移动到右边，右边移动到左边。这样实现一个反复的过程即可。

所以实现起来就很简单了。首先调整好默认位置


xxxxxxxxxx
9
1
.imgList img:nth-of-type(2) {
2
    left: 50px;
3
}
4
.imgList img:nth-of-type(3) {
5
    left: 530px;
6
}

其次就是设置点击时的样式


xxxxxxxxxx
1
#slide3:checked ~ .imgList img:nth-of-type(3),
2
#slide2:checked ~ .imgList img:nth-of-type(2),
3
#slide1:checked ~ .imgList img:nth-of-type(1) {
4
    width: 640px;
5
    height: 375px;
6
    z-index: 8;
7
    left: 200px;
8
}
9
#slide2:checked ~ .imgList img:nth-of-type(3){
10
    left: 0px;
11
}
12
#slide2:checked ~ .imgList img:nth-of-type(1){
13
    left: 530px;
14
}
15
#slide3:checked ~ .imgList img:nth-of-type(1){
16
    left: 0px;
17
}
18
#slide3:checked ~ .imgList img:nth-of-type(2){
19
    left: 530px;
20
}

完整代码示例


155
1
2
<!DOCTYPE html>
3
<html lang="en">
4
  <head>
5
    <meta charset="UTF-8" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>轮播图示例</title>
8
    <style>
9
      * {
10
        box-sizing: border-box;
11
      }
12
13
      body {
14
        margin: 0;
15
        padding: 0;
16
      }
17
18
      .container {
19
        width: 1226px;
20
        height: 460px;
21
        background: lightcyan;
22
        margin: 100px auto;
23
        position: relative;
24
      }
25
26
      .container .imgList {
27
        width: 100%;
28
        position: relative;
29
      }
30
31
      .container .imgList img {
32
        display: block;
33
        position: absolute;
34
        left: 210px;
35
        top: 0;
36
        transition: opacity 1s;
37
        z-index: 0;
38
        margin-left: 80px;
39
        width: 493px;
40
        height: 289px;
41
        transition: all 1s;
42
      }
43
44
      .slide {
45
        width: 41px;
46
        height: 69px;
47
        background-image: url("https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png");
48
        background-repeat: no-repeat;
49
        position: absolute;
50
        top: 50%;
51
        transform: translateY(-50%);
52
        z-index: 99;
53
        display: none;
54
        cursor: pointer;
55
      }
56
      /* 
57
    使用focus伪类模拟点击事件的效果
58
    1. html结构：必须有input 和 label 且input的id与label的for相匹配
59
    2. css样式：input:focus
60
     */
61
62
      #slide3:checked ~ .imgList img:nth-of-type(3),
63
      #slide2:checked ~ .imgList img:nth-of-type(2),
64
      #slide1:checked ~ .imgList img:nth-of-type(1) {
65
        width: 640px;
66
        height: 375px;
67
        z-index: 8;
68
        left: 200px;
69
      }
70
      #slide2:checked ~ .imgList img:nth-of-type(3){
71
        left: 0px;
72
      }
73
      #slide2:checked ~ .imgList img:nth-of-type(1){
74
        left: 530px;
75
      }
76
      #slide3:checked ~ .imgList img:nth-of-type(1){
77
        left: 0px;
78
      }
79
      #slide3:checked ~ .imgList img:nth-of-type(2){
80
        left: 530px;
81
      }
82
      #slide3:checked ~ label:nth-of-type(1),
83
      #slide2:checked ~ label:nth-of-type(3),
84
      #slide1:checked ~ label:nth-of-type(2) {
85
        display: block;
86
        right: 0;
87
        background-position: -125px;
88
      }
89
      /* 鼠标悬停改变雪碧图位置 */
90
      #slide3:checked ~ label:nth-of-type(1):hover,
91
      #slide2:checked ~ label:nth-of-type(3):hover,
92
      #slide1:checked ~ label:nth-of-type(2):hover {
93
        background-position: -41px;
94
      }
95
96
      #slide3:checked ~ label:nth-of-type(2),
97
      #slide2:checked ~ label:nth-of-type(1),
98
      #slide1:checked ~ label:nth-of-type(3) {
99
        display: block;
100
        left: 0;
101
        background-position: -84px;
102
      }
103
      /* 鼠标悬停改变雪碧图位置 */
104
105
      #slide3:checked ~ label:nth-of-type(2):hover,
106
      #slide2:checked ~ label:nth-of-type(1):hover,
107
      #slide1:checked ~ label:nth-of-type(3):hover {
108
        background-position: 0px;
109
      }
110
      input {
111
        display: none;
112
      }
113
      .imgList img:nth-of-type(1) {
114
        z-index: 6;
115
      }
116
      .imgList img:nth-of-type(2) {
117
        z-index: 6;
118
        left: 50px;
119
      }
120
      .imgList img:nth-of-type(3) {
121
        z-index: 6;
122
        left: 530px;
123
      }
124
    </style>
125
  <script type="text/javascript" nonce="87b7771a28d14d038ca2d7487a1" src="//local.adguard.org?ts=1585142143099&amp;type=content-script&amp;dmn=gethtml.cn&amp;css=1&amp;js=1&amp;gcss=1&amp;rel=1&amp;rji=1&amp;stealth=1&amp;uag=TW96aWxsYS81LjAgKFdpbmRvd3MgTlQgMTAuMDsgV2luNjQ7IHg2NCkgQXBwbGVXZWJLaXQvNTM3LjM2IChLSFRNTCwgbGlrZSBHZWNrbykgQ2hyb21lLzgyLjAuMzk4Ny4xNDkgU2FmYXJpLzUzNy4zNg=="></script>
126
<script type="text/javascript" nonce="87b7771a28d14d038ca2d7487a1" src="//local.adguard.org?ts=1585142143099&amp;name=AdGuard%20Popup%20Blocker&amp;name=AdGuard%20Assistant&amp;name=AdGuard%20Extra&amp;type=user-script"></script></head>
127
128
  <body>
129
    <!-- 视觉容器 -->
130
    <div class="container">
131
      <!-- 左右切换菜单 -->
132
      <input type="radio" name="slide" id="slide1" checked />
133
      <input type="radio" name="slide" id="slide2" />
134
      <input type="radio" name="slide" id="slide3" />
135
      <label for="slide1" class="slide slide1"></label>
136
      <label for="slide2" class="slide slide2"></label>
137
      <label for="slide3" class="slide slide3"></label>
138
      <!-- 图片列表 -->
139
      <div class="imgList">
140
        <img
141
          src="https://ae01.alicdn.com/kf/H0b1eb310ce894aa08f9b4807d1bf3ca4x.jpg"
142
        />
143
        <img
144
          src="https://ae01.alicdn.com/kf/Heaf789203f4147f0b5114a23c618c643K.jpg"
145
        />
146
        <img
147
          src="https://ae01.alicdn.com/kf/H50df113bb77145aca87f6762a035d358m.jpg"
148
        />
149
      </div>
150
      <!-- 轮播图的导航  已废-->
151
      <div class="nav"></div>
152
    </div>
153
  </body>
154
</html>
155