<style>
.box{
display: flex;
justify-content: center;
margin-top: 200px;
}
.box1 div:nth-child(1){
width: 250px;
height: 125px;
background: yellow;
border-radius: 250px 250px 0 0 ;
}
.box1 div:nth-child(2){
width: 250px;
height: 125px;
background: rgb(72, 236, 122);
border-radius: 0 0 250px 250px ;
}
.box:hover .box1{
transform: rotate(225deg);
}
.box1{
transition: 2s;
position: relative;
}
img{
width: 230px;
height: 230px;
border-radius: 50%;
position: absolute;
top: 210px;
left: 600x;
}
.mask{
width: 230px;
height: 230px;
border-radius: 50%;
background-color: rgba(0, 0, 0, .5);
position: absolute;
margin-top: 10px;
text-align: center;
line-height: 230px;
font-size: 20px;
font-weight: bold;
color: #fff;
opacity: 0;
transition: 2s;
}
.box:hover .mask{
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<div></div>
<div></div>
</div>
<img src="../作业25/img/花.jpg" alt="">
<div class="mask">flower</div>
</div>
</body>