css实现扑克牌切换效果-JS特效-爱易网页

css实现扑克牌切换效果

日期：2014-05-18　浏览次数：20500 次

以下是程序代码

<!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: #DD</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="2405">下一篇：js脚本制作的连线小游戏</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34259' title='诺基亚若没加入微软，只不过是另一个HTC而已' target="_blank">
                        诺基亚若没加入微软，只不过是另一个HTC而已</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34249' title='美剧讲硅谷创业者：远不及现实荒诞？' target="_blank">
                        美剧讲硅谷创业者：远不及现实荒诞？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6863' title='搜房网遭遇做空 利益保送成“猎杀”焦点' target="_blank">
                        搜房网遭遇做空 利益保送成“猎杀”焦点</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34388' title='看蜗牛如何放水养鱼，盘活生态系统' target="_blank">
                        看蜗牛如何放水养鱼，盘活生态系统</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34227' title='曹国伟：微博将关注Facebook和Twitter' target="_blank">
                        曹国伟：微博将关注Facebook和Twitter</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34165' title='魅族黄章惹怒芙蓉姐姐 将跨界推女神手机' target="_blank">
                        魅族黄章惹怒芙蓉姐姐 将跨界推女神手机</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34313' title='京东微信入口战略能否助力618大促创流量巅峰' target="_blank">
                        京东微信入口战略能否助力618大促创流量巅峰</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34343' title='易迅大众点评缩水执行“七天后悔权”被约谈' target="_blank">
                        易迅大众点评缩水执行“七天后悔权”被约谈</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10846' title='机器人进一步取代人类：将进军白领任务' target="_blank">
                        机器人进一步取代人类：将进军白领任务</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2026 爱易网页 当前在线：797人　
        网站在16时5分51秒内访问总人数：155358人
    当前 16.65%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>