CSS实现扑克牌!<br>body {background: #DDDDDD;オーバーフロー: 非表示; }<br>ボディ .fire { color: #FF0000; }<br>p {<br>背景: #FFFFFF;境界線: 1px 実線 #CCCCCC;<br>border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;<br>box-shadow: 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>font-size: 25px; text-align: 中央;<br>高さ: 30px;幅: 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>border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;<br>box-shadow: 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>font-size: 50px;<br>margin: 0 ;パディング: 0 15px;位置: 絶対;右: 20ピクセル;上: 15ピクセル; z-index: 99;<br>}<br>ul li {<br>display: inline;<br>list-style-type: none;<br>}<br>ul li a {<br>color: #000000;<br>display: block;フロート: 左;パディング: 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>border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;<br>box-shadow: 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>高さ: 360px;トップ: 50%;マージントップ: -180px;幅: 260ピクセル;左: 50%。マージン左: -130px; z インデックス: 9;<br>カーソル: ポインタ;フォントサイズ: 50px;テキスト装飾: なし;<br>パディング: 15px 0 0 25px;位置: 絶対;<br>}<br>strong {<br>font-size: 250px;<br>位置: 絶対;左: 50%。トップ: 50%; margin-top: -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>表示: ブロック; margin-bottom: -15px;<br>}<br>ラベル スパン {<br>-webkit-transform:rotate(-180deg); -moz-transform: 回転(-180度); -o-transform: 回転(-180度);フィルター: </p> <p><br>progid:DXImageTransform.Microsoft.BasicImage(rotation=2);<br>位置: 絶対;下: 15ピクセル; right: 25px;<br>}<br>#spades強い { 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>fieldset { 表示: なし; }<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-index: 1;<br>text-indent: -999em;<br>}<br>@-webkit-keyframes スケーラー { from { -webkit-transform:scale(0); } から { -webkit-transform:scale(1); } }<br>@-webkit-keyframes エフェクトx {<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"); direct();<br>for( var x=0; x }<br>function direct() {<br>/*@cc_on @if (@_jscript_version > 5.6)<br>var counted = document.getElementsByTagName("fieldset");<br>for( var x=0; x document.getElementById(location.hash.substr(1)).style.display = "block";<br>@end @*/<br>}<br>window.onload=bootup;<br>< /script><br></head><br><body><br><ul><li><a title="スペードを選択" href="#spades">♠</a>< ;/li><li><a class="fire" title="ハートを選択" href="#hearts">♥</a></li><li>< a title="クラブを選択" </p> <p><br />href="#clubs">♣</a></li><li><a class="fire" title="ダイヤモンドを選択" href="#diamonds">♦</a></li></ul><br><form action=""><br><fieldset id="spades">< input class="card" id="spade" type="radio" name="spade" value="spade" /><label class="base" for="spade" title="これがエース </p>スペードの <p><br />!"><span><em>A</em>♠</span><strong>♠</strong><em>A</ em>♠</label><input id="cancel1" type="reset" name="spade" value="cancel" </p> <p><br />checked="チェック済み" /><label class= "close" for="cancel1">スペード</label></fieldset><br><fieldset id="ハート"><input class="card" id="heart" type="radio" name ="heart" value="heart" /><label class="base fire" for="heart" title="これがハートのエース </p> <p><br />です!"><span><em> A</em>♥</span><strong>♥</strong><em>A</em>♥</label><input id= "cancel2" type="reset" name="heart" value="cancel" </p> <p><br />checked="checked" /><label class="close" for="cancel2">ハート</label>< ;/fieldset><br><fieldset id="clubs"><input class="card" id="club" type="radio" name="club" value="club" /><ラベル クラス="base" for="club" title="これが </p> のエースです<p><br />クラブ!"><span><em>A</em>♣</span><strong>♣</strong><em>A</em> ;♣</label><input id="cancel3" type="reset" name="club" value="cancel" </p> <p><br />checked="チェック済み" /><label class=" close" for="cancel3">クラブ</label></fieldset><br><fieldset id="ダイヤモンド"><input class="card" id="diamond" type="radio" name= "diamond" value="diamond" /><label class="base fire" for="diamond" </p> <p><br />title="これがダイヤのエースです!"><span><em>A< ;/em>♦</span><strong>♦</strong><em>A</em>♦</label><input id=" cancel4" type="reset" </p> <p><br />name="diamond" value="cancel" selected="checked" /><label class="close" for="cancel4">ダイヤモンド</label>< /fieldset><br></form><br><div>http://www.999jiijiu.com/</div><br></body> <br></html></p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
