纯CSS实现扑克牌效果，太牛了吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>CSS实现扑克牌!</title>

<style type="text/css">

body { background: #DDDDDD; overflow: hidden; }

body .fire { color: #FF0000; }

p {

background: #FFFFFF; border: 1px solid #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;

filter: progid:DXImageTransform.Microsoft.Shadow(color=‘#CCCCCC‘, Direction=135, Strength=5);

font-size: 25px; text-align: center;

height: 30px; width: 600px; margin: -35px -300px; padding: 10px 15px; position: absolute; bottom: 50px; left: 50%; z-index: 99;

}

ul {

background: #FFFFFF; border: 1px solid #CCCCCC;

background:-moz-linear-gradient(top, #FFFFFF, #DDDDDD); background:-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;

filter: progid:DXImageTransform.Microsoft.Shadow(color=‘#CCCCCC‘, Direction=135, Strength=5);

font-size: 50px;

margin: 0; padding: 0 15px; position: absolute; right: 20px; top: 15px; z-index: 99;

}

ul li {

display: inline;

list-style-type: none;

}

ul li a {

color: #000000;

display: block; float: left; padding: 0 10px;

text-decoration: none;

}

.base {

background: #FFFFFF; border: 1px solid #CCCCCC; color: #000000;

background:-moz-linear-gradient(top, #FFFFFF, #DDDDDD); background:-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;

filter: progid:DXImageTransform.Microsoft.Shadow(color=‘#CCCCCC‘, Direction=135, Strength=5);

height: 360px; top: 50%; margin-top: -180px; width: 260px; left: 50%; margin-left: -130px; z-index: 9;

cursor: pointer; font-size: 50px; text-decoration: none;

padding: 15px 0 0 25px; position: absolute;

}

strong {

font-size: 250px;

position: absolute; left: 50%; top: 50%; margin-top: -160px;

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(0,0,0,1)));

}

em {

font-size: 40px; font-style: normal;

display: block; margin-bottom: -15px;

}

label span {

-webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); filter:

progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

position: absolute; bottom: 15px; right: 25px;

}

#spades strong { margin-left: -68px; } #spades em { margin-left: 0; }

#hearts strong { margin-left: -70px; } #hearts em { margin-left: 1px; }

#clubs strong { margin-left: -80px; } #clubs em { margin-left: 3px; }

#diamonds strong { margin-left: -60px; } #diamonds em { margin-left: -2px; }

fieldset { display: none; }

fieldset:target { display: block; }

fieldset:target .card+label { -webkit-animation-name: scaler; -webkit-animation-duration: 1.75s; -webkit-animation-iteration-count: 1; }

fieldset:target .card:checked+label { -webkit-animation-name: effectx; -webkit-animation-duration: 3s; -webkit-transform: scale(0); }

.close {

background: #DDDDDD; cursor: default;

left: 0; top: 0; position: absolute; height: 100%; width: 100%; z-index: 1;

text-indent: -999em;

}

@-webkit-keyframes scaler { from { -webkit-transform: scale(0); } to { -webkit-transform: scale(1); } }

@-webkit-keyframes effectx {

from { -webkit-transform: rotateX(0deg); }

to { -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(500px) rotate(180deg); -webkit-animation-duration: 30s; }

}

</style>

<script type="text/javascript">

function bootup(){

if (location.hash == "") { location.hash="#spades"; } var tds = document.getElementsByTagName("a"); direct();

for( var x=0; x < tds.length; x++ ){tds[x].onclick = function(){setTimeout(direct, 1);};}

}

function direct(){

/*@cc_on @if (@_jscript_version > 5.6)

var counted = document.getElementsByTagName("fieldset");

for( var x=0; x < counted.length; x++ ){ counted[x].style.display = "none" }

document.getElementById(location.hash.substr(1)).style.display = "block";

@end @*/

}

window.onload=bootup;

</script>

</head>

<body>

<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>A</em>♠</span><strong>♠</strong><em>A</em>♠</label><input id="cancel1" type="reset" name="spade" value="cancel"

checked="checked" /><label class="close" for="cancel1">Spades</label></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>A</em>♥</span><strong>♥</strong><em>A</em>♥</label><input id="cancel2" type="reset" name="heart" value="cancel"

checked="checked" /><label class="close" for="cancel2">Hearts</label></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>A</em>♣</span><strong>♣</strong><em>A</em>♣</label><input id="cancel3" type="reset" name="club" value="cancel"

checked="checked" /><label class="close" for="cancel3">Clubs</label></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>A</em>♦</span><strong>♦</strong><em>A</em>♦</label><input id="cancel4" type="reset"

name="diamond" value="cancel" checked="checked" /><label class="close" for="cancel4">Diamonds</label></fieldset>

</form>

<p><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></p>

</body>

</html>

时间： 2024-10-21 17:49:38

纯CSS实现扑克牌效果，太牛了吧的相关文章

纯CSS实现扑克牌效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="con

HTML5 CSS3专题 纯CSS打造相册效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下. 效果图: 效果是不是还是很不错的,最主要的是没有使用一行js,这才是亮点. 先看html文件: <body> <div id="gallery"> <h1>纯CSS3相册效果&l

纯CSS实现圆角效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

利用target的特性，可以实现纯css的tab效果切换

基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1" class="tab">This is a tab1</div> :target{ color:red; } 但点击a标签的时候,连接到id是tab1的div,对这个div起作用color:red; 如: <a href="#tab"

纯css实现计数器效果

先上效果图: 点击选项框,下面的数字动态显示总个数,该效果由纯css实现.怎么实现的呢?主要就是靠css中的计数器counter. css的counter-reset属性可以设置一个计数器,并通过counter-increment属性实现递增效果.具体可以看代码: 1 html{ 2 counter-reset:section; 3 } 4 input:checked{ 5 counter-increment:section; 6 } 7 .counter:after{ 8 以下菜系,你喜欢哪些

纯css实现打字效果

概述 很早以前就在别人的博客上面看到打字动画了,觉得非常炫酷,以为是用js做的,找了半天也没找到js在哪里.今天看<css揭秘>,碰巧看到书上打字动画的实现了,而且是纯css实现的!我参考这本书把代码记录下来,供以后开发时参考,相信对其他人也有用. 代码 书上的css代码是这样的: @keyframes typing { from { width: 0 } /* 从左到右的动画 */ } @keyframes caret { 50% { border-color: transparent; }

纯css做幻灯片效果

css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯CSS做幻灯片</title> </head> <style> @keyframes slide { 0% { backgroun

IE7,8纯css实现圆角效果

众所周知,IE7,8不支持border-radius效果.但我们同样有办法用css实现这个效果,方法就是用border来模拟. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ pos

CSS Card:纯css制作扑克牌

制作扑克的html代码 第一步是制作扑克的html,我的原则是用最少最简洁的代码,不引用任何图片,也许你认为不可能,但是你还是乖乖的看我是如何工作的吧. 建立一个div,赋予两个class属性:cardand suitdiamonds .代码 <div class="card suitdiamonds"> </div> 往这个div中添加卡片的内容,只需要一个包含字母A的段落标记<P>就可以了. .代码 <div class="car