文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >LED灯边

问LED灯边
EN

Stack Overflow用户
提问于 2016-04-09 20:15:40
回答 3查看 4.9K关注 0票数 4

我已经创建了LED灯边框- http://codepen.io/anon/pen/grvYQp，它只在屏幕设置为特定大小时才能工作。我应该对代码进行哪些修改，以便它与任何大小的屏幕一起工作？

HTML

代码语言：javascript
复制
<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

代码语言：javascript
复制
@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;
}
html
css
frontend
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-04-10 00:58:37

下面是一种使用border-image的纯CSS方法，用于动画的psuedo选择器(:before)。

​

代码语言：javascript
复制
/* 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; }
}
代码语言：javascript
复制
<div class="ledborder">
  I am surrounded by light!
</div>

​

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

我觉得使用这么多HTML元素是不必要的。这个解决方案很简单，并且line-height: 34px确保边界图像是一致的(没有延伸)。

票数 2
EN

Stack Overflow用户

发布于 2016-04-09 21:00:46

javascript是一个选择吗？然后，当大小很小时，可以隐藏一些列：

代码语言：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

票数 1
EN

Stack Overflow用户

发布于 2016-04-10 01:28:34

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

多CSS背景

基本上，使用一个动画的GIF图像，并在4层中进行重复，每一层都有一个图层:上、右、下和左。

在过去，这是通过4个容器完成的，但是随着CSS多重背景的引入，这要容易得多：

​

代码语言：javascript
复制
/* 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;
}
代码语言：javascript
复制
<div class="ledborder">
  I am surrounded by light!
</div>

​

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

​

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

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

https://stackoverflow.com/questions/36522158

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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