웹솔루션개발 25년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] claw machine 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] claw machine

해피CGI윤실장 2025. 3. 26. 09:07

 웹에서 제작된 뽑기 게입입니다.
HTML, CSS, JS로 제작되었습니다.
자세한 내용은 데모를 확인해 주시기 바랍니다.



HTML

<body>
  <div class="wrapper">
    <div class="collection-box pix"></div>
    <div class="claw-machine">
      <div class="box pix">
        <div class="machine-top pix">
          <div class="arm-joint pix">
            <div class="arm pix">
              <div class="claws pix"></div>
            </div>
          </div>
          <div class="rail vert pix"></div>
          <div class="rail hori pix"></div>
        </div>
        <div class="machine-bottom pix">
          <div class="collection-point pix"></div>
        </div>
      </div>
      <div class="control pix">
        <div class="cover left"></div>
        <button class="hori-btn pix"></button>
        <button class="vert-btn pix"></button>
        <div class="cover right">
          <div class="instruction pix"></div>
        </div>
        <div class="cover bottom"></div>
        <div class="cover top">
          <div class="collection-arrow pix"></div>
        </div>
        <div class="collection-point pix"></div>
      </div>
    </div>
  </div>
  <div class="sign">
    by masahito / ma5a.com
  </div>
</body>
 

CSS,  JS는 데모를 통해 확인해 주세요

 

저작자표시 (새창열림)

'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글

[해피CGI][cgimall] Selectize - 텍스트 입력과 셀렉트박스를 결합한 UI 컨트롤 플러그인  (0) 2025.04.01
selectric.js v1.13.0 - 셀렉트박스 디자인 변경 Jquery 플러그인  (0) 2025.03.31
[해피CGI][cgimall] Split Landing Page 분할 랜딩 페이지  (0) 2025.03.07
[해피CGI][cgimall] 폭죽 애니메이션 jquery - tsParticles  (0) 2025.02.28
[해피CGI][cgimall] 애니메이션으로 그림을 그려주는 - jQuery DrawSVG  (0) 2025.02.04
공유하기 링크
'웹프로그램밍 자료실/JAVA 자료' Related Articles more
Comments