aktueller Standort: Heim > Herunterladen > JS-Effekte > CSS3特效 > css3的扑克牌展开折叠动画特效
css3的扑克牌展开折叠动画特效
Klassifizieren: JS-Effekte / CSS3特效 | Veröffentlichkeitsdatum: 2017-12-12 | Besuche: 2252 |
Herunterladen: 53 |
Neueste Downloads
Fantasy-Aquarium
Girls Frontline
Flügel der Sterne
Kleine Blumenfee, Feenparadies
Restaurant Cute Story
Shanhe Reiseerkundung
Liebe und Produzent
Das stärkste Gehirn 3
Odd Dust: Damila
Junge Reise in den Westen 2
24 StundenBestenliste lesen
- 1 Andrew Tate kündigt Pläne an, 1 Million US-Dollar in $DADDY Coin zu investieren, sobald er 10 Millionen Follower erreicht hat
- 2 Liskov-Substitutionsprinzip
- 3 Prinzip der Schnittstellentrennung
- 4 Was Sensex und Nifty bewegt
- 5 Cristiano Ronaldo bringt inmitten einer Justizkrise eine neue NFT-Sammlung auf den Markt
- 6 Beherrschen des Overflow-Scroll-Verlaufs mit CSS
- 7 Adept stellt fortschrittliche KI-Agenten mit multimodalen Fähigkeiten vor
- 8 Der von FTX vorgeschlagene Umstrukturierungsplan steht trotz der Unterstützung der Gläubiger vor rechtlichen Herausforderungen
- 9 Der pseudonyme Analyst Bluntz prognostiziert einen enormen Aufwärtstrend für den auf Ethereum (ETH) basierenden Memecoin Pepe (PEPE)
- 10 Eine ruhende Bitcoin-Wallet aus der Satoshi-Ära erwacht plötzlich zum Leben
- 11 Erweitertes SCSS: Funktion und Mixins
- 12 XRP kann sich bis 2025 auf 1 US-Dollar verdoppeln, aber erwarten Sie nicht, dass es von dort aus in die Höhe schnellen wird
- 13 Cardano (ADA)-Preis ist bereit, „Bombe“ fallen zu lassen, da geheimer Katalysator auftaucht
- 14 Prinzip der Einzelverantwortung
- 15 Doge2014: Ein neues Token zur Ehrung und Feier von 10 Jahren Dogecoin
Neueste Tutorials
-
- 国外Web开发全栈课程全集
- 1044 2024-04-24
-
- Go语言实战之 GraphQL
- 1334 2024-04-19
-
- 550W粉丝大佬手把手从零学JavaScript
- 2733 2024-04-18
-
- python大神Mosh,零基础小白6小时完全入门
- 2273 2024-04-10
-
- MySQL 初学入门(mosh老师)
- 1249 2024-04-07
-
- Mock.js | Axios.js | Json | Ajax--十天精品课堂
- 2102 2024-03-29
css3扑克牌展开折叠动画特效是一款css3 svg制作的点击卡牌展开和收起动画效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3扑克牌展开折叠动画特效</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="perspective">
<div class='card-container'>
<div class="message">点击 左侧 卡牌</div>
<div class='card card-card1'>
<div class='card__face card__face--top'>
<span class='card__value'>
A
</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" stroke="none" stroke-width="1" fill="none" 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" stroke="#635F5C"></path>
</g>
</svg>
</span>
</div>
<div class='card__face card__face--btm'>
<span class='card__value'>
A
</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" stroke="none" stroke-width="1" fill="none" 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" stroke="#635F5C"></path>
</g>
</svg>
</span>
</div>
</div>
<div class='card card-card2'>
<div class='card__face card__face--top'>
<span class='card__value'>
K
</span>
<span class='card__suit'>
<svg width="20px" height="21px" viewBox="0 0 20 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-3" stroke="#A68385" transform="translate(10.035534, 10.071068) rotate(-315.000000) translate(-10.035534, -10.071068) " x="3.43933983" y="3.47487373" width="13.1923882" height="13.1923882"></rect>
</g>
</svg>
</span>
</div>
<div class='card__face card__face--btm'>
<span class='card__value'>
K
</span>
<span class='card__suit'>
<svg width="20px" height="21px" viewBox="0 0 20 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-3" stroke="#A68385" transform="translate(10.035534, 10.071068) rotate(-315.000000) translate(-10.035534, -10.071068) " x="3.43933983" y="3.47487373" width="13.1923882" height="13.1923882"></rect>
</g>
</svg>
</span>
</div>
</div>
<div class='card card-card3'>
<div class='card__face card__face--top'>
<span class='card__value'>
Q
</span>
<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" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Oval" stroke="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
<circle id="Oval" stroke="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
<circle id="Oval" stroke="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
</g>
</svg>
</span>
</div>
<div class='card__face card__face--btm'>
<span class='card__value'>
Q
</span>
<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" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Oval" stroke="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
<circle id="Oval" stroke="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
<circle id="Oval" stroke="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
</g>
</svg>
</span>
</div>
</div>
<div class='card card-card4'>
<div class='card__face card__face--top'>
<span class='card__value'>
J
</span>
<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" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="Path-2" stroke="#A68385" transform="translate(10.000000, 7.631510) rotate(-180.000000) translate(-10.000000, -7.631510) "></path>
</g>
</svg>
</span>
</div>
<div class='card__face card__face--btm'>
<span class='card__value'>
J
</span>
<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" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="Path-2" stroke="#A68385" transform="translate(10.000000, 7.631510) rotate(-180.000000) translate(-10.000000, -7.631510) "></path>
</g>
</svg>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>