순수한 CSS 암호 생성기! 😱 안 된다고 하던데...

나는 많은 사람들이 "그것은 할 수 없다"고 말하는 것을 보았고 .... 글쎄요 (아직) 할 수 없습니다!

그러나 본 후 (그리고 의 유용한 댓글과 함께) 나는 내가 그것을 속일 수 있다는 것을 깨달았습니다!

나는 Alvaro의 게시물에 대한 마크업의 약 90%를 뻔뻔하게 훔쳤습니다. 그가 신경쓰지 않기를 바랍니다!

검은 상자를 클릭하여 비밀번호를 생성하십시오. 다른 비밀번호를 선택하기 위해 다시 랜더마이저를 시작하려면 다시 클릭하세요! 단순한.

참고: 많은 분들이 제가 접근성을 옹호한다는 것을 알고 계시겠지만, 아래는 접근할 수 없으며 실제 세계에서 사용하지 않는 어리석은 실험입니다.



인간의 반응 시간, 렌더링 시간 등으로 인해 동일한 암호를 생성할 가능성은 실제로 매우 낮습니다.

분명히 이전에 말했듯이 프로덕션에는 권장하지 않습니다.....실제로 무작위가 아니며 액세스할 수 없으며 생성된 암호를 복사하여 붙여넣을 수 없습니다.

사실 그것은 암호 생성기로서 꽤 쓰레기입니다!

그러나 임의의 "위조"원칙은 임의 색상 선택기, 주사위 등과 같은 모든 종류의 항목에 사용될 수 있습니다.

어쨌든 프로덕션에서는 사용할 수 없기 때문에 설명조차 하지 않겠습니다. CSS 전용 비밀번호 생성기를 만든 최초의 사람의 직함을 주장할 것이라고 생각했습니다. 전에)!

(좋아요, 조금 설명하겠습니다).

확인란을 토글하고 CSS를 사용하여 체크 상태를 가져옵니다. 확인란을 선택하지 않은 경우(선택한 경우 시작) animation-play-state: paused;를 사용하여 모든 애니메이션을 중지합니다. 선택하면 모든 애니메이션의 일시 중지가 해제됩니다.

input:checked + label span.number::before {
  animation-play-state: running;
}

애니메이션의 경우 - 각 상자는 초고속 속도로 글자와 숫자 사이를 점프하며, 각 상자마다 타이밍이 다르기 때문에 무작위로 보입니다.

업데이트

CSS 마녀 공예/부두를 좋아하는 사람을 위해 여기에 )의 "단일 요소"버전이 있습니다(두 요소입니다...어딘가를 파헤쳐야 합니다 🤣).



(현재) Chromium 기반 브라우저 이외의 다른 브라우저에서는 작동하지 않지만 어떻게 창의성에 감명받지 않을 수 있겠습니까? 제 생각에는 그 바이올린에서만 적어도 5개의 새로운 CSS 트릭을 배운 것 같습니다!

26자가 아닌 62자를 사용하기 때문에 내 것이 더 낫다고 말할 것입니다 ... 😋