CSS를 통해서만 Amazon 계기 버튼 바람의 LED 깜박임 가능

7375 단어 AmazonDashButtonCSS
가상의 아마존 대시 버튼식 WEB 앱을 만드는 과정에서 CSS만 바람의 LED를 깜박일 수 있어 공유된다.

견본


이런 느낌으로 썼어요.
Amazon Dash 버튼

CSS


ledblink.css
 span.ledblink {
    display: block;
    width: 8px;
    height: 8px;
    background-color: rgb(180,180,180);
    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5), 0px 0px 3px 2px rgba(100,100,100,0.5);
    border-radius: 4px;
}
span.ledblink.on {
    background-color: rgb(255,255,255);
    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5), 0px 0px 3px 2px rgba(187,187,187,0.5);
    animation: blinkWhite 0.9s infinite;
}
@keyframes blinkWhite {
    from { 
      background-color: rgb(180,180,180); 
      box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  0px 0px 3px 2px rgba(100,100,100,0.5);
    }
    50%  { 
      background-color: rgb(255,255,255);
      box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  0px 0px 3px 2px rgba(187,187,187,0.5);
    }
    to   { 
      background-color: rgb(180,180,180);
      box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  0px 0px 3px 2px rgba(100,100,100,0.5);
    }
}

사용법


소등
sample-off.html
<span class="ledblink"></span>
클래스를 열면 깜박임 시작
sample-on.html
<span class="ledblink on"></span>

좋은 웹페이지 즐겨찾기