LED灯边框

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 方法，在动画的伪选择器 (:before) 上使用 border-image。

/* demo stuff */

body {
  background:#000;
  color:#FFF;
  padding:3em;
  text-align: center;
}

div {border:1px dashed #666;}

/* container */

.ledborder {
  padding:34px;
  position:relative;
  line-height:34px;
}

.ledborder:before {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  content: ""; z-index:-1;
  width: 100%; height: 100%;
  box-sizing:border-box;
  /* the border image */
  border-style: solid;
  border-width: 34px;
  -moz-border-image: url(http://puu.sh/ocvuq/d01cc89c15.png) 34 round;
  -webkit-border-image: url(http://puu.sh/ocvuq/d01cc89c15.png) 34 round;
  -o-border-image: url(http://puu.sh/ocvuq/d01cc89c15.png) 34 round;
  border-image: url(http://puu.sh/ocvuq/d01cc89c15.png) 34 round;
  animation: ledFlash 1.5s infinite;
}

/* animation */

@keyframes ledFlash {
  50% { opacity:.6; }
}

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

jsFiddle: https://jsfiddle.net/azizn/3pdesrL0/1/

我觉得没必要用那么多HTML元素。此解决方案很简单，line-height: 34px 确保边框图像一致（无拉伸）。

Answer 3

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

多个CSS背景

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

以前是通过4个容器来完成的，但是随着CSS multiple-backgrounds的引入，就简单多了：

/* 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;
}

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

这个解决方案有一个明显的缺点，如果宽度不是图像尺寸的倍数，灯泡会相互重叠，我使用[=48=解决了这个问题]:

// jquery plugin written by OPOPO
// 

$.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);
});

/* 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;
}

<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>

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

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

LED灯边框

LED lights border

html

css

frontend