最终效果
#代码
div {
width: 360px;
height: 360px;
color: #7accec;
background: currentColor;
border-radius: 50%;
box-shadow:
0 5px 5px inset,
0 17px 5px rgba(255, 255, 255, 0.3) inset,
0 -3px 3px rgba(255, 255, 255, 0.3) inset,
0 -10px 10px rgba(0, 0, 0, 0.3) inset,
0 -15px 10px #2a99c6 inset,
0 7px 10px rgba(0, 0, 0, 0.3);
position: relative;
}
div::before {
content: '';
width: 220px;
height: 212px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -110px;
margin-top: -106px;
background-image:
radial-gradient(circle at 75px 70px, #333 20px, transparent 20px),
radial-gradient(circle at 145px 70px, #333 20px, transparent 20px),
radial-gradient(circle at 75px 140px, #333 20px, transparent 20px),
radial-gradient(circle at 145px 140px, #333 20px, transparent 20px);
border-radius: 50%;
border-top: 1px solid rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 20px 2px rgba(255, 255, 255, 0.3) inset,
3px -15px 7px -4px rgba(0, 0, 0, 0.3),
0 -14px 10px 5px #59a4c2,
0 2px 5px 5px #7accec,
0 10px 5px 5px rgba(255, 255, 255, 0.5);
}
div::after {
--blue: #0d0dec;
--cyan: #2a99c6;
content: '';
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
background-image:
linear-gradient(to right,
transparent 35%, var(--blue) 35%,
var(--cyan) 40%, var(--blue) 45%,
var(--cyan) 50%, var(--blue) 55%,
var(--cyan) 60%, var(--blue) 65%,
transparent 65%),
linear-gradient(to bottom,
transparent 35%, var(--blue) 35%,
var(--cyan) 40%, var(--blue) 45%,
var(--cyan) 50%, var(--blue) 55%,
var(--cyan) 60%, var(--blue) 65%,
transparent 65%);
transform: rotate(45deg);
border-radius: 50%;
}
