纯CSS实现扑克牌效果

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

收藏 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实现扑克牌效果

JavaScript this关键字指向常用情况解析

Vue-cli打包后如何本地查看的操作

vue cli 3.0通用打包配置代码,不分一二级目录

JavaScript事件循环及宏任务微任务原理解析

关于vue-cli3打包代码后白屏的解决方案

vue打包静态资源后显示空白及static文件路径报错的解决

vue-cli3访问public文件夹静态资源报错的解决方式

JS继承实现方法及优缺点详解

vue或react项目生产环境去掉console.log的操作

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

网络赚钱

站长故事