현재 위치： 집 > 다운로드 > JS 효과 > CSS3 특수 효과 > CSS3 카드 놀이 확장 및 접기 애니메이션 특수 효과
CSS3 카드 놀이 확장 및 접기 애니메이션 특수 효과
| 나누다: JS 효과 / CSS3 특수 효과 | 출시 시간: 2017-12-12 | 방문: 2319 |
| 다운로드: 53 |
최신 다운로드
판타지 아쿠아리움
소녀전선
별의 날개
작은 꽃요정 요정의 천국
레스토랑 큐트스토리
산허 여행 탐험
사랑과 프로듀서
가장 강력한 두뇌 3
오드 더스트: 다밀라
젊은 서유기 2
24시간11리더보드 읽기
- 1 크기 조정 가능한 텍스트 요소에서 줄임표 잘림을 어떻게 구현할 수 있습니까?
- 2 diskmsg.dll - diskmsg.dll이 무엇인가요?
- 3 Dialupmanager.dll - Dialupmanager.dll이 무엇인가요?
- 4 diagrpt.dll -diagrpt.dll이란 무엇입니까?
- 5 Ease-in-out을 사용한 CSS 전환이 마우스 오버 시에는 원활하게 작동하지만 마우스 아웃 시 갑자기 작동하는 이유는 무엇입니까?
- 6 dicrhash.dll - dicrhash.dll이란 무엇입니까?
- 7 Spring에서 자체 인스턴스화된 객체에 종속성을 주입하는 방법은 무엇입니까?
- 8 정수를 추가하고 연결할 때 PHP가 \"2\"를 에코하는 이유는 무엇입니까?
- 9 Java 애플리케이션이 OS 시간대 대신 GMT를 사용하는 이유는 무엇이며 어떻게 해결할 수 있습니까?
- 10 Java에서 HTTP URL을 효과적으로 핑하는 방법: 종합 안내서
- 11 내 `std::fstream`이 파일 생성에 실패하는 이유는 무엇입니까?
- 12 \"class\" 속성을 사용하여 UI5 XML 보기에서 CSS 클래스에 바인딩하는 방법은 무엇입니까?
- 13 지역 변수를 사용한 패닉 복구가 Go에서 반환 값을 변경하지 않는 이유는 무엇입니까?
- 14 digiconf.dll - digiconf.dll이란 무엇입니까?
- 15 기존 PHP 클래스에서 UML 다이어그램을 생성하려면 어떻게 해야 합니까?
최신 튜토리얼
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
-
- 해외 웹 개발 풀스택 강좌 총집합
- 1651 2024-04-24
-
- Go 언어 실습 GraphQL
- 1924 2024-04-19
-
- 550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다
- 3344 2024-04-18
-
- 기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬
- 2878 2024-04-10
-
- MySQL 시작하기(mosh 교사)
- 1752 2024-04-07
-
- Mock.js | Axios.js | Json - 10일간의 고품질 수업
- 2564 2024-03-29
css3 카드 확장 및 접기 애니메이션 특수 효과는 CSS3 svg로 제작된 클릭 카드 확장 및 접기 애니메이션 효과입니다.
<!DOCTYPE html>
<html>
<머리>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="css/style.css">
</머리>
<body><script src="/demos/googlegg.js"></script>
<div class="perspective">
<div class='card-container'>
<div class="message">왼쪽에 있는 카드를 클릭하세요</div>
<div class='카드 카드-카드1'>
<div class='card__face 카드__face--top'>
<span class='card__value'>
아
</span>
<span class='card__suit'>
<svg width="21px" height="16px" viewBox="0 0 21 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" 스트로크="none" 스트로크-폭="1" fill="none" fill-rule="evenodd">
> > 35F5C"></path>
>
</span>
</div>
<div class='card__face 카드__face--btm'>
<span class='card__value'>
ㅇ
<span class='card__suit'>
<svg width="21px" height="16px" viewBox="0 0 21 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" 스트로크="없음" 스트로크-너비="1" fill="없음" fill-rule="evenodd">
<path d="M1.6440972,15.2434886 L19.7934028,15.2434886 L10.71875,1.39282802 L1.6440972,15.2434886 Z" id="Path-2" 스트로크="#635F5C"></path>
</g>
</svg>
</div>
</div>
<div class='카드 카드-카드2'>
<div class='card__face 카드__face--top'>
<span class='card__value'>
케이
<span class='card__suit'>
<svg width="20px" height="21px" viewBox="0 0 20 21" 버전="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" 스트로크="없음" 스트로크-너비="1" fill="없음" fill-rule="evenodd">
<ret id="Rectangle-3" 스트로크="#A68385" 변환="translate(10.035534, 10.071068) 회전(-315.000000) 변환(-10.035534, -10.071068) " x="3.43933983" y="3.47487373" 너비 ="13.1923882" height="13.1923882"></right>
</g>
</svg>
</div>
<div class='card__face 카드__face--btm'>
<span class='card__value'>
케이
<span class='card__suit'>
<svg width="20px" height="21px" viewBox="0 0 20 21" 버전="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" 스트로크="없음" 스트로크-너비="1" fill="없음" fill-rule="evenodd">
<ret id="Rectangle-3" 스트로크="#A68385" 변환="translate(10.035534, 10.071068) 회전(-315.000000) 변환(-10.035534, -10.071068) " x="3.43933983" y="3.47487373" 너비 ="13.1923882" height="13.1923882"></right>
</g>
</svg>
</div>
</div>
<div class='카드 카드-카드3'>
<div class='card__face 카드__face--top'>
<span class='card__value'>
Q
<span class='card__suit'>
<svg width="21px" height="18px" viewBox="0 0 21 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" 스트로크="없음" 스트로크-너비="1" fill="없음" fill-rule="evenodd">
<circle id="타원형" 스트로크="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
<circle id="타원형" 스트로크="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
<circle id="타원형" 스트로크="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
</g>
</svg>
</div>
<div class='card__face 카드__face--btm'>
<span class='card__value'>
Q
<span class='card__suit'>
<svg width="21px" height="18px" viewBox="0 0 21 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" 스트로크="없음" 스트로크-너비="1" fill="없음" fill-rule="evenodd">
<circle id="타원형" 스트로크="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
<circle id="타원형" 스트로크="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
<circle id="타원형" 스트로크="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
</g>
</svg>
</div>
</div>
<div class='카드 카드-카드4'>
<div class='card__face 카드__face--top'>
<span class='card__value'>
J
<span class='card__suit'>
<svg width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" 스트로크="없음" 스트로크-너비="1" fill="없음" fill-rule="evenodd">
<path d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="Path-2" 스트로크="#A68385" 변환="번역(10.000000, 7.631510) 회전( -180.000000) 번역(-10.000000, -7.631510) "></path>
</g>
</svg>
</div>
<div class='card__face 카드__face--btm'>
<span class='card__value'>
J
<span class='card__suit'>
<svg width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" 스트로크="없음" 스트로크-너비="1" fill="없음" fill-rule="evenodd">
<path d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="Path-2" 스트로크="#A68385" 변환="번역(10.000000, 7.631510) 회전( -180.000000) 번역(-10.000000, -7.631510) "></path>
</g>
</svg>
</div>
</div>
</div>
</div>
<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
</본문>