欢迎来到我的博客！#

这是我的第 2 篇文章，使用 Markdown 格式编写。

今天学到了什么#

图片轮播滚动效果

关键部分在于利用两个盒子拼接实现无缝衔接，并选择合适的图片

我将原来教学内容中的图片改成了自己想设置的图片，并适当调整了图片设置，完成了这个案例

1
<!DOCTYPE html>
2
<html lang="en">
3

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
      margin: 0;
11
      padding: 0;
12
      box-sizing: border-box;
13
    }
14

15
    body {
16
      background-color: #ecf4ff;
17
    }
18

19
    .box {
20
      overflow: hidden;
21
      width: 1180px;
22
      margin: 100px auto;
23
      /* border: 2px solid red; */
24
    }
25

26
    .box:hover .scroll {
27
      animation-play-state: paused;
28
    }
29

30
    .scroll img {
31
      width: 180px;
32
      height: 90px;
33
      border-radius: 6px;
34
    }
35

36
    .scroll {
37
      display: flex;
38
      animation: move 20s linear infinite;
39
    }
40

41
    .scroll .ad1 {
42
      display: grid;
43
      grid-template-columns: repeat(6, 180px);
44
      grid-template-rows: repeat(4, 90px);
45
      gap: 16px 20px;
46
      margin-right: 20px;
47
    }
48

49
    @keyframes move {
50
      0% {
51
        transform: translateX(0);
52
      }
53

54
      100% {
55
        transform: translateX(-1200px);
56
      }
57

58
    }
59
  </style>
60
</head>
61

62
<body>
63
  <div class="box">
64
    <!-- 滚动盒子 -->
65
    <div class="scroll">
66
      <!-- 第一组 -->
67
      <div class="ad1">
68
        <!--存放图片，此处省略-->
69
      </div>
70
      <!-- 第二组 -->
71
      <div class="ad1">
72
        <!--存放图片，此处省略-->
73
      </div>
74
    </div>
75
  </div>
76
</body>
77

78
</html>

很高兴与你分享这些知识！

Lovely firefly!

From Undreamt Night, I Thence Shine

12.2号学习内容

欢迎来到我的博客！#

今天学到了什么#

赞助支持

目录