HTML CSS와 자바스크립트를 사용한 카드 매칭 게임은 인스타그램에서 우리를 팔로우하세요: https://www.instagram.com/webstreet

HTML CSS와 자바스크립트를 사용한 카드 매칭 게임은 인스타그램에서 우리를 팔로우하세요: https://www.instagram.com/webstreet_code/

Linda Hamilton

풀어 주다： 2024-11-26 03:00:10

원래의

714명이 탐색했습니다.

Cards matching game using html css and javascript follow us on instagram: https://www.instagram.com/webstreet_code/

인스타그램 팔로우: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="ko">
<머리>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>카드 매치 게임</title>
  <스타일>
    몸 {
      글꼴 모음: Arial, sans-serif;
      배경: 선형 그라데이션(-45deg, #1a2a6c, #b21f1f, #fdbb2d, #0f2027);
      배경 크기: 400% 400%;
      애니메이션: 그래디언트BG 8s 이즈 인피니티;
      색상: #fff;
      디스플레이: 플렉스;
      플렉스 방향: 열;
      항목 정렬: 중앙;
      내용 정당화: 센터;
      높이: 100vh;
      여백: 0;
    }

    @keyframes 그래디언트BG {
      0% { 배경 위치: 0% 50%; }
      50% { 배경 위치: 100% 50%; }
      100% { 배경 위치: 0% 50%; }
    }

    h1 {
      글꼴 크기: 2rem;
      여백 하단: 20px;
    }

    .그리드 {
      디스플레이: 그리드;
      그리드-템플릿-열: 반복(4, 100px);
      그리드 간격: 15px;
    }

    .카드 {
      너비: 80px;
      높이: 80px;
      원근감: 1000px;
    }

    .카드 내부 {
      위치: 상대;
      너비: 100%;
      높이: 100%;
      전환: 변환 0.6초, 상자 그림자 0.3초;
      변환 스타일: 보존-3D;
      커서: 포인터;
    }

    .card-inner:hover {
      상자 그림자: 0 4px 20px rgba(255, 255, 255, 0.5);
      변환: scale(1.1);
    }

    .card-inner.flipped {
      변환: 회전Y(180deg);
    }

    .카드 앞면,
    .카드 뒷면 {
      위치: 절대;
      너비: 100%;
      높이: 100%;
      뒷면 가시성: 숨김;
      테두리 반경: 10px;
    }

    .카드 전면 {
      배경: #444;
      디스플레이: 플렉스;
      항목 정렬: 중앙;
      내용 정당화: 센터;
      테두리: 2px 솔리드 #fff;
      상자 그림자: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .card-front 스팬 {
      글꼴 크기: 2rem;
      색상: #fff;
    }

    .카드 뒷면 {
      배경: #fff;
      변환: 회전Y(180deg);
      디스플레이: 플렉스;
      항목 정렬: 중앙;
      내용 정당화: 센터;
      글꼴 크기: 3rem;
      글꼴 두께: 굵게;
      테두리 반경: 10px;
    }

    .red-heart {
      색상: 빨간색;
    }

    .노란색 하트 {
      색상: 금색;
    }

    .오렌지-하트 {
      색상: 주황색;
    }

    @keyframes 글로우 {
      0% { 상자 그림자: 0 0 10px rgba(255, 255, 255, 0.2); }
      50% { 상자 그림자: 0 0 30px rgba(255, 255, 255, 0.5); }
      100% { 상자 그림자: 0 0 10px rgba(255, 255, 255, 0.2); }
    }
  </스타일>
</머리>
<본문>


  <h1>카드 매치 게임</h1>


  <div>

로그인 후 복사

위 내용은 HTML CSS와 자바스크립트를 사용한 카드 매칭 게임은 인스타그램에서 우리를 팔로우하세요: https://www.instagram.com/webstreet_code/의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!