CSS를 통해서만 Amazon 계기 버튼 바람의 LED 깜박임 가능
7375 단어 AmazonDashButtonCSS
견본
이런 느낌으로 썼어요.
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>
Reference
이 문제에 관하여(CSS를 통해서만 Amazon 계기 버튼 바람의 LED 깜박임 가능), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yukitter/items/6bb1ac79e267fb2b25a1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<span class="ledblink"></span>
<span class="ledblink on"></span>
Reference
이 문제에 관하여(CSS를 통해서만 Amazon 계기 버튼 바람의 LED 깜박임 가능), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yukitter/items/6bb1ac79e267fb2b25a1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)