CSS
语言:
CSSSCSS
确定
div {
margin: 20px;
display: inline-block;
}
body {
font-family: 'Cutive Mono';
text-align: center;
}
.sphere {
position: relative;
width: 150px;
height: 150px;
background: #3bf8fb;
border-radius: 50%;
box-shadow: inset 26px -37px 38px 42px rgba(5, 142, 144, 0.5), inset 9px -7px 35px -11px #9cfaff, inset 28px -21px 58px 4px rgba(0, 0, 0, 0.73);
}
.sphere::after {
background: rgba(4, 55, 56, 0.6);
top: 136px;
border-radius: 50%;
position: absolute;
height: 24px;
width: 150px;
left: -29px;
content: '';
z-index: -1;
-webkit-filter: blur(9px);
filter: blur(9px);
}
.sphere::before {
background: rgba(34, 110, 111, 0.57);
top: 143px;
border-radius: 50%;
position: absolute;
height: 14px;
width: 106px;
left: 8px;
content: '';
z-index: -1;
-webkit-filter: blur(4px);
filter: blur(4px);
box-shadow: -12px -4px 30px -1px #5c9fa0;
}