css3的扑克牌展开折叠动画特效
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>
A＃＃＃
</span>
<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 页" 笔划 ="无" 笔画宽度 ="1" 填充 ="无" 填充规则 ="evenodd">
<路径 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>
</span>
K
</span>
<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 页" 笔划 ="无" 笔画宽度 ="1" 填充 ="无" 填充规则 ="evenodd">
<矩形 id="矩形-3" 描边="#A68385" 变换="翻译(10.035534, 10.071068) 旋转(-315.000000) 平移(-10.035534, -10.071068)" x="3.43933983" y="3.47487373" 宽度=“13.1923882”高度=“13.1923882”>
</g>
</svg>
</span>
K
</span>
<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 页" 笔划 ="无" 笔划宽度 ="1" 填充 ="无" 填充规则 ="evenodd">
<矩形 id="矩形-3" 描边="#A68385" 变换="翻译(10.035534, 10.071068) 旋转(-315.000000) 平移(-10.035534, -10.071068)" x="3.43933983" y="3.47487373" 宽度=“13.1923882”高度=“13.1923882”>
</g>
</svg>
</span>
问
</span>
<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 页" 笔划 ="无" 笔划宽度 ="1" 填充 ="无" 填充规则 ="evenodd">
<圆 id="椭圆形" 笔划="#635F5C" cx="4.5" cy="13.5" r="4">
<圆 id="椭圆形" 笔划="#635F5C" cx="10.5" cy="4.5" r="4">
<圆 id="椭圆形" 笔划="#635F5C" cx="16.5" cy="13.5" r="4">
</g>
</svg>
</span>
问
</span>
<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 页" 笔划 ="无" 笔画宽度 ="1" 填充 ="无" 填充规则 ="evenodd">
<圆 id="椭圆形" 笔划="#635F5C" cx="4.5" cy="13.5" r="4">
<圆 id="椭圆形" 笔划="#635F5C" cx="10.5" cy="4.5" r="4">
<圆 id="椭圆形" 笔划="#635F5C" cx="16.5" cy="13.5" r="4">
</g>
</svg>
</span>
J
</span>
<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 页" 笔划 ="无" 笔画宽度 ="1" 填充 ="无" 填充规则 ="evenodd">
<路径 d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="路径2" 笔划="#A68385" 变换="翻译(10.000000 , 7.631510) 旋转( -180.000000) 翻译(-10.000000, -7.631510) ">
</g>
</svg>
</span>
J
</span>
<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 页" 笔划 ="无" 笔划宽度 ="1" 填充 ="无" 填充规则 ="evenodd">
<路径 d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="路径2" 笔划="#A68385" 变换="翻译(10.000000 , 7.631510) 旋转( -180.000000) 翻译(-10.000000, -7.631510) ">
</g>
</svg>
</span>
<脚本类型=“text/javascript”src='js/jquery.min.js'></script>
<脚本类型=“text/javascript”src=“js/index.js”>
</body>