css3的撲克牌展開折疊動畫特效
css3撲克牌展開折疊動畫特效是一款css3 svg製作的點(diǎn)擊卡牌展開和收起動畫效果。
css3撲克牌展開折疊動畫特效是一款css3 svg製作的點(diǎn)擊卡牌展開和收起動畫效果。
<!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">點(diǎn)選 左側(cè) 卡</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" 填充 ="無" 填充規(guī)則 ="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" 填充 ="無" 填充規(guī)則 ="evenodd">
<矩形id="矩形-3" 描邊="#A68385" 變換="翻譯(10.035534, 10.071068) 旋轉(zhuǎn)(-315.000000) 平移(-10.035534, -10.071068) 平移(-10.035534, -10.071068) 平移(-13339738"寬度=“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" 填充 ="無" 填充規(guī)則 ="evenodd">
<矩形id="矩形-3" 描邊="#A68385" 變換="翻譯(10.035534, 10.071068) 旋轉(zhuǎn)(-315.000000) 平移(-10.035534, -10.071068) 平移(-10.035534, -10.071068) 平移(-13339738"寬度=“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" 填充 ="無" 填充規(guī)則 ="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" 填充 ="無" 填充規(guī)則 ="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" 填充 ="無" 填充規(guī)則 ="evenodd">
<路徑 d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.76301980107680010 , 7.631510) 旋轉(zhuǎn)( -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" 填充 ="無" 填充規(guī)則 ="evenodd">
<路徑 d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.76301980107680010 , 7.631510) 旋轉(zhuǎn)( -180.000000) 翻譯(-10.000000, -7.631510) ">
</g>
</svg>
</span>
<腳本類型=“text/javascript”src='js/jquery.min.js'></script>
<腳本類型=“text/javascript”src=“js/index.js”>
</body>