首页 > 代码库 > 前端工程师源码分享:html5 2d 扇子

前端工程师源码分享:html5 2d 扇子

2024-09-13 14:40:13   214人阅读

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>折扇</title>

<style>

*{margin:0;padding:0;}

ul,ol,li{list-style:none;}

ul{width:400px;

height:200px;

position:relative;

margin:200px auto;}

ul li{width: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，找群主私聊，送海量学习资料免费送

前端工程师源码分享:html5 2d 扇子


联系
我们