<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 实现折叠扇效果</title>
<style type="text/css" media="screen">
*{margin:0; padding:0;}
.box{position:relative;width:600px;height:230px;margin:100px auto;border-bottom:2px solid #000;}
.box div{position:absolute;top:0;left:270px;width:60px;height:200px;opacity:0;color:#fff;transform-origin: center bottom;transition: all 1s;}
.box:hover div{opacity:1;}
.box div:nth-of-type(1){background-color:#5628B4;opacity:1;}
.box div:nth-of-type(2){background-color:#232855;}
.box div:nth-of-type(3){background-color:#37474F;}
.box div:nth-of-type(4){background-color:#EE046C;}
.box div:nth-of-type(5){background-color:#4A2C2C;}
.box div:nth-of-type(6){background-color:#6B0848;}
.box div:nth-of-type(7){background-color:#AF05AA;}
.box div:nth-of-type(8){background-color:#AF05AA;}
.box div:nth-of-type(9){background-color:#6B0848;}
.box div:nth-of-type(10){background-color:#4A2C2C;}
.box div:nth-of-type(11){background-color:#EE046C;}
.box div:nth-of-type(12){background-color:#37474F;}
.box div:nth-of-type(13){background-color:#232855;}
.box:hover div:nth-of-type(1){transform: rotate(0deg)}
.box:hover div:nth-of-type(2){transform: rotate(15deg)}
.box:hover div:nth-of-type(3){transform: rotate(30deg)}
.box:hover div:nth-of-type(4){transform: rotate(45deg)}
.box:hover div:nth-of-type(5){transform: rotate(60deg)}
.box:hover div:nth-of-type(6){transform: rotate(75deg)}
.box:hover div:nth-of-type(7){transform: rotate(90deg)}
.box:hover div:nth-of-type(8){transform: rotate(-90deg)}
.box:hover div:nth-of-type(9){transform: rotate(-75deg)}
.box:hover div:nth-of-type(10){transform: rotate(-60deg)}
.box:hover div:nth-of-type(11){transform: rotate(-45deg)}
.box:hover div:nth-of-type(12){transform: rotate(-30deg)}
.box:hover div:nth-of-type(13){transform: rotate(-15deg)}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>7</div>
<div>6</div>
<div>5</div>
<div>4</div>
<div>3</div>
<div>2</div>
</div>
</body>
</html>
css3 实现折扇效果
最新推荐文章于 2022-10-10 14:35:01 发布