CSS实现扑克牌! <br> ボディ { 背景: #DDDDDD;オーバーフロー: 非表示; } <br> ボディ .fire { color: #FF0000; } <br> p { <br>背景: #FFFFFF;境界線: 1px 実線 #CCCCCC; <br> ボーダー半径: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; <br> ボックスシャドウ: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; <br> フィルター: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5); <br> フォントサイズ: 25px;テキスト整列: 中央; <br>高さ: 30ピクセル;幅: 600ピクセル;マージン: -35px -300px;パディング: 10px 15px;位置: 絶対;下: 50ピクセル;左: 50%。 z インデックス: 99; <br> } <br> ul { <br> 背景: #FFFFFF;境界線: 1px 実線 #CCCCCC; <br> 背景:-moz-linear-gradient(top, #FFFFFF, #DDDDDD);背景:-webkit-gradient(linear,0 0, 0 100%, from(#FFFFFF), to(#DDDDDD)); <br> ボーダー半径: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; <br> ボックスシャドウ: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; <br> フィルター: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5); <br> フォントサイズ: 50px; <br>マージン: 0;パディング: 0 15px;位置: 絶対;右: 20ピクセル;上: 15ピクセル; z インデックス: 99; <br> } <br> ul li { <br> 表示: インライン; <br> リストスタイルタイプ: なし; <br> } <br> ul li a { <br> カラー: #000000; <br> 表示: ブロック;フロート: 左;パディング: 0 10px; <br> テキスト装飾: なし。 <br> } <br> .base { <br> 背景: #FFFFFF;境界線: 1px 実線 #CCCCCC;色: #000000; <br> 背景:-moz-linear-gradient(top, #FFFFFF, #DDDDDD);背景:-webkit-gradient(linear,0 0, 0 100%, from(#FFFFFF), to(#DDDDDD)); <br> ボーダー半径: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; <br> ボックスシャドウ: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; <br> フィルター: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5); <br>高さ: 360ピクセル;トップ: 50%;マージントップ: -180px;幅: 260ピクセル;左: 50%。マージン左: -130px; z インデックス: 9; <br> カーソル: ポインタ。フォントサイズ: 50px;テキスト装飾: なし。 <br> パディング: 15px 0 0 25px;位置: 絶対; <br> } <br>強い { <br> font-size: 250px; <br>位置: 絶対的;左: 50%。トップ: 50%;マージントップ: -160px; <br> -webkit-mask-image: -webkit-gradient(linear, 左上, 左下, from(rgba(0,0,0,0.4)), to(rgba(0,0,0,1))); <br> } <br> em { <br> font-size: 40px;フォントスタイル: 通常; <br> 表示: ブロック;マージンボトム: -15px; <br> } <br> ラベル スパン { <br> -webkit-transform:rotate(-180deg); -moz-transform: 回転(-180度); -o-transform: 回転(-180度);フィルター: <br> <br> <br> progid:DXImageTransform.Microsoft.BasicImage(rotation=2); <br>位置: 絶対的;下: 15ピクセル;右: 25ピクセル; <br> } <br> #スペード強い { margin-left: -68px; #spades em {マージン左: 0; } <br> #hearts強い { margin-left: -70px; #hearts em { margin-left: 1px; } <br> #クラブ強い { margin-left: -80px; #clubs em { margin-left: 3px; } <br> #ダイヤモンド強い { margin-left: -60px; #diamonds em { margin-left: -2px; } <br> フィールドセット { 表示: なし; } <br> フィールドセット:ターゲット { 表示: ブロック; } <br> fieldset:target .card+label { -webkit-animation-name:scaler; -webkit-animation-duration: 1.75 秒; -webkit-animation-iteration-count: 1; } <br> fieldset:target .card:checked+label { -webkit-animation-name:effectx; -webkit-animation-duration: 3 秒; -webkit-transform: スケール(0); } <br> .close { <br> 背景: #DDDDDD;カーソル: デフォルト; <br>左: 0;トップ: 0;位置: 絶対;高さ: 100%;幅: 100%; z インデックス: 1; <br> テキストインデント: -999em; <br> } <br> @-webkit-keyframes スケーラー { from { -webkit-transform:scale(0); } から { -webkit-transform:scale(1); } } <br> @-webkit-keyframes effectx { <br> from { -webkit-transform:rotateX(0deg); <br> to { -webkit-transform:scale3d(1.2, 1.2, 1.2)rotateX(-90deg)translateZ(500px)rotate(180deg); -webkit-animation-duration: 30 秒; } <br> } <br> <br> function bootup(){ <br> if (location.hash == "") { location.hash="#spades"; var tds = document.getElementsByTagName("a");直接（）; <br>for( var x=0; x < tds.length; x++ ){tds[x].onclick = function(){setTimeout(direct, 1);};} <br /> } <br /> function direct(){ <br /> /*@ cc_on @if (@_jscript_version > 5.6) <br> var counted = document.getElementsByTagName("fieldset"); <br> for( var x=0; x < counted.length; x++ ){ counted[x].style.display = "none" } <br /> document.getElementById(location.hash.substr(1)).style.display = "ブロック"; <br /> @end @*/ <br /> } <br /> window.onload=bootup; <br /> ♠♥ href="#クラブ">♣♦< /a> <フォームアクション=""> A♠♠ ;A♠ Checked="checked" />スペード A♥ 9829;A♥ selected="チェック済み" />ハート A♣♣ ;A♣ Checked="checked" />クラブ title="これがダイヤのエースです!">A♦ 9830;A♦ name="diamond" value="cancel " selected="checked" />ダイヤモンド http://www.999jiujiu.com/
