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;

這樣就大功告成了