css实现动态效果

个人头像悬停特效

效果图：

代码示例：

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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .img {
      width: 150px;
      height: 150px;
      margin: 100px auto;
      background: lightcoral;
      border-radius: 50%;
    }

    .img img {
      width: 100%;
      border-radius: 50%;
      transform: scale(1);
      transition: all 1s;

    }

    .img:hover img {
      transform: scale(0.7);
      box-shadow: 0 0 0 15px white;
    }
  </style>
</head>

<body>
  <div class="img">
    <img src="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg" alt="" />
  </div>
</body>

</html>

文字遮罩动态效果

样式一：

示例代码：

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .container{
            width: 500px;
            height: auto;
            margin: 100px auto;
            position: relative;
        }
        .container img{
            width: 100%;
            height: auto;
            display: block;
            transform: scale(1);
            transition: transform 1.5s;
        }
        .container:hover img{
            transform: scale(0);
        }
        .container .content{
            width: 100%;
            height: 100%;
            background: gray;
            padding: 20px;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            color: white;
            transform: scale(0) rotate(-180deg);
            transition: transform 0.5s;
            /* transition-delay: 0.5s; */
        }
        .container:hover .content{
            transform: scale(1) rotate(0);
        }
        .content .title{
            border-bottom: 1px solid black;
            padding-bottom: 10px;
        }
        .content .text{
            font-style: italic;
        }
        .content .btn{
            display: block;
            padding: 0 auto;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://ae01.alicdn.com/kf/Uc32240fb1b134adc8b256577bd78b9a3j.jpg" alt="">
        <div class="content">
            <h2 class="title">小康博客</h2>
            <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum harum quibusdam illo nisi amet? </p>
            <button  class="btn">Read More</button>
        </div>
    </div>
</body>
</html>

样式二：

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .container {
            width: 500px;
            height: auto;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        .container img {
            width: 100%;
            height: auto;
            display: block;
        }

        .container .content {
            width: 100%;
            height: 100%;
            background: gray;
            padding: 20px;
            position: absolute;
            left: 0px;
            top: 0;
            text-align: center;
            color: white;
            /* 遮罩的初始位置应该是原位置旋转90°之后  结束位置应该以右下角旋转*/
            transform-origin: 100% 100%;
            transform: rotate(90deg);
            /* 过渡1s，也就是鼠标离开时的过渡 */
            transition: transform 1s;
        }

        .container:hover .content {
            /* 偏移位置应该是以左上角 */
            transform-origin: top left;
            transform: rotate(0deg);
            transition: transform 1s;
        }

        .content .title {
            border-bottom: 1px solid black;
            padding-bottom: 10px;
        }

        .content .text {
            font-style: italic;
        }

        .content .btn {
            display: block;
            padding: 0 auto;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="https://ae01.alicdn.com/kf/Uc32240fb1b134adc8b256577bd78b9a3j.jpg" alt="" />
        <div class="content">
            <h2 class="title">小康博客</h2>
            <p class="text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum harum
                quibusdam illo nisi amet?
            </p>
            <button class="btn">Read More</button>
        </div>
    </div>
</body>

</html>

列表目录悬停特效

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表目录动态效果</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            background-color: #713DF2;
        }

        .container {
            width: 300px;
            height: 210px;
            margin: 100px auto;
            position: relative;
        }

        .container .menu {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        .container .menu li {
            width: 100%;
            height: 70px;
            padding-left: 30px;
            background-color: white;
            line-height: 70px;
            font-size: 18px;
            border-top: 1px solid lightgray;

        }

        .menu li:first-child {
            border: 0;
        }

        .checked {
            width: 110%;
            height: 70px;
            position: absolute;
            top: 0;
            left: -5%;
            background-color: #39A5F7;
            box-shadow: 0 0.3rem 0.2rem rgba(0, 0, 0, 0.3);
            transition: top 0.5s;
            z-index: 1;
            overflow: hidden;
        }

        .checked .menu {
            width: 300px;
            height: 70px;
            position: absolute;
            transition: top 0.8s;
            left: 15px;
        }

        .checked .menu li {
            background: transparent;
            border-top: none;
            color: white;

        }
        .hover{
            width: 100%;
            height: 70px;
            position: absolute;
            z-index: 2;
        }
        .hover1{
            top: 0;

        }
        .hover1:hover~.checked{
            top: 0;
        }
        .hover1:hover~.checked .menu{
            top: 0;
        }

        .hover2{
            top:70px;
        }
        .hover2:hover~.checked{
            top: 70px;
        }
        .hover2:hover~.checked .menu{
            top: -70px;
        }

        .hover3{
            top: 140px;
        }
        .hover3:hover~.checked{
            top: 140px;
        }
        .hover3:hover~.checked .menu{
            top: -140px;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul class="menu">
            <li>HTML5与CSS3基础语法</li>
            <li>CSS3核心技术与新特性</li>
            <li>JavaScript基础语法</li>
        </ul>
        <!-- 用来代表原本菜单中的三个选项（li元素） -->
        <div class="hover hover1"></div>
        <div class="hover hover2"></div>
        <div class="hover hover3"></div>
        <div class="checked">
            <ul class="menu">
                <li>HTML5与CSS3基础语法</li>
                <li>CSS3核心技术与新特性</li>
                <li>JavaScript基础语法</li>
            </ul>
        </div>
    </div>

</body>

</html>

卡片悬停效果

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 900px;
            margin: 0 auto;
        }

        .container ul {
            width: 900px;
            margin: 0 auto;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .container ul li {
            float: left;
            width: 200px;
            height: 355px;
            margin-left: 20px;
            position: relative;
            overflow: hidden;
        }

        .container ul li img {
            width: 200px;
            transition: all 1s;
        }

        .container ul .two img {
            width: 200px;
            transition: all 1s;
            transform: scale(1.2);
        }
        .container ul .three img {
            width: 200px;
            transition: all 1s;
            transform: scale(1.2);
        }

        .container ul li .mast {
            width: 200px;
            height: 300px;
            background-color: rgba(0, 0, 0, 0);
            text-align: center;
            position: absolute;
            top: 250px;
            padding-top: 50px;
            transform: scale(1);
            transition: all 1s;
            z-index: 100;
            color: white;
        }
        .container ul li .mast p{
            padding-bottom: 30px;
        }
        .container ul li .mast .title{
            font-weight: bold;
        }
        .container ul li .mast .desc{

            font-style: italic;
        }
        .container ul li .mast:hover {
            top: 0;
            background-color: rgba(0, 0, 0, .1);
        }
        .container ul li .mast:hover+img {
            transform: scale(1.2);
        }
        .container ul .two .mast:hover+img {
            margin-top: -10px;
        }
        .container ul .three .mast:hover+img {
            transform: scale(1);
        }
        /* 按钮 */
        .btn{
            display: block;
            width: 90px;
            height: 50px;
            margin: 0 auto;
            line-height: 50px;
            background-color: #2798eb;
            border: 0;
            border-radius: 10px;
            text-decoration: none;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>
                <div class="mast">
                    <p class="title">这是个标题</p>
                    <p class="desc">好多好多好多鱼</p>
                    <button>这是个按钮</button>
                </div>
                <img src="https://ae01.alicdn.com/kf/U24be6acf68c94e28821caf67f43723806.jpg" alt="">
            </li>
            <li class="two">
                <div class="mast">
                    <p class="title">这是个标题</p>
                    <p class="desc">好多好多好多鱼</p>
                    <button>这是个按钮</button>
                </div>
                <img src="https://ae01.alicdn.com/kf/U24be6acf68c94e28821caf67f43723806.jpg" alt="">
            </li>
            <li class="three">
                <div class="mast">
                    <p class="title">这是个标题</p>
                    <p class="desc">好多好多好多鱼</p>
                    <button>这是个按钮</button>
                </div>
                <img src="https://ae01.alicdn.com/kf/U24be6acf68c94e28821caf67f43723806.jpg" alt="">
            </li>
            <li>
                <div class="mast">
                    <p class="title">这是个标题</p>
                    <p class="desc">好多好多好多鱼</p>
                    <a class="btn" href="https://www.change.tm">这是个按钮</a>
                </div>
                <img src="https://ae01.alicdn.com/kf/U24be6acf68c94e28821caf67f43723806.jpg" alt="">
            </li>
        </ul>
    </div>
</body>

</html>

波浪效果

image-20200314191549797

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS波浪动画</title>

<style>
@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}
.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
    background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);
}
.bgTop {
    z-index: 15;
    opacity: 0.5;
}
.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}
.bgBottom {
    z-index: 5;
}
.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop {
    background-size: 50% 100px;
}
.waveAnimation .waveTop {
  animation: move-wave 3s;
   -webkit-animation: move-wave 3s;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
}
.waveMiddle {
    background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}
.waveBottom {
    background-size: 50% 100px;
}
.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
}</style>
</head>
<body>

<div class="waveWrapper waveAnimation">
  <div class="waveWrapperInner bgTop">
    <div class="wave waveTop" style="background-image: url('https://ae01.alicdn.com/kf/H6e46b308e8744a98b3f01685f5d1bbe4o.png')"></div>
  </div>
  <div class="waveWrapperInner bgMiddle">
    <div class="wave waveMiddle" style="background-image: url('https://ae01.alicdn.com/kf/H43dd1667ee2c49fa919897302c4e4b38O.png')"></div>
  </div>
  <div class="waveWrapperInner bgBottom">
    <div class="wave waveBottom" style="background-image: url('https://ae01.alicdn.com/kf/H8eabe173b9b64272912d9aa021934071W.png')"></div>
  </div>
</div>
</body>
</html>

实现波浪背景动态无限次循环播放（连续性）

  1. 图片：左边的图像与右边的图像是完全重合（高度一致）
  2. HTML页面：使用background-image属性引入波浪图片
    • 将背景图像显示成水平方向两个完全重复的效果
      • 将引入图片的div元素的宽度设置为父级容器的200%
      • 通过background-size属性设置为背景图像水平方向的值为50%
    • 设置动画执行的关键帧时，将100%时的关键帧设置为50%.

CSS3渐变背景

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
49
50
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景渐变动画效果</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            /* background-image:linear-gradient(-45deg,#12c2e9,#c471ed,#f64f59);
            animation: backgroundBG 10s infinite linear;
            background-size: 300%; */
        }
        @keyframes backgroundBG{
            0%{
                background-position: 0 50%;
            }
            50%{
                background-position: 100% 50%;
            }
            100%{
                background-position: 0% 50%;
            }
        }
        .container{
            width: 100%;
            height: 100%;
            position: relative;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /* background-image:linear-gradient(-45deg,#12c2e9,#c471ed,#f64f59); */
            /* background-image:linear-gradient(-45deg,#f64f59,#b21f1f,#1a2a6c); */
            background-image:linear-gradient(-45deg,#0099F7,#F11712);
            background-image:linear-gradient(-45deg,#FC354C,#0ABFBC);
            animation: backgroundBG 10s infinite linear;
            background-size: 300%;
        }
    </style>
</head>
<body>
    <div class="container">

    </div>
</body>
</html>

星级评价效果

image-20200314192122656

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>星星评级动态效果</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css'>

  <style>
    body {
      background: #222;
    }

    .rating {
      font-family: "Ionicons";
      /* 水平+垂直方向居中显示 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      direction: rtl;
    }

    .rating input {
      opacity: 0;
    }

    .rating input:checked~label::before {
      opacity: 1;
    }

    .rating label {
      position: relative;
      margin-right: 6px;
      font-size: 5em;
      color: gold;
      cursor: pointer;
    }

    .rating label::before {
      position: absolute;
      content: "\f384";
      opacity: 0;
      transition: 0.5s;
    }

    .rating label:hover~label::before {
      transition: 0.5s;
    }

    .rating label:hover::before {
      transform: scale(1.2);
    }

    .rating label:hover::before,
    .rating label:hover~label::before {
      opacity: 1 !important;
    }

    .rating:hover input:checked~label::before {
      opacity: 0;
    }
  </style>
</head>

<body>
  <div class="rating">
    <input type="radio" name="rating" id="5" value="5" />
    <label for="5"><i class="icon ion-md-star-outline"></i></label>
    <input type="radio" name="rating" id="4" value="4" />
    <label for="4"><i class="icon ion-md-star-outline"></i></label>
    <input type="radio" name="rating" id="3" value="3" />
    <label for="3"><i class="icon ion-md-star-outline"></i></label>
    <input type="radio" name="rating" id="2" value="2" />
    <label for="2"><i class="icon ion-md-star-outline"></i></label>
    <input type="radio" name="rating" id="1" value="1" />
    <label for="1"><i class="icon ion-md-star-outline"></i></label>
  </div>
</body>

</html>

代码二

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css'>
    <title>Document</title>
    <style>
        body{
            background: #222;
        }
        .container{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            direction: rtl;
        }
        .container input{
            opacity: 0;

        }
        .container label{
            color: gold;
            font-size: 84px;
            position: relative;
            cursor: pointer;
        }

        .container label:before{
            content: "\f384";
            position: absolute; 
            top: 15%;
            opacity: 0;
            transition: .5s;
        }
        .container label:hover:before,
        .container label:hover~label::before{
            opacity:  1 !important;
        }
        .container label i::before{
            transition: .5s;
        }
        .container label:hover i::before{
            transform: scale(1.2);
        }
        .container input:focus~label::before{
            opacity:  1 !important;
        }
    </style>
</head>

<body>
    <div class="container">
        <input type="radio" name="1" id="1" />
        <label class="ion-md-star" for="1" >
            <i class="icon ion-md-star-outline"></i>
        </label>
        <input type="radio" name="2" id="2" />
        <label for="2" class="ion-md-star">
            <i class="icon ion-md-star-outline"></i>
        </label>
        <input type="radio" name="3" id="3" />
        <label for="3" class="ion-md-star">
            <i class="icon ion-md-star-outline"></i>
        </label>
        <input type="radio" name="4" id="4" />
        <label for="4" class="ion-md-star">
            <i class="icon ion-md-star-outline"></i>
        </label>
        <input type="radio" name="5" id="5" />
        <label for="5" class="ion-md-star">
            <i class="icon ion-md-star-outline"></i>
        </label>
    </div>
</body>

</html>

音频显示效果

image-20200314192302746

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>css3音频播放图标动画特效</title>
<style>
    .playing {
  background: rgba(255, 255, 255, 0.1);
  width: 3rem;
  height: 3rem;
  border-radius: .3rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: .5rem;
  box-sizing: border-box;
}

.playing__bar {
  display: inline-block;
  background: white;
  width: .5rem;
  height: 100%;
  -webkit-animation: up-and-down 1.3s ease infinite alternate;
          animation: up-and-down 1.3s ease infinite alternate;
}

.playing__bar1 {
  height: 60%;
}

.playing__bar2 {
  height: 30%;
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
}

.playing__bar3 {
  height: 75%;
  -webkit-animation-delay: -3.7s;
          animation-delay: -3.7s;
}

@-webkit-keyframes up-and-down {
  10% {
    height: 30%;
  }
  30% {
    height: 100%;
  }
  60% {
    height: 50%;
  }
  80% {
    height: 75%;
  }
  100% {
    height: 20%;
  }
}

@keyframes up-and-down {
  10% {
    height: 30%;
  }
  30% {
    height: 100%;
  }
  60% {
    height: 50%;
  }
  80% {
    height: 75%;
  }
  100% {
    height: 20%;
  }
}
body {
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: sans-serif;
  color: white;
}
</style>

</head>
<body>

<div class="playing">
  <span class="playing__bar playing__bar1"></span>
  <span class="playing__bar playing__bar2"></span>
  <span class="playing__bar playing__bar3"></span>
</div>

</body>
</html>

小米首页轮播图（自动轮播）

实现关键

设置动画关键帧包含：

  1. 淡入效果 0%~2%
  2. 停留效果 2%~20%
  3. 淡出效果 20%~22%
  4. 淡入时的层级要高于淡出时的层级

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米轮播图示例</title>
    <style>
      /* 
            设置动画关键帧包含：
            1. 淡入效果 0%~2%
            2. 停留效果 2%~20%
            3. 淡出效果 20%~22%
            淡入时的层级要高于淡出时的层级
         */
      @keyframes fade {
        0% {
          opacity: 0;
          z-index: 2;
        }

        2% {
          opacity: 1;
          z-index: 1;
        }

        20% {
          opacity: 1;
          z-index: 1;
        }

        22% {
          opacity: 0;
          z-index: 0;
        }

        100% {
          opacity: 0;
          z-index: 0;
        }
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
      }

      .container {
        width: 1226px;
        height: 460px;
        background: lightcyan;
        margin: 100px auto;
      }

      .container .imgList {
        width: 100%;
        position: relative;
      }

      .container .imgList img {
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        /* 执行时长最好是图片数量的倍数
                每一张图片所占时长为10s
                    每一张图片的停留时间 - 9s
                    每一张图片的淡入时间 - 1s
             */
        animation-duration: 50s;
        animation-name: fade;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }

      .container .imgList img:not(:first-child) {
        opacity: 0;
      }

      .container .imgList img:nth-child(1) {
        animation-delay: -1s;
      }

      .container .imgList img:nth-child(2) {
        animation-delay: 9s;
      }

      .container .imgList img:nth-child(3) {
        animation-delay: 19s;
      }

      .container .imgList img:nth-child(4) {
        animation-delay: 29s;
      }

      .container .imgList img:nth-child(5) {
        animation-delay: 39s;
      }
    </style>
  </head>

  <body>
    <!-- 视觉容器 -->
    <div class="container">
      <!-- 图片列表 -->
      <div class="imgList">
        <img
          src="https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg"
        />
      </div>
      <!-- 左右切换菜单 -->
      <div class="menu"></div>
      <!-- 轮播图的导航 -->
      <div class="nav"></div>
    </div>
  </body>
</html>

小米轮播图（左右按钮）

实现思路

  1. 需要五组input+label标签（且input标签的type为radio）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /* 第一个需带有checked，因为默认情况下选择的是第一个，也就是默认情况下第一个被选中 */
    <input type="radio" name="slide" id="slide1" checked />
    <input type="radio" name="slide" id="slide2" />
    <input type="radio" name="slide" id="slide3" />
    <input type="radio" name="slide" id="slide4" />
    <input type="radio" name="slide" id="slide5" />
    <label for="slide1" class="slide slide1"></label>
    <label for="slide2" class="slide slide2"></label>
    <label for="slide3" class="slide slide3"></label>
    <label for="slide4" class="slide slide4"></label>
    <label for="slide5" class="slide slide5"></label>

    label标签的for属性与input标签的id属性相对应。也就是说当点击第一个label标签时，第一个input被选中,点击第二个label标签时，第二个input被选中……

  2. 在CSS上，默认图片透明度均为0，层级（z-index）默认也为0。

  3. 利用伪类选择器（:checked）来判断哪张图片应该被显示

    简单来说就是当第一个input加入checked属性时(被选中时)，那么他的层级(z-index)与透明度则变为1。其他也是同理，因为默认的层级与透明度都是0，所以当选择另外input时刚才那个就会回到默认状态

  4. 左右按钮的实现

    首先应该明确的是第几张图片出现时左右按钮应该指向哪一张图片。例如当显示第一张图片时左按钮应去向第五章，右按钮应去向第二张。

    其次就是这些按钮应该随着不同图片的出现而变换，类似于一个按钮绑定一个图片。

    图片左按钮右按钮
    第一张图片第五张第二张
    第二章图片第一张第三张
    第三章图片第二张第四张
    第四章图片第三张第五张
    第五章图片第四张第一张

  5. 最后只需要用input是否被checked就可以判断哪一个label标签应该显示。

在线显示地址：https://antmoe.gitee.io/project/2020/03/17/index.html

由于演示图有点大，所以直接换成链接了。https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile1/imgbed/2020/03/17/20200317195705.gif

示例代码

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米轮播图示例</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
      }

      .container {
        width: 1226px;
        height: 460px;
        background: lightcyan;
        margin: 100px auto;
        position: relative;
      }

      .container .imgList {
        width: 100%;
        position: relative;
      }

      .container .imgList img {
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        transition: opacity 1s;
        z-index: 0;
        opacity: 0;
      }

      .slide {
        width: 41px;
        height: 69px;
        background-image: url("https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png");
        background-repeat: no-repeat;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;
        display: none;
        cursor: pointer;
      }
      /* 
    使用focus伪类模拟点击事件的效果
    1. html结构：必须有input 和 label 且input的id与label的for相匹配
    2. css样式：input:focus
     */

      #slide5:checked ~ .imgList img:nth-of-type(5),
      #slide4:checked ~ .imgList img:nth-of-type(4),
      #slide3:checked ~ .imgList img:nth-of-type(3),
      #slide2:checked ~ .imgList img:nth-of-type(2),
      #slide1:checked ~ .imgList img:nth-of-type(1) {
        z-index: 1;
        opacity: 1;
      }

      /* 
    第五张图片时 
      左按钮应该去4 右按钮去1 
    第四张图片时
      左按钮应该去3 右按钮去5
    第三张图片时
      左按钮应该去2 右按钮去4
    第二张图片时
      左按钮应该去1 右按钮去3
    第一张图片时
      左按钮应该去5 右按钮去2
    */
      #slide5:checked ~ label:nth-of-type(1),
      #slide4:checked ~ label:nth-of-type(5),
      #slide3:checked ~ label:nth-of-type(4),
      #slide2:checked ~ label:nth-of-type(3),
      #slide1:checked ~ label:nth-of-type(2) {
        display: block;
        right: 0;
        background-position: -125px;
      }
      /* 鼠标悬停改变雪碧图位置 */
      #slide5:checked ~ label:nth-of-type(1):hover,
      #slide4:checked ~ label:nth-of-type(5):hover,
      #slide3:checked ~ label:nth-of-type(4):hover,
      #slide2:checked ~ label:nth-of-type(3):hover,
      #slide1:checked ~ label:nth-of-type(2):hover {
        background-position: -41px;
      }
      #slide5:checked ~ label:nth-of-type(4),
      #slide4:checked ~ label:nth-of-type(3),
      #slide3:checked ~ label:nth-of-type(2),
      #slide2:checked ~ label:nth-of-type(1),
      #slide1:checked ~ label:nth-of-type(5) {
        display: block;
        left: 0;
        background-position: -84px;
      }
      /* 鼠标悬停改变雪碧图位置 */
      #slide5:checked ~ label:nth-of-type(4):hover,
      #slide4:checked ~ label:nth-of-type(3):hover,
      #slide3:checked ~ label:nth-of-type(2):hover,
      #slide2:checked ~ label:nth-of-type(1):hover,
      #slide1:checked ~ label:nth-of-type(5):hover {
        background-position: 0px;
      }
      input {
        display: none;
      }
    </style>
  </head>

  <body>
    <!-- 视觉容器 -->
    <div class="container">
      <!-- 左右切换菜单 -->
      <input type="radio" name="slide" id="slide1" checked />
      <input type="radio" name="slide" id="slide2" />
      <input type="radio" name="slide" id="slide3" />
      <input type="radio" name="slide" id="slide4" />
      <input type="radio" name="slide" id="slide5" />
      <label for="slide1" class="slide slide1"></label>
      <label for="slide2" class="slide slide2"></label>
      <label for="slide3" class="slide slide3"></label>
      <label for="slide4" class="slide slide4"></label>
      <label for="slide5" class="slide slide5"></label>
      <!-- 图片列表 -->
      <div class="imgList">
        <img
          src="https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg"
        />
      </div>
      <!-- 轮播图的导航 -->
      <div class="nav"></div>
    </div>
  </body>
</html>

轮播图的导航栏

导航栏基于上一个可以左右滑动的轮播图实现。实现方法很简单。

  1. 由于已经实现了可以切换图片的label标签，因此复制一个一模一样的即可。

    1
    2
    3
    4
    5
    6
    7
    <div class="nav">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>
        <label for="slide5"></label>
    </div>

  2. 接下来需要做的就是继续将每一张图片与刚加入的label标签绑定

    1
    2
    3
    4
    5
    6
    7
    8
    #slide1:checked~.nav label:nth-child(1),
    #slide2:checked~.nav label:nth-child(2),
    #slide3:checked~.nav label:nth-child(3),
    #slide4:checked~.nav label:nth-child(4),
    #slide5:checked~.nav label:nth-child(5) {
    border-color: rgba(0, 0, 0, .4);
    background: hsla(0, 0%, 100%, 1);
    }

  3. 这样基本上就可以了，至于显示位置及样式根据自己调整即可。

参考代码

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米轮播图示例</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
      }

      .container {
        width: 1226px;
        height: 460px;
        background: lightcyan;
        margin: 100px auto;
        position: relative;
      }

      .container .imgList {
        width: 100%;
        position: relative;
      }

      .container .imgList img {
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        transition: opacity 1s;
        z-index: 0;
        opacity: 0;
      }

      .slide {
        width: 41px;
        height: 69px;
        background-image: url("https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png");
        background-repeat: no-repeat;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;
        display: none;
        cursor: pointer;
      }
      /* 
    使用focus伪类模拟点击事件的效果
    1. html结构：必须有input 和 label 且input的id与label的for相匹配
    2. css样式：input:focus
     */

      #slide5:checked ~ .imgList img:nth-of-type(5),
      #slide4:checked ~ .imgList img:nth-of-type(4),
      #slide3:checked ~ .imgList img:nth-of-type(3),
      #slide2:checked ~ .imgList img:nth-of-type(2),
      #slide1:checked ~ .imgList img:nth-of-type(1) {
        z-index: 1;
        opacity: 1;
      }

      /* 
    第五张图片时 
      左按钮应该去4 右按钮去1 
    第四张图片时
      左按钮应该去3 右按钮去5
    第三张图片时
      左按钮应该去2 右按钮去4
    第二张图片时
      左按钮应该去1 右按钮去3
    第一张图片时
      左按钮应该去5 右按钮去2
    */
      #slide5:checked ~ label:nth-of-type(1),
      #slide4:checked ~ label:nth-of-type(5),
      #slide3:checked ~ label:nth-of-type(4),
      #slide2:checked ~ label:nth-of-type(3),
      #slide1:checked ~ label:nth-of-type(2) {
        display: block;
        right: 0;
        background-position: -125px;
      }
      /* 鼠标悬停改变雪碧图位置 */
      #slide5:checked ~ label:nth-of-type(1):hover,
      #slide4:checked ~ label:nth-of-type(5):hover,
      #slide3:checked ~ label:nth-of-type(4):hover,
      #slide2:checked ~ label:nth-of-type(3):hover,
      #slide1:checked ~ label:nth-of-type(2):hover {
        background-position: -41px;
      }
      #slide5:checked ~ label:nth-of-type(4),
      #slide4:checked ~ label:nth-of-type(3),
      #slide3:checked ~ label:nth-of-type(2),
      #slide2:checked ~ label:nth-of-type(1),
      #slide1:checked ~ label:nth-of-type(5) {
        display: block;
        left: 0;
        background-position: -84px;
      }
      /* 鼠标悬停改变雪碧图位置 */
      #slide5:checked ~ label:nth-of-type(4):hover,
      #slide4:checked ~ label:nth-of-type(3):hover,
      #slide3:checked ~ label:nth-of-type(2):hover,
      #slide2:checked ~ label:nth-of-type(1):hover,
      #slide1:checked ~ label:nth-of-type(5):hover {
        background-position: 0px;
      }
      input {
        display: none;
      }
      /* 导航 */
      .nav {
        width: 400px;
        height: 8px;
        position: absolute;
        left: auto;
        right: 30px;
        bottom: 20px;
        text-align: right;
        z-index: 99;
      }

      .nav label {
        /* z-index: 99; */
        width: 14px;
        height: 14px;
        border: 2px solid #fff;
        border-color: hsla(0, 0%, 100%, 0.3);
        border-radius: 50%;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.4);
        opacity: 1;
        margin-left: 3px;
        display: inline-block;
        cursor: pointer;
      }

      .nav label:hover {
        border-color: rgba(0, 0, 0, 0.4);
        background: hsla(0, 0%, 100%, 1);
      }

      /* 底部导航 */
      #slide1:checked ~ .nav label:nth-child(1),
      #slide2:checked ~ .nav label:nth-child(2),
      #slide3:checked ~ .nav label:nth-child(3),
      #slide4:checked ~ .nav label:nth-child(4),
      #slide5:checked ~ .nav label:nth-child(5) {
        border-color: rgba(0, 0, 0, 0.4);
        background: hsla(0, 0%, 100%, 1);
      }
    </style>
  </head>

  <body>
    <!-- 视觉容器 -->
    <div class="container">
      <!-- 左右切换菜单 -->
      <input type="radio" name="slide" id="slide1" checked />
      <input type="radio" name="slide" id="slide2" />
      <input type="radio" name="slide" id="slide3" />
      <input type="radio" name="slide" id="slide4" />
      <input type="radio" name="slide" id="slide5" />
      <label for="slide1" class="slide slide1"></label>
      <label for="slide2" class="slide slide2"></label>
      <label for="slide3" class="slide slide3"></label>
      <label for="slide4" class="slide slide4"></label>
      <label for="slide5" class="slide slide5"></label>
      <!-- 图片列表 -->
      <div class="imgList">
        <img
          src="https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg"
        />
      </div>
      <!-- 轮播图的导航 -->
      <div class="nav">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>
        <label for="slide5"></label>
      </div>
    </div>
  </body>
</html>

百叶窗效果

在实现了上述轮播图后实现百叶窗效果是需要改造的。

  1. 首先是HTML结构，图片列表使用的是img标签，百叶窗实际上是将图片分割成不同的小块然后逐个切换。所以需要将HTML结构改造为一个div（作为每个小块的容器）嵌套若干个（这里用四个举例）div（作为图片展示）

    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
    <div class="imgList">
        <div class="img">
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
        </div>
        <div class="img">
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
        </div>
        <div class="img">
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
        </div>
        <div class="img">
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
        </div>
        <div class="img">
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
            <div class="frag"></div>
        </div>
    </div>

    上述结构中，img作为每张图片的容器，frag是实际上展示图片的容器。也就是每个frag显示图片的四分之一（随窗口数而定）

  2. 对于img与frag两个class的样式需要调整为

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .container .imgList .img {
        height: 100%;
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0;
    }
    .container .imgList .img .frag {
        float: left;
        height: 460px;
        width: 25%;
        background-size: 1226px 460px;
        opacity: 0;
        z-index: 0;
    }

    frag的宽度为容器的25%也就是四分之一，高度也是容器的高度。由于这个效果是基于每个小块的不同切换效果实现的，那么自然需要将背景图像的大小调整好也就是background-size属性。

  3. 设置每块容器(img)里每个小块(frag)显示的图片

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .container .imgList .img:nth-child(1) .frag {
        background-image: url(https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png);
    }

    .container .imgList .img:nth-child(2) .frag {
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg);
    }

    .container .imgList .img:nth-child(3) .frag {
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg);
    }

    .container .imgList .img:nth-child(4) .frag {
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg);
    }

    .container .imgList .img:nth-child(5) .frag {
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg);
    }

  4. 调整四小块中每一块显示的区域。

    这一步很简单，如果不修改每一块的位置，那么四张图显示的都是一样的。而我们需要的是四小块拼成一个完整的。并且每一个都是有一个延迟的，所以同样需要为每一个小块设置延迟时间(transition-delay)。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .container .imgList .img .frag:nth-child(2) {
        background-position: -306.5px 0;
        transition-delay: .2s;
    }

    .container .imgList .img .frag:nth-child(3) {
        background-position: -613px 0;
        transition-delay: .3s;
    }

    .container .imgList .img .frag:nth-child(4) {
        background-position: -919.5px 0;
        transition-delay: .4s;
    }

    .container .imgList .img .frag:nth-child(5) {
        background-position: -1226px 0;
        transition-delay: .5s;
    }

  5. 调整当按钮(label标签)点下去时改变的元素。

    1
    2
    3
    4
    5
    6
    7
    8
    #slide1:checked~.imgList .img:nth-child(1) .frag,
    #slide2:checked~.imgList .img:nth-child(2) .frag,
    #slide3:checked~.imgList .img:nth-child(3) .frag,
    #slide4:checked~.imgList .img:nth-child(4) .frag,
    #slide5:checked~.imgList .img:nth-child(5) .frag {
        opacity: 1;
        z-index: 1;
    }

  6. 此时页面已经可以有基本效果了。接下来需要做的只是美化。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    #slide1:checked~.imgList .img:nth-child(1) .frag,
    #slide2:checked~.imgList .img:nth-child(2) .frag,
    #slide3:checked~.imgList .img:nth-child(3) .frag,
    #slide4:checked~.imgList .img:nth-child(4) .frag,
    #slide5:checked~.imgList .img:nth-child(5) .frag {
        opacity: 1;
        z-index: 1;
        transform: rotateY(90deg) translateZ(180deg) scale(1.5);
        filter: saturate(1) blur(0px) brightness(1) contrast(1);
    }
    .container .imgList .img .frag {
        float: left;
        height: 460px;
        width: 25%;
        background-size: 1226px 460px;
        opacity: 0;
        z-index: 0;
        transform-origin: center right;
        filter: saturate(0) blur(10px) brightness(.6) contrast(4);
        transition: transform .6s, opacity .6s, filter .6s ease-out;

    }

示例代码

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米轮播图示例--百叶窗效果</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 1226px;
            height: 460px;
            background: lightcyan;
            margin: 100px auto;
            position: relative;
        }

        .container .imgList {
            width: 100%;
            position: relative;
        }

        .container .imgList .img {
            height: 100%;
            width: 100%;
            height: auto;
            position: absolute;
            left: 0;
            top: 0;
        }

        .container .imgList .img .frag {
            float: left;
            height: 460px;
            width: 25%;
            background-size: 1226px 460px;
            opacity: 0;
            z-index: 0;
            transform-origin: center right;
            filter: saturate(0) blur(10px) brightness(.6) contrast(4);
            transition: transform .6s, opacity .6s, filter .6s ease-out;
        }

        .container .imgList .img:nth-child(1) .frag {
            background-image: url(https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png);
        }

        .container .imgList .img:nth-child(2) .frag {
            background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg);
        }

        .container .imgList .img:nth-child(3) .frag {
            background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg);
        }

        .container .imgList .img:nth-child(4) .frag {
            background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg);
        }

        .container .imgList .img:nth-child(5) .frag {
            background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg);
        }

        .container .imgList .img .frag:nth-child(2) {
            background-position: -306.5px 0;
            transition-delay: .2s;
        }

        .container .imgList .img .frag:nth-child(3) {
            background-position: -613px 0;
            transition-delay: .3s;
        }

        .container .imgList .img .frag:nth-child(4) {
            background-position: -919.5px 0;
            transition-delay: .4s;
        }

        .container .imgList .img .frag:nth-child(5) {
            background-position: -1226px 0;
            transition-delay: .5s;
        }

        #slide1:checked~.imgList .img:nth-child(1) .frag,
        #slide2:checked~.imgList .img:nth-child(2) .frag,
        #slide3:checked~.imgList .img:nth-child(3) .frag,
        #slide4:checked~.imgList .img:nth-child(4) .frag,
        #slide5:checked~.imgList .img:nth-child(5) .frag {
            opacity: 1;
            z-index: 1;
            transform: rotateY(90deg) translateZ(180deg) scale(1.5);
            filter: saturate(1) blur(0px) brightness(1) contrast(1);
        }

        .slide {
            width: 41px;
            height: 69px;
            background-image: url("https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png");
            background-repeat: no-repeat;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 99;
            display: none;
            cursor: pointer;
        }

        #slide5:checked~.imgList img:nth-of-type(5),
        #slide4:checked~.imgList img:nth-of-type(4),
        #slide3:checked~.imgList img:nth-of-type(3),
        #slide2:checked~.imgList img:nth-of-type(2),
        #slide1:checked~.imgList img:nth-of-type(1) {
            z-index: 1;
            opacity: 1;
        }

        #slide5:checked~label:nth-of-type(1),
        #slide4:checked~label:nth-of-type(5),
        #slide3:checked~label:nth-of-type(4),
        #slide2:checked~label:nth-of-type(3),
        #slide1:checked~label:nth-of-type(2) {
            display: block;
            right: 0;
            background-position: -125px;
        }

        /* 鼠标悬停改变雪碧图位置 */
        #slide5:checked~label:nth-of-type(1):hover,
        #slide4:checked~label:nth-of-type(5):hover,
        #slide3:checked~label:nth-of-type(4):hover,
        #slide2:checked~label:nth-of-type(3):hover,
        #slide1:checked~label:nth-of-type(2):hover {
            background-position: -41px;
        }

        #slide5:checked~label:nth-of-type(4),
        #slide4:checked~label:nth-of-type(3),
        #slide3:checked~label:nth-of-type(2),
        #slide2:checked~label:nth-of-type(1),
        #slide1:checked~label:nth-of-type(5) {
            display: block;
            left: 0;
            background-position: -84px;
        }

        /* 鼠标悬停改变雪碧图位置 */
        #slide5:checked~label:nth-of-type(4):hover,
        #slide4:checked~label:nth-of-type(3):hover,
        #slide3:checked~label:nth-of-type(2):hover,
        #slide2:checked~label:nth-of-type(1):hover,
        #slide1:checked~label:nth-of-type(5):hover {
            background-position: 0px;
        }

        input {
            display: none;
        }

        /* 导航 */
        .nav {
            width: 400px;
            height: 8px;
            position: absolute;
            left: auto;
            right: 30px;
            bottom: 20px;
            text-align: right;
            z-index: 99;
        }

        .nav label {
            /* z-index: 99; */
            width: 14px;
            height: 14px;
            border: 2px solid #fff;
            border-color: hsla(0, 0%, 100%, 0.3);
            border-radius: 50%;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.4);
            opacity: 1;
            margin-left: 3px;
            display: inline-block;
            cursor: pointer;
        }

        .nav label:hover {
            border-color: rgba(0, 0, 0, 0.4);
            background: hsla(0, 0%, 100%, 1);
        }

        /* 底部导航 */
        #slide1:checked~.nav label:nth-child(1),
        #slide2:checked~.nav label:nth-child(2),
        #slide3:checked~.nav label:nth-child(3),
        #slide4:checked~.nav label:nth-child(4),
        #slide5:checked~.nav label:nth-child(5) {
            border-color: rgba(0, 0, 0, 0.4);
            background: hsla(0, 0%, 100%, 1);
        }
    </style>
</head>

<body>
    <!-- 视觉容器 -->
    <div class="container">
        <!-- 左右切换菜单 -->
        <input type="radio" name="slide" id="slide1" checked />
        <input type="radio" name="slide" id="slide2" />
        <input type="radio" name="slide" id="slide3" />
        <input type="radio" name="slide" id="slide4" />
        <input type="radio" name="slide" id="slide5" />
        <label for="slide1" class="slide slide1"></label>
        <label for="slide2" class="slide slide2"></label>
        <label for="slide3" class="slide slide3"></label>
        <label for="slide4" class="slide slide4"></label>
        <label for="slide5" class="slide slide5"></label>
        <!-- 图片列表 -->
        <div class="imgList">
            <div class="img">
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
            </div>
            <div class="img">
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
            </div>
            <div class="img">
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
            </div>
            <div class="img">
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
            </div>
            <div class="img">
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
                <div class="frag"></div>
            </div>
        </div>
        <!-- 轮播图的导航 -->
        <div class="nav">
            <label for="slide1"></label>
            <label for="slide2"></label>
            <label for="slide3"></label>
            <label for="slide4"></label>
            <label for="slide5"></label>
        </div>
    </div>
</body>

</html>

下载按钮动态效果

  1. 分析

    这个效果大概分成几个部分

    • 静态按钮
    • 点击后按钮宽度变小，然后成圆形
    • 按钮变大变小
    • 小白球转圈
    • 回到圆中心位置，显示“√”

  2. 基于分析，静态效果很容易实现。

  3. 对于紫色的小球变大变小也很简单。scale即可

    如果使用了translate属性，需要将translate属性写在scale之前。

    1
    2
    3
    @keyframes circle{
        0%,15%,45%,75%{
            transform:translate(-50%,-50%) scale(0.8) ;
    }
30%,60%,90%{
    transform:translate(-50%,-50%) scale(1.2) ;

}
100%{
    transform: translate(-50%,-50%) scale(1) ;

}

    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
4. 小白球旋转

   ```css
   @keyframes dot{
       8%{
           transform: scale(0);
       }
       16%{
           transform: scale(1) rotate(30deg) translateX(48px);

       }
       95%{
           transform: scale(1) rotate(1000deg) translateX(48px);
       }
       100%{
           transform: scale(0.125) rotate(1050deg) translate(52px );
       }
   }
  1. 点击效果可以使用伪类focus模拟

完整代码

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @keyframes circle {
        0%,
        15%,
        45%,
        75% {
          transform: translate(-50%, -50%) scale(0.8);
        }

        30%,
        60%,
        90% {
          transform: translate(-50%, -50%) scale(1.2);
        }

        100% {
          transform: translate(-50%, -50%) scale(1);
        }
      }

      @keyframes dot {
        8% {
          transform: scale(0);
        }

        16% {
          transform: scale(1) rotate(30deg) translateX(48px);
        }

        95% {
          transform: scale(1) rotate(1000deg) translateX(48px);
        }

        100% {
          transform: scale(0.125) rotate(1050deg) translate(52px);
        }
      }

      body {
        background-color: #000;
      }

      .button {
        display: block;
        width: 160px;
        height: 41px;
        background: transparent;
        border-radius: 10px;
        color: white;
        border: none;
        outline: none;
        cursor: pointer;
        margin: 100px auto;
        position: relative;
      }

      .button::after,
      .button::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transform-origin: 50% 50%;
      }

      .button::before {
        width: 100%;
        height: 100%;
        background-color: #6d58ff;
        border-radius: 10px;
        transition: all 0.5s;
      }

      .button:focus::before {
        width: 41px;
        height: 41px;
        border-radius: 50%;
        animation: circle 3s linear forwards;
      }

      .button:focus span {
        display: none;
      }

      .button::after {
        content: "";
        width: 16px;
        height: 16px;
        background: #fff;
        z-index: 2;
        border-radius: 50%;
        transform: scale(0);
        /* 设置外部白色圆圈的圆心位置 */
        transform-origin: 0 0;
      }

      .button:focus::after {
        animation: dot 3s linear forwards;
      }

      .button span {
        position: relative;
        z-index: 1;
      }

      .button svg {
        width: 15px;
        height: 13px;
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        stroke: #fff;
        stroke-width: 2px;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        transform: translate(-50%, -50%);
        stroke-dasharray: 17px;
        stroke-dashoffset: 17px;
        transition: stroke-dashoffset 0.3s ease;
        transition-delay: 3s;
      }

      .button:focus svg {
        stroke-dashoffset: 34px;
      }
    </style>
  </head>

  <body>
    <button class="button">
      <span>下载</span>
      <svg view-Box="0 0 15 13">
        <polyline points="2 6.5 6 10.5 13 2.5"></polyline>
      </svg>
    </button>
  </body>
</html>