HTML文字阴影荧光,纯CSS实现的带阴影和高亮光效的逼真3D球体

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;

}