文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >限制“圣诞灯”的数量/宽度？

问限制“圣诞灯”的数量/宽度？
EN

Stack Overflow用户
提问于 2018-11-13 14:21:44
回答 2查看 240关注 0票数 2

我正在使用这个圣诞灯CSS代码：https://codepen.io/tobyj/pen/QjvEex

该代码通过使用单个<li></li>来显示一个“光”来工作。

有什么方法可以让<li></li>的数量显示“填充”<div>类的宽度吗？

我希望这是我的意思，但基本上目前显示我的屏幕大小的灯数是可以的，但在较小的屏幕上测试同样数量时，它只是传播得太远，并在浏览器底部创建了一个滚动条。

​

代码语言：javascript
运行
复制
.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);
  }
}
代码语言：javascript
运行
复制
<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>

​

html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-11-13 14:52:51

您可以像我在这里所做的那样，使用JavaScript轻松地做到这一点：

​

代码语言：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>
}
代码语言：javascript
运行
复制
#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);
  }
}
代码语言：javascript
运行
复制
<div id="wrapper">
  <ul class="lightrope" id="lights"></ul>
</div>
<br>
<br>

​

票数 1
EN

Stack Overflow用户

发布于 2018-11-13 14:43:29

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

​

代码语言：javascript
运行
复制
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);
  }
}
代码语言：javascript
运行
复制
<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>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/53283125

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档