<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折扇</title>
<style>
*{margin:0;padding:0;}
ul,ol,li{list-style:none;}
ul{400px;
height:200px;
position:relative;
margin:200px auto;}
ul li{60px;
height:200px;
position:absolute;
left:170px;
transform-origin:bottom;
transition:all 2s;
border-radius:60px;
text-align:center;}
ul li:nth-child(1){background: red;}
ul li:nth-child(2){background:yellow;}
ul li:nth-child(3){background:blue;}
ul li:nth-child(4){background:green;}
ul li:nth-child(5){background: red;}
ul li:nth-child(6){background:yellow;}
ul li:nth-child(7){background:blue;}
ul li:nth-child(8){background:green;}
ul li:nth-child(9){background: red;}
ul li:nth-child(10){background:yellow;}
ul li:nth-child(11){background:blue;}
ul li:nth-child(12){background:green;}
ul li:nth-child(13){background: red;}
ul li:nth-child(14){background:yellow;}
ul li:nth-child(15){background:blue;}
ul li:nth-child(16){background:green;}
ul li:nth-child(17){background: red;}
ul li:nth-child(18){background:yellow;}
ul li:nth-child(19){background:blue;}
ul li:nth-child(20){background:green;}
ul li:nth-child(21){background: red;}
ul li:nth-child(22){background:yellow;}
ul li:nth-child(23){background:blue;}
ul li:nth-child(24){background:green;}
ul li:nth-child(25){background: red;}
ul:hover li:nth-child(1){opacity:0.6;transform:rotate(0deg);}
ul:hover li:nth-child(2){opacity:0.6;transform:rotate(15deg);}
ul:hover li:nth-child(3){opacity:0.6;transform:rotate(30deg);}
ul:hover li:nth-child(4){opacity:0.6;transform:rotate(45deg);}
ul:hover li:nth-child(5){opacity:0.6;transform:rotate(60deg);}
ul:hover li:nth-child(6){opacity:0.6;transform:rotate(75deg);}
ul:hover li:nth-child(7){opacity:0.6;transform:rotate(90deg);}
ul:hover li:nth-child(8){opacity:0.6;transform:rotate(105deg);}
ul:hover li:nth-child(9){opacity:0.6;transform:rotate(120deg);}
ul:hover li:nth-child(10){opacity:0.6;transform:rotate(135deg);}
ul:hover li:nth-child(11){opacity:0.6;transform:rotate(150deg);}
ul:hover li:nth-child(12){opacity:0.6;transform:rotate(165deg);}
ul:hover li:nth-child(13){opacity:0.6;transform:rotate(180deg);}
ul:hover li:nth-child(14){opacity:0.6;transform:rotate(-15deg);}
ul:hover li:nth-child(15){opacity:0.6;transform:rotate(-30deg);}
ul:hover li:nth-child(16){opacity:0.6;transform:rotate(-45deg);}
ul:hover li:nth-child(17){opacity:0.6;transform:rotate(-60deg);}
ul:hover li:nth-child(18){opacity:0.6;transform:rotate(-75deg);}
ul:hover li:nth-child(19){opacity:0.6;transform:rotate(-90deg);}
ul:hover li:nth-child(20){opacity:0.6;transform:rotate(-105deg);}
ul:hover li:nth-child(21){opacity:0.6;transform:rotate(-120deg);}
ul:hover li:nth-child(22){opacity:0.6;transform:rotate(-135deg);}
ul:hover li:nth-child(23){opacity:0.6;transform:rotate(-150deg);}
ul:hover li:nth-child(24){opacity:0.6;transform:rotate(-165deg);}
ul:hover li:nth-child(25){opacity:0.6;transform:rotate(-185deg);}
</style>
</head>
<body>
<ul>
<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>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
</ul>
</body>
</html>
欢迎加入598399936，找群主私聊，送海量学习资料免费送