ホームページ

JS特殊効果

CSS3特殊効果

CSS3 トランプの展開と折りたたみアニメーションの特殊効果

css3 トランプの展開と折りたたみのアニメーション特殊効果は、css3 svg によって生成されるクリックカードの展開と折りたたみのアニメーション効果です。

ダウンロード中プレビュー

<!DOCTYPE html>
<html>
<頭>
<メタ文字セット="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="パースペクティブ">
<div class='カードコンテナ'>
<div class="message">左側のカードをクリック</div>
<div class='カードカード-カード1'>
<div class='card__facecard__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" ストローク="none" ストローク幅="1" fill="none" fill-rule="evenodd">
＆lt; Path d = "M1.6440972,15.2434886 L19.7934028,15.2434886 L10.71875,1.39282802 L1.6440972,15.234886 Z" # </svg>
</span>
</div>
<div class='card__facecard__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="ページ-1" ストローク="none" ストローク幅="1" fill="none" fill-rule="evenodd">
＆lt; Path d = "M1.6440972,15.2434886 L19.7934028,15.2434886 L10.71875,1.39282802 L1.6440972,15.234886 Z" # </g>
</svg>
</span>
</div>
</div>
<div class='カードカード-カード2'>
<div class='card__facecard__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="ページ-1" ストローク="none" ストローク幅="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-3" ストローク="#A68385" 変換="translate(10.035534, 10.071068) 回転(-315.000000) 平行移動(-10.035534, -10.071068) " x="3.43933983" y="3.47487373" width ="13.1923882" 高さ="13.1923882"></rect>
</g>
</svg>
</span>
</div>
<div class='card__facecard__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="ページ-1" ストローク="none" ストローク幅="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-3" ストローク="#A68385" 変換="translate(10.035534, 10.071068) 回転(-315.000000) 平行移動(-10.035534, -10.071068) " x="3.43933983" y="3.47487373" width ="13.1923882" 高さ="13.1923882"></rect>
</g>
</svg>
</span>
</div>
</div>
<div class='カードカード-カード3'>
<div class='card__facecard__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="ページ-1" ストローク="none" ストローク幅="1" fill="none" fill-rule="evenodd">
<circle id="Oval" ストローク="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
<circle id="Oval" ストローク="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
<circle id="Oval" ストローク="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
</g>
</svg>
</span>
</div>
<div class='card__facecard__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="ページ-1" ストローク="none" ストローク幅="1" fill="none" fill-rule="evenodd">
<circle id="Oval" ストローク="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
<circle id="Oval" ストローク="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
<circle id="Oval" ストローク="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
</g>
</svg>
</span>
</div>
</div>
<div class='カードカード-カード4'>
<div class='card__facecard__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="ページ-1" ストローク="none" ストローク幅="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="パス-2" ストローク="#A68385" 変換="translate(10.000000, 7.631510) 回転( -180.000000) 変換(-10.000000, -7.631510) "></path>
</g>
</svg>
</span>
</div>
<div class='card__facecard__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="ページ-1" ストローク="none" ストローク幅="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="パス-2" ストローク="#A68385" 変換="translate(10.000000, 7.631510) 回転( -180.000000) 変換(-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>
</本文>
</html>

免責事項

このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロードサイトによって転載されたものです。ソフトウェアの整合性をご自身で確認してください。このサイトのすべてのリソースは学習の参考のみを目的としています。商業目的で使用しないでください。そうでない場合は、すべての結果に対して責任を負うことになります。侵害がある場合は、削除するためにご連絡ください。連絡先情報: admin@php.cn