Question

I'm using this Christmas Lights CSS code: https://codepen.io/tobyj/pen/QjvEex

The code works by using a single <li></li> to display one "light".

Is there a way I can make it so that the amount of <li></li> that show "fill" the width of a <div> class perhaps.

I'm hoping it's clear what I mean but basically at the moment the number of lights that show for my screen size is fine but upon testing the same amount on smaller screens it just spreads across way too far and creates a scrollbar at the bottom of the browser.

.lightrope {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  margin: -23px 0 0 0;
  padding: 0;
  padding-left: 0px;
  pointer-events: none;
}

.lightrope li {
  position: relative;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 12px;
  height: 16px;
  border-radius: 40%;
  margin: 20px;
  display: inline-block;
  background: #00f7a5;
  box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
  -webkit-animation-name: flash-1;
  animation-name: flash-1;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

.lightrope li:nth-child(2n+1) {
  background: cyan;
  box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
  -webkit-animation-name: flash-2;
  animation-name: flash-2;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
}

.lightrope li:nth-child(4n+2) {
  background: #f70094;
  box-shadow: 0px 4.6666666667px 24px 3px #f70094;
  -webkit-animation-name: flash-3;
  animation-name: flash-3;
  -webkit-animation-duration: 1.1s;
  animation-duration: 1.1s;
}

.lightrope li:nth-child(odd) {
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s;
}

.lightrope li:nth-child(3n+1) {
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
}

.lightrope li:before {
  content: "";
  position: absolute;
  background: #222;
  width: 10px;
  height: 6.3333333333px;
  border-radius: 2px;
  top: -4.6666666667px;
  left: 1px;
}

.lightrope li:after {
  content: "";
  top: -14px;
  left: 9px;
  position: absolute;
  width: 54px;
  height: 18.6666666667px;
  border-bottom: solid #222 2px;
  border-radius: 50%;
}

.lightrope li:last-child:after {
  width: 29px;
}

.lightrope li:first-child {
  margin-left: -40px;
}

@-webkit-keyframes flash-1 {
  0%,
  100% {
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 22px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(0, 247, 165, 0.2);
  }
}

@keyframes flash-1 {
  0%,
  100% {
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 22px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(0, 247, 165, 0.2);
  }
}

@-webkit-keyframes flash-2 {
  0%,
  100% {
    background: cyan;
    box-shadow: 0px 4.6666666667px 22px 3px cyan;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(0, 255, 255, 0.2);
  }
}

@keyframes flash-2 {
  0%,
  100% {
    background: cyan;
    box-shadow: 0px 4.6666666667px 22px 3px cyan;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(0, 255, 255, 0.2);
  }
}

@-webkit-keyframes flash-3 {
  0%,
  100% {
    background: #DB1E31;
    box-shadow: 0px 4.6666666667px 22px 3px #DB1E31;
  }
  50% {
    background: rgba(219, 30, 49, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(247, 0, 148, 0.5);
  }
}

@keyframes flash-3 {
  0%,
  100% {
    background: #DB1E31;
    box-shadow: 0px 4.6666666667px 22px 3px #DB1E31;
  }
  50% {
    background: rgba(219, 30, 49, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(247, 0, 148, 0.5);
  }
}

<ul class="lightrope">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<br>
<br>

Answer 1

width: 100%;已从原始CSS中删除，这可以解决您的问题。还要注意，codepen似乎在后台使用了“ normalize.css”，这将删除某些默认样式，从而导致更多差异。例如，我在margin: 0;中添加了body以防止出现另一个水平滚动条，并将.lightrope上的负边距改回其原始值。

body {
  margin: 0;
}

.lightrope {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  margin: -15px 0 0 0;
  padding: 0;
  padding-left: 0px;
  pointer-events: none;
  width: 100%
}

.lightrope li {
  position: relative;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 12px;
  height: 16px;
  border-radius: 40%;
  margin: 20px;
  display: inline-block;
  background: #00f7a5;
  box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
  -webkit-animation-name: flash-1;
  animation-name: flash-1;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

.lightrope li:nth-child(2n+1) {
  background: cyan;
  box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
  -webkit-animation-name: flash-2;
  animation-name: flash-2;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
}

.lightrope li:nth-child(4n+2) {
  background: #f70094;
  box-shadow: 0px 4.6666666667px 24px 3px #f70094;
  -webkit-animation-name: flash-3;
  animation-name: flash-3;
  -webkit-animation-duration: 1.1s;
  animation-duration: 1.1s;
}

.lightrope li:nth-child(odd) {
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s;
}

.lightrope li:nth-child(3n+1) {
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
}

.lightrope li:before {
  content: "";
  position: absolute;
  background: #222;
  width: 10px;
  height: 6.3333333333px;
  border-radius: 2px;
  top: -4.6666666667px;
  left: 1px;
}

.lightrope li:after {
  content: "";
  top: -14px;
  left: 9px;
  position: absolute;
  width: 54px;
  height: 18.6666666667px;
  border-bottom: solid #222 2px;
  border-radius: 50%;
}

.lightrope li:last-child:after {
  width: 29px;
}

.lightrope li:first-child {
  margin-left: -40px;
}

@-webkit-keyframes flash-1 {
  0%,
  100% {
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 22px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(0, 247, 165, 0.2);
  }
}

@keyframes flash-1 {
  0%,
  100% {
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 22px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(0, 247, 165, 0.2);
  }
}

@-webkit-keyframes flash-2 {
  0%,
  100% {
    background: cyan;
    box-shadow: 0px 4.6666666667px 22px 3px cyan;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(0, 255, 255, 0.2);
  }
}

@keyframes flash-2 {
  0%,
  100% {
    background: cyan;
    box-shadow: 0px 4.6666666667px 22px 3px cyan;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(0, 255, 255, 0.2);
  }
}

@-webkit-keyframes flash-3 {
  0%,
  100% {
    background: #DB1E31;
    box-shadow: 0px 4.6666666667px 22px 3px #DB1E31;
  }
  50% {
    background: rgba(219, 30, 49, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(247, 0, 148, 0.5);
  }
}

@keyframes flash-3 {
  0%,
  100% {
    background: #DB1E31;
    box-shadow: 0px 4.6666666667px 22px 3px #DB1E31;
  }
  50% {
    background: rgba(219, 30, 49, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(247, 0, 148, 0.5);
  }
}

<ul class="lightrope">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<br>
<br>

Answer 2

您可以像我在这里一样轻松地使用JavaScript进行此操作：

var width = document.getElementById('wrapper').offsetWidth; // get width
var lights = width / 52; // get ammount of lights (52px = one light)

for (var i = 0; i < lights; i++) {
  document.getElementById('lights').appendChild(document.createElement("li"));
  // add lights to <ul>
}

#wrapper {
  width: 100%;
}

.lightrope {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  margin: -23px 0 0 0;
  padding: 0;
  padding-left: 0px;
  pointer-events: none;
}

.lightrope li {
  position: relative;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 12px;
  height: 16px;
  border-radius: 40%;
  margin: 20px;
  display: inline-block;
  background: #00f7a5;
  box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
  -webkit-animation-name: flash-1;
  animation-name: flash-1;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

.lightrope li:nth-child(2n+1) {
  background: cyan;
  box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
  -webkit-animation-name: flash-2;
  animation-name: flash-2;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
}

.lightrope li:nth-child(4n+2) {
  background: #f70094;
  box-shadow: 0px 4.6666666667px 24px 3px #f70094;
  -webkit-animation-name: flash-3;
  animation-name: flash-3;
  -webkit-animation-duration: 1.1s;
  animation-duration: 1.1s;
}

.lightrope li:nth-child(odd) {
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s;
}

.lightrope li:nth-child(3n+1) {
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
}

.lightrope li:before {
  content: "";
  position: absolute;
  background: #222;
  width: 10px;
  height: 6.3333333333px;
  border-radius: 2px;
  top: -4.6666666667px;
  left: 1px;
}

.lightrope li:after {
  content: "";
  top: -14px;
  left: 9px;
  position: absolute;
  width: 54px;
  height: 18.6666666667px;
  border-bottom: solid #222 2px;
  border-radius: 50%;
}

.lightrope li:last-child:after {
  width: 29px;
}

.lightrope li:first-child {
  margin-left: -40px;
}

@-webkit-keyframes flash-1 {
  0%,
  100% {
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 22px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(0, 247, 165, 0.2);
  }
}

@keyframes flash-1 {
  0%,
  100% {
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 22px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(0, 247, 165, 0.2);
  }
}

@-webkit-keyframes flash-2 {
  0%,
  100% {
    background: cyan;
    box-shadow: 0px 4.6666666667px 22px 3px cyan;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(0, 255, 255, 0.2);
  }
}

@keyframes flash-2 {
  0%,
  100% {
    background: cyan;
    box-shadow: 0px 4.6666666667px 22px 3px cyan;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(0, 255, 255, 0.2);
  }
}

@-webkit-keyframes flash-3 {
  0%,
  100% {
    background: #DB1E31;
    box-shadow: 0px 4.6666666667px 22px 3px #DB1E31;
  }
  50% {
    background: rgba(219, 30, 49, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(247, 0, 148, 0.5);
  }
}

@keyframes flash-3 {
  0%,
  100% {
    background: #DB1E31;
    box-shadow: 0px 4.6666666667px 22px 3px #DB1E31;
  }
  50% {
    background: rgba(219, 30, 49, 0.4);
    box-shadow: 0px 4.6666666667px 22px 3px rgba(247, 0, 148, 0.5);
  }
}

<div id="wrapper">
  <ul class="lightrope" id="lights"></ul>
</div>
<br>
<br>

Limit the number/width of LI "Christmas Lights"?

2 个答案:

Limit the number/width of LI &#34;Christmas Lights&#34;?

2 个答案:

Limit the number/width of LI "Christmas Lights"?