<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.all{
width: 800px;
height: 800px;
margin: 50px auto;
background-color: #E2E2E2;
}
.box{
width: 420px;
height: 420px;
/*margin: 50px auto;*/
transition: 4s ease-in-out;
/*background-color: #D1D1D1;*/
}
.box div{
width: 200px;
height: 200px;
margin: 5px;
/* border: 1px solid #000;*/
float: left;
}
.box div:nth-child(1){
border-radius:200px 57px 1px 250px / 100px 230px 1px 149px;
background-color: #11E611;
overflow: hidden;
}
.box div:nth-child(2){
border-radius:57px 200px 250px 1px / 230px 100px 149px 1px;
background-color: #EDED0B;
}
.box div:nth-child(3){
border-radius:250px 1px 57px 200px / 230px 1px 149px 100px;
background-color: #ED1313;
}
.box div:nth-child(4){
border-radius:1px 250px 57px 200px / 1px 149px 230px 100px;
background-color: #0F0FEA;
}
.box:hover{transform:rotate(720deg);}
</style>
</head>
<body>
<div class="all">
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="point"></div>
<div class="stick"></div>
</div>
</body>
</html>Cassie_yu