效果图:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折扇效果</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul li{list-style: none;}
#box{
width: 800px;
height: 500px;
border-bottom: #000000 2px solid;
margin: 100px auto;
position: relative;
}
#box ul li{
width: 80px;
height: 400px;
margin: 10px;
position: absolute;
}
#box ul li{
box-shadow: 3px 3px 5px #000;
transform-origin: center bottom;
transition: 1s linear;
}
#two li{
transform-origin: center bottom;
}
#box ul{
position: absolute;left: 350px;
}
#box ul:hover li:nth-child(1){transform: rotate(90deg);}
#box ul:hover li:nth-child(2){transform: rotate(80deg);}
#box ul:hover li:nth-child(3){transform: rotate(70deg);}
#box ul:hover li:nth-child(4){transform: rotate(60deg);}
#box ul:hover li:nth-child(5){transform: rotate(50deg);}
#box ul:hover li:nth-child(6){transform: rotate(40deg);}
#box ul:hover li:nth-child(7){transform: rotate(30deg);}
#box ul:hover li:nth-child(8){transform: rotate(20deg);}
#box ul:hover li:nth-child(9){transform: rotate(10deg);}
#box ul:hover li:nth-child(10){transform: rotate(0deg);}
#box ul:hover li:nth-child(11){transform: rotate(-10deg);}
#box ul:hover li:nth-child(12){transform: rotate(-20deg);}
#box ul:hover li:nth-child(13){transform: rotate(-30deg);}
#box ul:hover li:nth-child(14){transform: rotate(-40deg);}
#box ul:hover li:nth-child(15){transform: rotate(-50deg);}
#box ul:hover li:nth-child(16){transform: rotate(-60deg);}
#box ul:hover li:nth-child(17){transform: rotate(-70deg);}
#box ul:hover li:nth-child(18){transform: rotate(-80deg);}
#box ul:hover li:nth-child(19){transform: rotate(-90deg);}
#box ul:hover li:nth-child(20){transform: rotate(-90deg);}
</style>
</head>
<body>
<div id="box">
<ul>
<li style="background-color: #ee7dc3;"></li>
<li style="background-color: #c788ee;"></li>
<li style="background-color: #8593ee;"></li>
<li style="background-color: #7ebeee;"></li>
<li style="background-color: #8aeee3;"></li>
<li style="background-color: #85d6ee;"></li>
<li style="background-color: #83eeb0;"></li>
<li style="background-color: #baee7d;"></li>
<li style="background-color: #eed380;"></li>
<li style="background-color: #eeae81;"></li>
<li style="background-color: #ee7dc3;"></li>
<li style="background-color: #c788ee;"></li>
<li style="background-color: #8593ee;"></li>
<li style="background-color: #7ebeee;"></li>
<li style="background-color: #8aeee3;"></li>
<li style="background-color: #85d6ee;"></li>
<li style="background-color: #83eeb0;"></li>
<li style="background-color: #baee7d;"></li>
<li style="background-color: #eed380;"></li>
<li style="background-color: #ccee8b;"></li>
</ul>
</div>
</body>
</html>