CSS3之纸牌展开

纸牌展开非常简单，只需将多张纸牌重叠，然后鼠标移到纸牌上就进行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;

这样就大功告成了

转载于:https://my.oschina.net/u/4069817/blog/3040162