A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

az245369209

初级黑马

  • 黑马币:

  • 帖子:

  • 精华:

© az245369209 初级黑马   /  2016-9-8 00:01  /  2247 人查看  /  8 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>传智云课堂</title>
</head>
<body>
<html>
<head>
<title>CSS画梅花扑克牌</title>
<style>
.card { background-color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); float: left; height: 280px; margin: 0 15px 15px 0; position: relative; width: 200px; z-index: 2; }
.card .corner { line-height: 1; overflow: hidden; position: absolute; text-align: center; }
.card .corner span { display: block; font-size: 24px; font-weight: bold; }
.card .corner .number { font-size: 32px; height: 32px; line-height: 32px; }
.card .corner.top { left: 8px; top: 12px; }
.card .corner.bottom { bottom: 12px; right: 8px; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); }
.card .suit { font-size: 64px; font-weight: bold; height: 60px; line-height: 60px; overflow: hidden; position: absolute; text-align: center; width: 50px; }
.card .top_center { left: 76px; top: 24px; }
.card .bottom_center { bottom: 24px; left: 76px; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); }
.card .back { background-color: red; -webkit-transform: rotateY(180deg); }
</style>
<body>
<div class="card two">
       <div class="front">
         <div class="corner top">
           <span class="number">2</span>
           <span>♣</span>
         </div>
         <span class="suit top_center">♣</span>
         <span class="suit bottom_center">♣</span>
         <div class="corner bottom">
           <span class="number">2</span>
           <span>♣</span>
         </div>
       </div>
       <div class="back">
       </div>
</div>
</body>
</html>
       
</body>
</html>
就喜欢这种骚东西,

8 个回复

倒序浏览
66666666666666666666666666666
回复 使用道具 举报
效果不错,点个赞,最好有效果图
回复 使用道具 举报
没人顶吗?
回复 使用道具 举报
up  up  加油
回复 使用道具 举报
66666666666666666666666
回复 使用道具 举报
666666666666666
回复 使用道具 举报
给力人才
回复 使用道具 举报
Taoqun 初级黑马 2016-9-17 08:44:49
9#
不错啊,刚刚用sunline搞出了效果
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马