HTML CSS와 자바스크립트를 사용한 카드 매칭 게임은 인스타그램에서 우리를 팔로우하세요: https://www.instagram.com/webstreet_code/
- Linda Hamilton원래의
- 2024-11-26 03:00:10700검색
인스타그램 팔로우: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
JavaScript css html using pointer display position margin border viewport background transform transition animation column flex https
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.