<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 500px;
border-bottom: black 1px solid;
margin: 0 auto;
position: relative;
}
.box div {
width: 100px;
height: 300px;
position: absolute;
transition: 2s;
left: 200px;
transform-origin: center bottom;
bottom: 50px;
opacity: 0;
}
.box:hover div {
opacity: 1;
}
.box .box1 {
background: red;
opacity: 1;
}
.box2 {
background: orange;
}
.box3 {
background: yellow;
}
.box4 {
background: green;
}
.box5 {
background: blue;
}
.box6 {
background: skyblue;
}
.box7 {
background: purple;
}
.box8 {
background: orange;
}
.box9 {
background: yellow;
}
.box10 {
background: green;
}
.box11 {
background: blue;
}
.box12 {
background: skyblue;
}
.box13 {
background: purple;
}
.box :hover .box1 {
transform: rotate(0);
}
.box:hover .box7 {
transform: rotate(-90deg);
}
.box:hover .box6 {
transform: rotate(-75deg);
}
.box:hover .box5 {
transform: rotate(-60deg);
}
.box:hover .box4 {
transform: rotate(-45deg);
}
.box:hover .box3 {
transform: rotate(-30deg);
}
.box:hover .box2 {
transform: rotate(-15deg);
}
.box:hover .box8 {
transform: rotate(15deg);
}
.box:hover .box9 {
transform: rotate(30deg);
}
.box:hover .box10 {
transform: rotate(45deg);
}
.box:hover .box11 {
transform: rotate(60deg);
}
.box:hover .box12 {
transform: rotate(75deg);
}
.box:hover .box13 {
transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box7">7</div>
<div class="box6">6</div>
<div class="box5">5</div>
<div class="box4">4</div>
<div class="box3">3</div>
<div class="box2">2</div>
<div class="box8">2</div>
<div class="box9">3</div>
<div class="box10">4</div>
<div class="box11">5</div>
<div class="box12">6</div>
<div class="box13">7</div>
</div>
</body>
</html>
我们做折扇效果时应该注意结构的顺序,不然可能会导致折扇中的数字被遮盖。