css3的撲克牌展開(kāi)折疊動(dòng)畫(huà)特效
css3撲克牌展開(kāi)折疊動(dòng)畫(huà)特效是一款css3 svg制作的點(diǎn)擊卡牌展開(kāi)和收起動(dòng)畫(huà)效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3撲克牌展開(kāi)折疊動(dòng)畫(huà)特效</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 頁(yè)" 筆劃 ="無(wú)" 筆畫(huà)寬度 ="1" 填充 ="無(wú)" 填充規(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 頁(yè)" 筆劃 ="無(wú)" 筆畫(huà)寬度 ="1" 填充 ="無(wú)" 填充規(guī)則 ="evenodd">
? ? ? ? ? ? ? ? ? <矩形 id="矩形-3" 描邊="#A68385" 變換="翻譯(10.035534, 10.071068) 旋轉(zhuǎn)(-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 頁(yè)" 筆劃 ="無(wú)" 筆劃寬度 ="1" 填充 ="無(wú)" 填充規(guī)則 ="evenodd">
? ? ? ? ? ? ? ? ? <矩形 id="矩形-3" 描邊="#A68385" 變換="翻譯(10.035534, 10.071068) 旋轉(zhuǎn)(-315.000000) 平移(-10.035534, -10.071068)" x="3.43933983" y="3.47487373" 寬度=“13.1923882”高度=“13.1923882”>
? ? ? ? ? ? ? </g>
? ? ? ? ? </svg>
? ? ? ? </span>
? ? ?
? ?
? ?
? ? ?
? ? ? ?
? ? ? ? ? 問(wèn)
? ? ? ? </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 頁(yè)" 筆劃 ="無(wú)" 筆劃寬度 ="1" 填充 ="無(wú)" 填充規(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>
? ? ?
? ? ?
? ? ? ?
? ? ? ? ? 問(wèn)
? ? ? ? </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 頁(yè)" 筆劃 ="無(wú)" 筆畫(huà)寬度 ="1" 填充 ="無(wú)" 填充規(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 頁(yè)" 筆劃 ="無(wú)" 筆畫(huà)寬度 ="1" 填充 ="無(wú)" 填充規(guī)則 ="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) 旋轉(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 頁(yè)" 筆劃 ="無(wú)" 筆劃寬度 ="1" 填充 ="無(wú)" 填充規(guī)則 ="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) 旋轉(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>