ポーカー効果を実現する純粋な CSS_html/css_WEB-ITnose

CSS实现扑克牌! body {background: #DDDDDD;オーバーフロー: 非表示; } ボディ .fire { color: #FF0000; } p { 背景: #FFFFFF;境界線: 1px 実線 #CCCCCC; border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; フィルター: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5); font-size: 25px; text-align: 中央; 高さ: 30px;幅: 600ピクセル;マージン: -35px -300px;パディング: 10px 15px;位置: 絶対;下: 50ピクセル;左: 50%。 z インデックス: 99; } ul { 背景: #FFFFFF;ボーダー: 1px ソリッド #CCCCCC; 背景:-moz-linear-gradient(top, #FFFFFF, #DDDDDD);背景:-webkit-gradient(linear,0 0, 0 100%, from(#FFFFFF), to(#DDDDDD)); border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; フィルター: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5); font-size: 50px; margin: 0 ;パディング: 0 15px;位置: 絶対;右: 20ピクセル;上: 15ピクセル; z-index: 99; } ul li { display: inline; list-style-type: none; } ul li a { color: #000000; display: block;フロート: 左;パディング: 0 10px; テキスト装飾: なし; } .base { 背景: #FFFFFF;境界線: 1px 実線 #CCCCCC;カラー: #000000; 背景:-moz-linear-gradient(top, #FFFFFF, #DDDDDD);背景:-webkit-gradient(linear,0 0, 0 100%, from(#FFFFFF), to(#DDDDDD)); border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; フィルター: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5); 高さ: 360px;トップ: 50%;マージントップ: -180px;幅: 260ピクセル;左: 50%。マージン左: -130px; z インデックス: 9; カーソル: ポインタ;フォントサイズ: 50px;テキスト装飾: なし; パディング: 15px 0 0 25px;位置: 絶対; } strong { font-size: 250px; 位置: 絶対;左: 50%。トップ: 50%; margin-top: -160px; -webkit-mask-image: -webkit-gradient(linear, 左上, 左下, from(rgba(0,0,0,0.4)), to(rgba(0,0, 0,1))); } em { font-size: 40px;フォント スタイル: 通常; 表示: ブロック; margin-bottom: -15px; } ラベル スパン { -webkit-transform:rotate(-180deg); -moz-transform: 回転(-180度); -o-transform: 回転(-180度);フィルター:

progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 位置: 絶対;下: 15ピクセル; right: 25px; } #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; } fieldset { 表示: なし; } フィールドセット:ターゲット {表示:ブロック; } fieldset:target .card+label { -webkit-animation-name:scaler; -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); } .close { 背景: #DDDDDD;カーソル: デフォルト; 左: 0;トップ: 0;位置: 絶対;高さ: 100%;幅: 100%; z-index: 1; text-indent: -999em; } @-webkit-keyframes スケーラー { from { -webkit-transform:scale(0); } から { -webkit-transform:scale(1); } } @-webkit-keyframes エフェクトx { from { -webkit-transform:rotateX(0deg); } to { -webkit-transform:scale3d(1.2, 1.2, 1.2)rotateX(-90deg)translateZ(500px)rotate(180deg); -webkit-animation-duration: 30 秒; } } function bootup(){ if (location.hash == "") { location.hash="#spades"; var tds = document.getElementsByTagName("a"); direct(); for( var x=0; x } function direct() { /*@cc_on @if (@_jscript_version > 5.6) var counted = document.getElementsByTagName("fieldset"); for( var x=0; x document.getElementById(location.hash.substr(1)).style.display = "block"; @end @*/ } window.onload=bootup; ♠ ♥ < a title="クラブを選択"

href="#clubs">♣ ♦ <label class="base" for="spade" title="これがエース

スペードの !"> A ♠ ♠ A ♠ <input id="cancel1" type="reset" name="spade" value="cancel"

checked="チェック済み" /> スペード <label class="base fire" for="heart" title="これがハートのエース

です!"> A ♥ ♥ A ♥ <input id= "cancel2" type="reset" name="heart" value="cancel"

checked="checked" /> ハート <ラベル クラス="base" for="club" title="これが

のエースです クラブ!"> A ♣ ♣ A <input id="cancel3" type="reset" name="club" value="cancel"

checked="チェック済み" /> クラブ <label class="base fire" for="diamond"

title="これがダイヤのエースです!"> A ♦ ♦ A ♦ <input id=" cancel4" type="reset"

name="diamond" value="cancel" selected="checked" /> ダイヤモンド http://www.999jiijiu.com/