大数据项目中的尝试:
html
css
body {
width: 300px;
height: 600px;
margin: 20px auto;
background-color: #082236;
}
.ball {
border: 1px solid rgba(0,176,188,0.3);
display: inline-block;
width: 130px;
height: 13 0px;
text-align: center;
line-height: 130px;
font-size: 14px;
color: rgba(0,176,188,1);
font-family: "Microsoft YaHei";
border-radius: 100%;
position: relative;
background: radial-gradient(circle at bottom, rgba(0,176,188,0.3), rgba(0,176,188,0.5) 10%, rgba(0,176,188,0.8) 80%, rgba(0,176,188,1) 100%); }
.ball:before {
content: "";
position: absolute;
top: 1%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 100%;
background: radial-gradient(circle at top, white, rgba(255, 255, 255, 0) 30%);
-webkit-filter: blur(5px);
filter: blur(5px);
z-index: 2; }
.ball:after {
content: "";
position: absolute;
display: none;
top: 5%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 100%;
-webkit-filter: blur(1px);
filter: blur(1px);
z-index: 2;
-webkit-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
}
.ball.bubble {
background: radial-gradient(circle at 40% 55%, transparent, transparent 40%, transparent 50%, rgba(0, 176, 188, 0.5));
}
.ball.bubble:before {
-webkit-filter: blur(0);
filter: blur(0);
height: 80%;
width: 40%;
background: radial-gradient(circle at 130% 130%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
-webkit-transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);
transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg); }
.ball.bubble:after {
display: block;
background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, transparent 80%, transparent 84%, rgba(255, 255, 255, 0) 100%);
}