ポーカー効果を実現するための純粋な CSS_レイアウトとレイヤー

これは CSS を使用して実現することもできます。デモンストレーションの便宜上、ここでは JavaScript コードを使用してトランプの切り替えを制御していますが、これは非常に優れています。

<meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>CSS3 を使用したトランプ!</title> <style type="text/css"> ボディ { 背景: #DDDDDD;オーバーフロー: 非表示; } ボディ .fire { カラー: #FF0000; } p { 背景: #FFFFFF;境界線: 1px 実線 #CCCCCC; 境界半径: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; ボックスシャドウ: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; フィルター: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC'、方向=135、強度=5); フォントサイズ: 25px;テキスト整列: 中央; 高さ: 30ピクセル;幅: 600ピクセル;マージン: -35px -300px;パディング: 10px 15px;位置: 絶対;下: 50ピクセル;左: 50%。 z インデックス: 99; } ウル { 背景: #FFFFFF;境界線: 1px 実線 #CCCCCC; 背景:-moz-linear-gradient(top, #FFFFFF, #DDDDDD);背景:-webkit-gradient(linear,0 0, 0 100%, from(#FFFFFF), to(#DDDDDD)); 境界半径: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; ボックスシャドウ: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; フィルター: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC'、方向=135、強度=5); フォントサイズ: 50px; マージン: 0;パディング: 0 15px;位置: 絶対;右: 20ピクセル;上: 15ピクセル; z インデックス: 99; } ウルリ{ 表示: インライン; リストスタイルタイプ: なし; } ウル・リ・ア { 色: #000000; 表示: ブロック;フロート: 左;パディング: 0 10px; テキスト装飾: なし。 } .base { 背景: #FFFFFF;境界線: 1px 実線 #CCCCCC;色: #000000; 背景:-moz-linear-gradient(top, #FFFFFF, #DDDDDD);背景:-webkit-gradient(linear,0 0, 0 100%, from(#FFFFFF), to(#DDDDDD)); 境界半径: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; ボックスシャドウ: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; フィルター: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC'、方向=135、強度=5); 高さ: 360ピクセル;トップ: 50%;マージントップ: -180px;幅: 260ピクセル;左: 50%。マージン左: -130px; z インデックス: 9; カーソル: ポインタ;フォントサイズ: 50px;テキスト装飾: なし。 パディング: 15px 0 0 25px;位置: 絶対; } 強い { フォントサイズ: 250px; 位置: 絶対;左: 50%。トップ: 50%;マージントップ: -160px; -webkit-mask-image: -webkit-gradient(linear, 左上, 左下, from(rgba(0,0,0,0.4)), to(rgba(0,0,0,1))); } エム{ フォントサイズ: 40px;フォントスタイル: 通常; 表示: ブロック;マージンボトム: -15px; } ラベルスパン{ -webkit-transform: 回転(-180度); -moz-transform: 回転(-180度); -o-transform: 回転(-180度);フィルター: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 位置: 絶対;下: 15ピクセル;右: 25ピクセル; } #spades 強い { margin-left: -68px; #spades em {マージン左: 0; } #hearts 強い { margin-left: -70px; #hearts em { margin-left: 1px; } #クラブ強い { margin-left: -80px; #clubs em { margin-left: 3px; } #ダイヤモンド強い { margin-left: -60px; #diamonds em { margin-left: -2px; } フィールドセット { 表示: なし; } フィールドセット:ターゲット { 表示: ブロック; } フィールドセット:ターゲット .カード ラベル { -webkit-アニメーション名: スケーラー; -webkit-animation-duration: 1.75 秒; -webkit-animation-iteration-count: 1; } fieldset:target .card:checked label { -webkit-animation-name:effectx; -webkit-animation-duration: 3 秒; -webkit-transform: スケール(0); } 。近い { 背景: #DDDDDD;カーソル: デフォルト; 左: 0;トップ: 0;位置: 絶対;高さ: 100%;幅: 100%; z インデックス: 1; テキストインデント: -999em; } @-webkit-keyframes スケーラー { from { -webkit-transform:scale(0); } から { -webkit-transform:scale(1); } } @-webkit-keyframes エフェクト { { -webkit-transform: 回転 X(0 度); から} { -webkit-transform:scale3d(1.2, 1.2, 1.2) 回転 X(-90 度) 平行移動 Z(500 ピクセル) 回転(180 度); -webkit-animation-duration: 30 秒; } }</style> <ul> <li> <a title="Select Spades" href="#spades"></a>♠</li> <li> <a class="fire" title="Select Hearts" href="#hearts"></a>♥</li> <li> <a title="Select Clubs" href="#clubs"></a>♣</li> <li> <a class="fire" title="Select Diamonds" href="#diamonds"></a>♦</li> </ul> <form action=""> <fieldset id="spades"> <input class="card" id="spade" type="radio" name="spade" value="spade"><label class="base" for="spade" title="This is the Ace of Spades!"><span><em></em>A</span>♠<strong></strong>♠<em></em>A</label>♠<input id="cancel1" type="reset" name="spade" value="cancel" checked><label class="close" for="cancel1"></label>Spades</fieldset> <fieldset id="hearts"> <input class="card" id="heart" type="radio" name="heart" value="heart"><label class="base fire" for="heart" title="This is the Ace of Hearts!"><span><em></em>A</span>♥<strong></strong>♥<em></em>A</label>♥<input id="cancel2" type="reset" name="heart" value="cancel" checked><label class="close" for="cancel2"></label>Hearts</fieldset> <fieldset id="clubs"> <input class="card" id="club" type="radio" name="club" value="club"><label class="base" for="club" title="This is the Ace of Clubs!"><span><em></em>A</span>♣<strong></strong>♣<em></em>A</label>♣<input id="cancel3" type="reset" name="club" value="cancel" checked><label class="close" for="cancel3"></label>Clubs</fieldset> <fieldset id="diamonds"> <input class="card" id="diamond" type="radio" name="diamond" value="diamond"><label class="base fire" for="diamond" title="This is the Ace of Diamonds!"><span><em></em>A</span>♦<strong></strong>♦<em></em>A</label>♦<input id="cancel4" type="reset" name="diamond" value="cancel" checked><label class="close" for="cancel4"></label>Diamonds</fieldset> </form> <p> </p>Select an option above to change the suit displayed!
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]