今天分享一个折扇的效果，很漂亮的呢。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0 padding:0;}
li{
list-style: none;
}
.list{
width: 500px;
height: 300px;
border-bottom:2px solid #333 ;
position: relative;
margin:50px auto ;
}
.list li{
width: 60px;
height: 200px;
box-shadow:0 0 2px #333 ;/*阴影效果*/
position: absolute;
bottom: 30px;
left: 0;
right: 0;
margin: auto;
transform-origin:center bottom;
transition:2s;
}
/*右边旋转的组*/
.list:hover li:nth-child(2){
transform: rotate(15deg);
background: #f00;
}
.list:hover li:nth-child(3){
transform: rotate(30deg);
background: #ff0;
}
.list:hover li:nth-child(4){
transform: rotate(45deg);
background: #fff;
}
.list:hover li:nth-child(5){
transform: rotate(60deg);
background: #0f0;
}
.list:hover li:nth-child(6){
transform: rotate(75deg);
background: #0ff;
}
.list:hover li:nth-child(7){
transform: rotate(90deg);
background: #eff;
}
/*折扇左边的组*/
.list:hover li:nth-child(8){
transform: rotate(-15deg);
background: #f0f;
}
.list:hover li:nth-child(9){
transform: rotate(-30deg);
background: #ff0;
}
.list:hover li:nth-child(10){
transform: rotate(-45deg);
background: #0ff;
}
.list:hover li:nth-child(11){
transform: rotate(-60deg);
background: #fcc;
}
.list:hover li:nth-child(12){
transform: rotate(-75deg);
background: #dcf;
}
.list:hover li:nth-child(13){
transform: rotate(-90deg);
background: #c33;
}
</style>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</body>
</html>
下面是效果图：
每天都要坚持写页面哦~
