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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            background: #34495e;
            display: grid;
        }

        main {
            width: 400px;
            height: 200px;
            display: grid;
            justify-self: center;
            align-self: center;
            overflow: hidden;
            position: relative;
        }

        section {
            width: 1600px;
            height: 200px;
            display: grid;
            grid-template: 1fr/repeat(4, 1fr);
            animation-name: move;
            animation-duration: 4s;
            animation-timing-function: steps(4, end);
            animation-iteration-count: infinite;
        }

        @keyframes move {
            to {
                transform: translateX(-1600px);  //总体向左移动
            }
        }

        div {
            overflow: hidden;  
        }

        img {
            width: 100%;  //调整图片大小
        }

        section:hover,
        section:hover+ul::after {
            animation-play-state: paused;  //鼠标移上悬停
        }

        ul {
            width: 200px;
            list-style: none;
            display: grid;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            justify-items: center;

            grid-template: 1fr/repeat(4, 1fr);
        }

        li {
            height: 30px;
            width: 30px;
            border-radius: 50%;
            color: white;
            background-color: rgba(0, 0, 0, .3);
            display: grid;
            justify-items: center;
            align-items: center;
        }

        ul::after {
            content: '';
            position: absolute;
            left: 10px;
            top: 0;
            height: 30px;
            width: 30px;
            z-index: -1;
            border-radius: 50%;
            background-color: #e74c3c;
            animation-name: num;
            animation-duration: 4s;
            animation-timing-function: steps(4, end);
            animation-iteration-count: infinite;

        }

        /* 数字移动动画 */
        @keyframes num {
            to {
                transform: translateX(200px);
            }
        }
    </style>
</head>

<body>
    <main>
        <section>
            <div><img src="./img/1.jpg" alt=""></div>
            <div><img src="./img/2.jpg" alt=""></div>
            <div><img src="./img/3.jpg" alt=""></div>
            <div><img src="./img/4.jpg" alt=""></div>
        </section>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </main>
</body>

</html>
CSS
#动画
CSS轮播图
https://blog-theta-ten.vercel.app/2021/07/27/CSS轮播图/
作者
Chen
发布于
2021年7月27日
许可协议