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: a.........完整代码请登录后点击上方下载按钮下载查看