您的位置：首页 > Web前端 > CSS

【笔记】利用css3特性实现扑克效果

2015-10-08 18:02 811 查看

效果图

初始状态

鼠标滑到上面时

html文件：

<html>

<head>
<title>HTML5 AND CSS3</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body >

<div class="header">利用CSS3特性实现扑克效果</div>

<div class="contain">
<div class="book book0">8</div>
<div class="book book1">9</div>
<div class="book book2">10</div>
<div class="book book3">J</div>
<div class="book book4">Q</div>
<div class="book book5">K</div>
</div>
</body>
</html>

css文件：

.header{
width: 800px;
height: 100px;
padding-top:50px;
font-size:25px;
margin: auto;
text-align: center;
}

.contain{
position: relative;
top: 200px;
left: 50%;
width: 350px;
height: 220px;
margin-left: -175px;
}

.book{
position: absolute;
width: 119px;
height: 159px;
padding: 5px;
border-radius: 5px;
box-shadow: 3px 4px 17px #555;
transition: all 1s;
-webkit-transition: all 1s;
}

.book0 {
left: 0;
top: 0;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
background: #ff4c8e;
}

.book1 {
left: 0;
top: 0;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
background: #f4a60e;
}

.book2 {
left: 0;
top: 0;
background: #99bc2c;
}

.book3 {
left: 0;
top: 0;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
background: #44c1f1;
}

.book4 {
left: 0;
top: 0;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
background: #8f71ad;
}

.book5 {
left: 0;
top: 0;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
background: #fefefe;
}

.contain:hover .book0{
left: 0;
top: 0;
transform: rotate(-21deg);
-webkit-transform: rotate(-21deg);
transition: all 1s;
-webkit-transition: all 1s;
}

.contain:hover .book1{
left: 40;
top: -10;
transform: rotate(-9deg);
-webkit-transform: rotate(-9deg);
transition: all 1s;
-webkit-transition: all 1s;
}

.contain:hover .book2{
left: 80;
top: -10;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transition: all 1s;
-webkit-transition: all 1s;
}

.contain:hover .book3{
left: 120;
top: 0;
transform: rotate(11deg);
-webkit-transform: rotate(11deg);
transition: all 1s;
-webkit-transition: all 1s;
}

.contain:hover .book4{
left: 160;
top: 15;
transform: rotate(19deg);
-webkit-transform: rotate(19deg);
transition: all 1s;
-webkit-transition: all 1s;
}

.contain:hover .book5{
left: 186;
top: 27;
transform: rotate(35deg);
-webkit-transform: rotate(35deg);
transition: all 1s;
-webkit-transition: all 1s;
}

参考博客点击访问梁成妹的博客

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航