纯CSS实现扑克牌效果

所属分类：网络编程 / JavaScript 阅读数： 915

收藏 0赞 0分享

这也能用CSS来实现啊！为了演示方便，这里用JavaScript代码去控制了扑克牌的切换，挺不错的。

<!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>Playing Cards with CSS3!</title>   </head> <body> <ul><li><a title="Select Spades" href="#spades">&#9824;</a></li><li><a class="fire" title="Select Hearts" href="#hearts">&#9829;</a></li><li><a title="Select Clubs" href="#clubs">&#9827;</a></li><li><a class="fire" title="Select Diamonds" href="#diamonds">&#9830;</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>&#9824;</span><strong>&#9824;</strong><em>A</em>&#9824;</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>&#9829;</span><strong>&#9829;</strong><em>A</em>&#9829;</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>&#9827;</span><strong>&#9827;</strong><em>A</em>&#9827;</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>&#9830;</span><strong>&#9830;</strong><em>A</em>&#9830;</label><input id="cancel4" type="reset" name="diamond" value="cancel" checked="checked" /><label class="close" for="cancel4">Diamonds</label></fieldset> </form> <p>Select an option above to change the suit displayed!</p> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

更多精彩内容其他人还在看

纯CSS实现扑克牌效果

jQuery-1.9.1源码分析系列（十）事件系统之事件包装

javascript实现Email邮件显示与删除功能

JavaScript实现自动生成网页元素功能（按钮、文本等）

js实现索引图片切换效果

javascript实现动态统计图开发实例

超详细的javascript数组方法汇总

jQuery实现分隔条左右拖动功能

分享经典的JavaScript开发技巧

jquery实现select选择框内容左右移动代码分享

解决jquery插件：TypeError:$.browser is undefined报错的方法

网络赚钱

站长故事