image.png

大數(shù)據(jù)項目中的嘗試：
html

<section class="stage">
    <figure class="ball bubble">
        CLICK
    </figure>
</section>

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%);
    }