javascript - 创建可滚动的 css 链

Question

我在纯 css 中创建了以下链:

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  min-height: 100vh;
  display: grid;
}

body {
  min-height: 100vh;
  display: grid;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #382f45;
}

.container {
  margin: auto;
  width: 15rem;
  height: 17.5rem;
}

.chain {
  position: absolute;
}

.link {
  position: absolute;
  width: 2rem;
  height: 3rem;
  border-radius: 1rem;
  background: #ff8e50;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f8be5b), color-stop(35%, #fef1c9), color-stop(65%, #e69539), to(#f7f2a0));
  background-image: -webkit-linear-gradient(top, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
  background-image: -o-linear-gradient(top, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
  background-image: linear-gradient(to bottom, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
}
.link:nth-child(2n+1):before {
  position: absolute;
  content: '';
  top: 0.5rem;
  left: 0.5rem;
  width: 1rem;
  height: 2rem;
  border-radius: inherit;
  background: #382f45;
}

.links.left .link {
  -webkit-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  transform: rotate(-90deg);
}
.links.left .link:nth-child(2n), .links.right .link:nth-child(2n) {
  z-index: 1;
  width: 0.5rem;
  height: 2rem;
  background: #ff8e50;
  background-image: -webkit-gradient(linear, left top, right top, from(#f8be5b), color-stop(35%, #fef1c9), color-stop(65%, #e69539), to(#f7f2a0));
  background-image: -webkit-linear-gradient(left, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
  background-image: -o-linear-gradient(left, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
  background-image: linear-gradient(to right, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
}
.links.left .link:nth-child(1) {
  left: 0rem;
}
.links.left .link:nth-child(2) {
  top: 0.5rem;
  left: 2.5rem;
}
.links.left .link:nth-child(3) {
  left: 3.5rem;
}
.links.left .link:nth-child(4) {
  top: 0.5rem;
  left: 6rem;
}
.links.left .link:nth-child(5) {
  left: 7rem;
}
.links.left .link:nth-child(6) {
  top: 0.5rem;
  left: 9.5rem;
}
.links.left .link:nth-child(7) {
  left: 10.5rem;
}
.links.left .link:nth-child(8) {
  top: 0.5rem;
  left: 13rem;
}
.links.left .link:nth-child(9) {
  left: 14rem;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <div class="swag">
    <div class="chain">
      <div class="links left">
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
         <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
      </div>
    </div>
  </div>
</div>

如您所见，我目前正在手动添加链节，例如:

.links.left .link:nth-child(9) {
  left: 14rem;
}

我的目标是创建一个无限滚动的链条，但是我目前坚持手动添加所有链条链接。

关于如何更轻松地添加这些链链接以创建可滚动的链，有什么建议吗？

感谢您的回复!

Answer 1

只需使用 display:inline-block; 而不是绝对定位它们。这样他们就会自动排队。您可以调整链接上的填充以获得所需的间距。

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  min-height: 100vh;
  display: grid;
}

body {
  min-height: 100vh;
  display: grid;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #382f45;
}

.container {
  margin: auto;
  width: 15rem;
  height: 17.5rem;
}

.chain {
  position: absolute;
}

.link {
  display:inline-block;
  width: 2rem;
  height: 3rem;
  border-radius: 1rem;
  background: #ff8e50;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f8be5b), color-stop(35%, #fef1c9), color-stop(65%, #e69539), to(#f7f2a0));
  background-image: -webkit-linear-gradient(top, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
  background-image: -o-linear-gradient(top, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
  background-image: linear-gradient(to bottom, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
}
.link:nth-child(2n+1):before {
  position: absolute;
  content: '';
  top: 0.5rem;
  left: 0.5rem;
  width: 1rem;
  height: 2rem;
  border-radius: inherit;
  background: #382f45;
}

.links.left .link {
  -webkit-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  transform: rotate(-90deg);
}
.links.left .link:nth-child(2n), .links.right .link:nth-child(2n) {
  z-index: 1;
  width: 0.5rem;
  height: 2rem;
  position:relative;
  top:-7px;
  background: #ff8e50;
  background-image: -webkit-gradient(linear, left top, right top, from(#f8be5b), color-stop(35%, #fef1c9), color-stop(65%, #e69539), to(#f7f2a0));
  background-image: -webkit-linear-gradient(left, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
  background-image: -o-linear-gradient(left, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
  background-image: linear-gradient(to right, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <div class="swag">
    <div class="chain">
      <div class="links left">
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
         <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
      </div>
    </div>
  </div>
</div>