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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

az245369209

初级黑马

  • 黑马币:

  • 帖子:

  • 精华:

© az245369209 初级黑马   /  2016-9-8 00:01  /  2104 人查看  /  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 个回复

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