css实现逼真水滴水珠晶莹剔透效果代码-html代码-BFW代码库

css实现逼真水滴水珠晶莹剔透效果代码

代码语言：html

代码描述：css实现逼真水滴水珠晶莹剔透效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        :root {
          --background-color: #00769f;
          --secondary-color: #000406;
        }
        
        body {
          background: radial-gradient(circle at top right, var(--background-color), var(--secondary-color));
          background-attachment: fixed;
        }
        
        .card {
          display: inline-block;
          width: 200px;
          height: 350px;
          margin: 15vh calc(50% - 125px);
        }
        .card .droplet {
          --bubble-radius: 10.4rem;
          --bubble-shadow: calc((var(--bubble-radius) / 16) * -1)
            calc(var(--bubble-radius) / 12) 0 0 black;
          content: " ";
          display: block;
          top: calc(50% - (var(--bubble-radius) / 2));
          left: calc(50% - (var(--bubble-radius) / 2));
          width: var(--bubble-radius);
          height: calc(var(--bubble-radius) - 0.9rem);
          box-shadow: var(--bubble-shadow), inset calc((var(--bubble-radius) / 5) * -1) calc((var(--bubble-radius) / 5)) calc((var(--bubble-radius) / 4)) 0 #002a39;
          border-radius: 50%;
          background-color: #006385;
          position: relative;
        }
        .card .droplet:after {
          position: absolute;
          content: " ";
          background: #fff;
          width: 15%;
          height: 15%;
          border-radius: 50%;
          transform: skew(11deg, 2deg);
          top: 20%;
          left: 63%;
          z-index: 10;
          opacity: 1;
        }
        .card .droplet:before {
          position: absolute;
          content: " ";
          background-color: #fff;
          width: 9%;
          height: 9%;
          border-radius: 50%;
          transform: skew(10deg, 0deg);
          top: 40%;
          left: 75%;
          z-index: 20;
          opacity: 0.4;
        }
        .card .droplet:nth-child(1) {
          t.........完整代码请登录后点击上方下载按钮下载查看