纸牌展开非常简单,只需将多张纸牌重叠,然后鼠标移到纸牌上就进行transform就行了,废话不多说,下面开始代码:
首先 创建div放13个p标签,p标签相当于纸牌
<div id="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
</div>
对应的CSS
#box{
width: 500px;
height: 300px;
border-bottom: 4px black solid;
margin-left: 50px;
margin-top: 100px;
position: relative;
}
#box p{
width: 100px;
height: 200px;
border: 1px #0000FF solid;
position: absolute;
margin-left: 200px;
box-shadow: 3px 3px 5px #000;
}
然后再给每个p标签添加背景颜色
#box p:nth-of-type(13),p:nth-of-type(1){
background-color: red;
opacity: 1;
}
#box p:nth-of-type(2), p:nth-of-type(12){
background-color: yellow;
}
#box p:nth-of-type(3), p:nth-of-type(11){
background-color: yellowgreen;
}
#box p:nth-of-type(4), p:nth-of-type(10){
background-color: greenyellow;
}
#box p:nth-of-type(5), p:nth-of-type(9){
background-color: seagreen;
}
#box p:nth-of-type(6), p:nth-of-type(8){
background-color: royalblue;
}
#box p:nth-of-type(7){
background-color: #FFA500;
}
效果:
接下来要实现的是鼠标放上去进行动画效果,这里用到的知识点是:
:hover(悬停选择器)悬停在鼠标移到链接上时添加的特殊样式。
#box:hover p{
opacity: 1;
box-shadow: 0px 0px 0px #000;
}
#box:hover p:nth-of-type(8){
transform: rotate(15deg);
}
#box:hover p:nth-of-type(9){
transform: rotate(30deg);
}
#box:hover p:nth-of-type(10){
transform: rotate(45deg);
}
#box:hover p:nth-of-type(11){
transform: rotate(60deg);
}
#box:hover p:nth-of-type(12){
transform: rotate(75deg);
}
#box:hover p:nth-of-type(13){
transform: rotate(90deg);
}
#box:hover p:nth-of-type(6){
transform: rotate(-15deg);
}
#box:hover p:nth-of-type(5){
transform: rotate(-30deg);
}
#box:hover p:nth-of-type(4){
transform: rotate(-45deg);
}
#box:hover p:nth-of-type(3){
transform: rotate(-60deg);
}
#box:hover p:nth-of-type(2){
transform: rotate(-75deg);
}
#box:hover p:nth-of-type(1){
transform: rotate(-90deg);
}
设置旋转的原点:在#box p{}添加 transform-origin: 50px 200px;
设置动画过渡 : 在#box p{}添加 transition: all 1s linear;
这样就大功告成了