👾 순수 CSS 게임보이

안녕하세요!

HTML과 CSS를 사용하여 맨 처음부터 만든 수제 Nintendo Gameboy를 보여드리고 싶습니다. Javascript에 의해 (약간) 애니메이션됩니다. 내 첫 번째 게임 콘솔이었습니다. 얼마나 아름다운 추억입니까! 😍

👉 라이브 데모: https://baumannzone.github.io/gameboy-css/

👉 소스 코드:

바우만존 / 게임보이 CSS

👾 Pure CSS GameBoy - 애니메이션과 오리지널 사운드 포함 🔊

동영상:

시작하자!

HTML은 Pug(이전에는 jade라고 함)로, CSS는 Stylus CSS으로 작성되었습니다.

이것은 사용된 유일한 HTML(Pug)입니다.

  .gameboy
    .screen-cont
      .power
      .screen
        .header DOT MATRIX WITH STEREO SOUND
        .animated-text Nintendo
          .copy ®
    .controls-cont
      .btn-direction
        .vertical
        .horizontal
      .btn-AB
      .btn-start-select
    .speakers
    .on-off < off-on >
    .phones phones

여기에서 전체 파일을 확인하십시오: index.pug .
또한 다음은 CSS 파일(스타일러스)입니다. main.styl

Pure CSS Gameboy가 완료되었지만 약간의 마법을 추가하고 싶었기 때문에 약간의 Javascript와 CSS로 애니메이션과 효과를 추가했습니다 🔮.

게임보이를 켤 때 가장 먼저 보이는 것은 Nintendo 단어 전환

입니다.

전환이 완료되면 "beep "🔊 소리가 들립니다.

마지막으로 장치를 "켜면"전원 표시등이 켜지는 것을 시뮬레이트합니다.

추가 ✏️: 사용된 글꼴은 닌텐도와 유사한 글꼴인 jackster3000의 "Pretendo"입니다. 진짜 닌텐도 폰트는 잘 알려져 있지 않습니다.

🐷 그게 다야, 여러분!

질문이 있으신가요? 아래 댓글에서 어떻게 생각하는지 알려주시거나 트위터( )에 몇 마디 남겨주세요.

다음 "Pure CSS"아이디어가 무엇일지 아직 생각 중입니다. 무엇을 보고 싶으신가요?

이 게시물의 내용이 마음에 드셨다면 새로 출시된 제 유튜브 채널을 구독하셔야 합니다: .

또한 웹 개발과 관련된 #vuejs, #css #javascript, #testing 또는 기타 주제에 관심이 있다면 Github에서 나를 팔로우할 수 있습니다. 저는 자주 오픈 소스 콘텐츠를 만들고 있기 때문입니다.

이 기사가 마음에 들면 css-art 시리즈의 "Pure CSS Zombie"를 확인해야 합니다.

🧟‍♀️ 순수한 CSS 좀비 🧟‍♂️

DCSL GuideSmiths Spain의 Jorge Baumann ・ 10월 31일 '19 ・ 1분 읽기

#html #css #vue #dog

🦄 읽어주셔서 감사합니다. 곧 뵙겠습니다! 🥳
안녕하세요! | Github |