Question

我创建了LED灯边框 - http://codepen.io/anon/pen/grvYQp 它仅在屏幕设置为特定大小时才有效。我应该在代码中做出哪些更改，以便它适用于任何大小的屏幕？

HTML

<div>
  <ul>
    <li class="bulb"></li>
    <li class="bulb"></li>
    <li class="bulb"></li>
    <li class="bulb"></li>
    <li class="bulb"></li>
    <li class="bulb"></li>
    <li class="bulb"></li>
    <li class="bulb"></li>
    <li class="bulb"></li>
    <li class="bulb"></li>

  </ul>
  <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
    <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>

  <ul>
    <li class="bulb"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="bulb"></li>
  </ul>
  <ul>
    <li class="bulb"></li>
    <li class="bulb"></li>
    <li class="bulb"></li>
    <li class="bulb"></li>
    <li class="bulb"></li>
    <li class="bulb"></li>
    <li class="bulb"></li>
    <li class="bulb"></li>
    <li class="bulb"></li>
    <li class="bulb"></li>
  </ul>

CSS

@keyframes ledFlash {
  0% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 160% 160%;
  }
  100% {
    background-size: 100% 100%;
  }
}

body {
  background: #000;
  padding: 10px;
}

div {
  float: left;
  margin-left: 15px;
}

ul {
  display: block;
  float: left;
}

ul li {
  margin: 2px;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

ul .bulb {
  background-attachment: scroll;
  background-clip: border-box;
  background-color: transparent;
  background: -moz-radial-gradient(center, ellipse cover, rgba(195, 255, 0, 1) 0%, rgba(41, 154, 11, 0) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(195, 255, 0, 1)), color-stop(100%, rgba(41, 154, 11, 0)));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(195, 255, 0, 1) 0%, rgba(41, 154, 11, 0) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(195, 255, 0, 1) 0%, rgba(41, 154, 11, 0) 100%);
  /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(195, 255, 0, 1) 0%, rgba(41, 154, 11, 0) 100%);
  /* IE10+ */
  background: radial-gradient(ellipse at center, rgba(195, 255, 0, 1) 0%, rgba(41, 154, 11, 0) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#c3ff00', endColorstr='#00299a0b', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  background-position: center center;
  background-repeat: repeat;
  background-size: 100% 100%;
  animation: ledFlash 1.5s infinite;
}

Answer 1

javascript可以选择吗？然后，当尺寸很小时，你可以隐藏一些列：

 function adjustLeds() {
    var bulbWidth = $('ul:eq(0)').width();
    var availableWidth = $('body').width() - 15 /*div margin*/ ;
    var toremove = $('ul').length - Math.floor(availableWidth / bulbWidth);
    if (toremove > 0)
      $('ul').show().slice(1, toremove + 1).hide()
  }

  $(function() {
    adjustLeds();
    $(window).on('resize', adjustLeds);
  })

http://codepen.io/anon/pen/xVYxxM

Answer 2

我发布了另一个答案，因为这是一种完全不同的方法：

多个CSS背景

基本上，使用动画GIF图像并在4层中重复它，每侧有一层：顶部，右侧，底部和左侧。

过去，过去常常通过4个容器完成，但随着CSS multiple-backgrounds的引入，它变得更加容易：

＆＃13;

/* demo stuff */

body {
  background:#000;
  color:#FFF;
  padding:3em;
  text-align: center;
}

div {border:1px dashed red;}

/* container */

.ledborder {
  margin:0 auto;
  padding:34px;
  position:relative;
  line-height:34px;
  background:
    url(http://i.imgur.com/bkmui6S.gif) repeat-y,
    url(http://i.imgur.com/bkmui6S.gif) repeat-y right,
    url(http://i.imgur.com/bkmui6S.gif) repeat-x,
    url(http://i.imgur.com/bkmui6S.gif) repeat-x left bottom;
}

＆＃13;

<div class="ledborder">
  I am surrounded by light!
</div>

＆＃13;

此解决方案存在明显的缺点，如果宽度不是图像大小的倍数，灯泡可以相互重叠，我使用jQuery解决了这个问题：

＆＃13;

// jquery plugin written by OPOPO
// http://stackoverflow.com/questions/15040153/css-100-width-with-steps-per-20px

$.fn.widthStep = function(step)
{
    var width = $(this).width();
    $(this).css('max-width', width - width%step);
}

$('.ledborder').widthStep(34);

// recalculate max-width on resize
$( window ).resize(function() {
  $('.ledborder').removeAttr("style");
  $('.ledborder').widthStep(34);
});

＆＃13;

/* demo stuff */

body {
  background:#000;
  color:#FFF;
  padding:3em;
  text-align: center;
}

div {border:1px dashed red;}

/* container */

.ledborder {
  margin:0 auto;
  padding:34px;
  position:relative;
  line-height:34px;
  background:
    url(http://i.imgur.com/bkmui6S.gif) repeat-y,
    url(http://i.imgur.com/bkmui6S.gif) repeat-y right,
    url(http://i.imgur.com/bkmui6S.gif) repeat-x,
    url(http://i.imgur.com/bkmui6S.gif) repeat-x left bottom;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ledborder">
  I am surrounded by light!
</div>

＆＃13;

该函数基本上强制容器的最大宽度是图像宽度的倍数（34）。

jsFiddle：https://jsfiddle.net/azizn/ot7sv5pz/

LED灯边框

2 个答案: