<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* reset.css */
*{
margin: 0;
padding: 0;
}
.box{
width: 700px;
height: 500px;
margin: 100px auto;
border: 1px solid;
list-style: none;
position: relative;
}
.box li{
width: 70px;
height: 350px;
background-color: rgba(255,0,0,.8);
position: absolute;
left:50%;
margin-left: -35px;
bottom: 50px;
border-radius: 0 0 70% 70%;
transform-origin: center 300px;
transition: linear 1s;
background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190118%2F9faa2964434a494fb19b8062b9bddd4f.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670980297&t=568a52d9fcc47c15058bb3745ddf7e12);
background-repeat: no-repeat;
background-size: 400px;
background-position: -166px;
border: 1px solid;
}
.box:hover .one{
transform: rotate(-75deg);
}
.box:hover li:nth-of-type(2){
transform: rotate(-65deg);
}
.box:hover li:nth-of-type(3){
transform: rotate(-55deg);
}
.box:hover li:nth-of-type(4){
transform: rotate(-45deg);
}
.box:hover li:nth-of-type(5){
transform: rotate(-35deg);
}
.box:hover li:nth-of-type(6){
transform: rotate(-25deg);
}
.box:hover li:nth-of-type(7){
transform: rotate(-15deg);
}
.box:hover li:nth-of-type(8){
transform: rotate(-5deg);
}
.box:hover li:nth-of-type(9){
transform: rotate(5deg);
}
.box:hover li:nth-of-type(10){
transform: rotate(15deg);
}
.box:hover li:nth-of-type(11){
transform: rotate(25deg);
}
.box:hover li:nth-of-type(12){
transform: rotate(35deg);
}
.box:hover li:nth-of-type(13){
transform: rotate(45deg);
}
.box:hover li:nth-of-type(14){
transform: rotate(55deg);
}
.box:hover li:nth-of-type(15){
transform: rotate(65deg);
}
.box:hover li:nth-of-type(16){
transform: rotate(75deg);
}
p{
width: 20px;
font-weight: 600;
/* color: darkolivegreen; */
}
span{
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
border: 6px solid;
position: absolute;
left: 50%;
margin-left: -8px;
bottom: 50px;
}
</style>
</head>
<body>
<ul class="box">
<li class="one"><p>人生若只如初见,</p></li>
<!-- <li></li> -->
<li><p>何事秋风悲画扇?</p></li>
<li><p>等闲变却故人心,</p></li>
<li><p>却道故心人易变。</p></li>
<li><p>骊山语罢清宵半,</p></li>
<li><p>泪雨零铃终不怨。</p></li>
<li><p>何如薄幸锦衣郎,</p></li>
<li><p>比翼连枝当日愿</p></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li><span></span></li>
</ul>
</body>
</html>