1. ホーム
  2. 質問と答え
  3. LEDが点灯します。

LEDが点灯します。

2016-04-09 30 views
4

私はLEDライトを作成しました。border-http://codepen.io/anon/pen/grvYQp 画面が特定のサイズに設定されている場合のみ動作します。どのサイズの画面でも動作するように、コード内でどのような変更を行う必要がありますか？ HTMLLEDが点灯します。

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

出典

2016-04-09 uitwaa

+1

あなたが境界線として球根を行う必要があります。 border-imageを探してください – Akxe

+0

ここではborder imageを使用したくありません – uitwaa

+0

border-imageには何が問題なのですか？それはアニメーションですか？あなたは簡単に基本的なGIF画像を作成することができます – Aziz

答えて

2

をアニメーション用擬似セレクタ（:before）にborder-imageを使用して、純粋なCSSのアプローチです。

/* 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は、境界画像が一貫していることを保証します（ストレッチなし）。

出典

2016-04-10 00:58:37 Aziz

+0

これは私の問題のほとんどを解決します。赤い点線は何ですか？私は背景と同じ色にすることができますので、見えなくなりますよね？また、別の画面用の電球のサイズを調整することはできますか？ – uitwaa

+0

赤い枠線は境界枠を表示するだけです。削除することができます。電球はコンテナの全幅/高さに渡り、それをテストし、異なる画面サイズでどのように動作するかを確認します。実際のサイズを縮小したい場合は、より小さなボーダー画像を作成して、新しい画像サイズに合わせて値を変更してください。 – Aziz

+0

ありがとう！ – uitwaa

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

出典

2016-04-09 21:00:46 lukbl

+0

しかし、興味深い解決策は、ウィンドウのサイズを変更（拡大）すると、アニメーションが矛盾するようになります。http://i.imgur.com/wmpDTFh.gifv – Aziz

0

それは全く異なる方法であるため、私は別の答えを投稿しています：

複数の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>

これまで明らか欠点がありますソリューションは、画像のサイズの倍数でない場合、球根が重なり合うことがあります。これはjQueryを使用して解決しました。

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

出典

2016-04-10 01:28:34 Aziz

+0

これはもう少し考えれば、アニメーションGIFの代わりに静的なイメージを使って、ネイティブCSSアニメーションの擬似セレクタに配置した可能性があります。 – Aziz

関連する問題

 関連する問題