这里只给出梅花2的CSS代码和实现:如果想了解更多请访问IT EXPRESS这个站点。
CSS代码:
.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); }
HTML代码:
<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>
分享到:
相关推荐
没有图片和脚本代码 纯CSS+XHTML实现一幅扑克牌的制作方法 有想学XHTML+CSS高级技巧的朋友可以研究一下
两款纯css3实现的动画菜单
微信小程序录音时需要动画,参照网上的安全写了一个,采用纯css的方式动画实现
纯CSS3实现百叶窗动画效果 纯CSS3实现百叶窗动画效果
纯CSS实现的脚踏自行车动态版,非常逼真,会动,只用了CSS来绘画,没有一张图片,车轮,脚踏,车链条,牙盘都会跟着旋转
jQuery css3扑克洗牌,扑克牌翻转效果
jQuery css3扑克洗牌和扑克牌翻转效果代码 jQuery css3扑克洗牌和扑克牌翻转效果代码 jQuery css3扑克洗牌和扑克牌翻转效果代码
这是一款基于jQuery+CSS3实现的扑克洗牌和扑克牌翻转动画特效,jQuery卡片翻转效果代码。
纯CSS3模拟风车转动效果纯css3云彩动画效果纯css3制作出来的狐狸尾巴燃烧...扑克牌切换图片效果又一款纯CSS3立体式3D鼠标悬停效果又一款简单漂亮的CSS3图片悬停遮罩效果多款炫酷鼠标悬停图文动画效果css3放大镜动画效果...
纯CSS实现的表格滚动条效果,非常美观和实用。代码简短清晰。
纯CSS3实现汽车行驶动画是一款纯css制作的额汽车行驶特效
这是一款使用纯css3制作的类似于android滑动按钮的左右滑动按钮效果。这个css3左右滑动按钮可以使用鼠标来控制开关滑动,按钮开关滑动时带有很炫的动画和渐变效果。
这是一款基于css3 transform属性实现的鼠标悬停扑克牌图片翻转动画特效,两张图片翻转切换展示效果。
消息列表向上滚动,不使用js操作,纯css3实现向上无缝滚动。
纯CSS实现图片美化带边框3D效果鼠标经过旋转堆叠特效动画代码下载。
【动画消消乐|CSS】083.纯CSS实现卡通齿轮效果
纯CSS实现扑克牌效果,太牛了吧?开始我还以为是一张图片呢,后来发现代码里没有调用任何图片,顿时有点诧异,CSS果然很牛,或是作者水平比较牛?
纯css实现的红色自行车效果是一款利用纯CSS3实现的自行车动画,这个自行车是可以运动的,就像有一个人在骑车一样,车轮也会转动,非常逼真的一款动画效果。
纯CSS控制实现的拉菜单效果,反复删改,只留下了核心代码,在最大程度上为需要的人留下了空间