Hank_c_java - 云代码空间
——
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
*{
margin: 0;
}
body{
background-color: #27383b;
}
.box{
position: fixed;/*以浏览器窗口为参考物质*/
width: 250px;
height: 250px;
/*background-color: aquamarine;*/
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
box-shadow: 0px 0px 20px 0px #fff inset;/*水平位移，垂直位移，模糊半径，阴影大小，inset：向内阴影*/
transform: rotate(-45deg);
}
.box:hover::before{
border-top: 100px solid #16d7a7;/*宽度，样式，颜色*/
border-left: 100px solid #16d7a7;
transform: rotate(-180deg);
}
.box::before{
border-width: 100px;
border-color: red transparent transparent red;;
border-radius: 50%;
transition: .8s;
}
.box .middle{
border-width: 75px;
border-color: #fff #f8d245 transparent #ccc;
transition: 1s;
}
.box:hover .middle{
border-right: 75px solid #ccc;
border-left: 75px solid #f8d245;
transform: rotate(90deg)
}
.box .middle::after{
content: '';
position: absolute;
width: 25px;
height: 25px;
top: -50px;
left: -12px;
background-color: #000;
border-radius: 50%;
}
.box::after{
border-width: 40px;
border-color: transparent transparent #f7a703;
transition: .6s;
}
.box:hover:after{
transform: rotate(90deg);
}
.box::before, .box::after, .box .middle{
content: '';
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
margin: auto;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">
<div class="middle"></div>
</div>
</body>
</html>
至于优化过程都在程序注释中了，我就不多说了