js+svg+css实现炫酷液态玻璃时钟显示时间代码-html代码-BFW代码库

代码语言：html
代码描述：js+svg+css实现炫酷液态玻璃时钟显示时间代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.glass {
  position: absolute;      
  top: 50%;                
  left: 50%;               
  width: 520px;            
  height: 520px;           
  transform: translate(-50%, -50%);  
  background-color: rgba(255, 255, 255, 0.08);
}

.glass-points {
    backdrop-filter: url(#filter-points);
    -webkit-backdrop-filter: url(#filter-points);
    mask: url(#shape-mask-points);
    -webkit-mask: url(#shape-mask-points);
  }

.glass-0 {
    backdrop-filter: url(#filter-0);
    -webkit-backdrop-filter: url(#filter-0);
    mask: url(#shape-mask-0);
    -webkit-mask: url(#shape-mask-0);
  }

.glass-1 {
    backdrop-filter: url(#filter-1);
    -webkit-backdrop-filter: url(#filter-1);
    mask: url(#shape-mask-1);
    -webkit-mask: url(#shape-mask-1);
  }

.glass-2 {
    backdrop-filter: url(#filter-2);
    -webkit-backdrop-filter: url(#filter-2);
    mask: url(#shape-mask-2);
    -webkit-mask: url(#shape-mask-2);
  }

.glass-3 {
    backdrop-filter: url(#filter-3);
    -webkit-backdrop-filter: url(#filter-3);
    mask: url(#shape-mask-3);
    -webkit-mask: url(#shape-mask-3);
  }

.glass-4 {
    backdrop-filter: url(#filter-4);
    -webkit-backdrop-filter: url(#filter-4);
    mask: url(#shape-mask-4);
    -webkit-mask: url(#shape-mask-4);
  }

.glass-5 {
    backdrop-filter: url(#filter-5);
    -webkit-backdrop-filter: url(#filter-5);
    mask: url(#shape-mask-5);
    -webkit-mask: url(#shape-mask-5);
  }

.glass-6 {
    backdrop-filter: url(#filter-6);
    -webkit-backdrop-filter: url(#filter-6);
    mask: url(#shape-mask-6);
    -webkit-mask: url(#shape-mask-6);
  }

.glass-7 {
    backdrop-filter: url(#filter-7);
    -webkit-backdrop-filter: url(#filter-7);
    mask: url(#shape-mask-7);
    -webkit-mask: url(#shape-mask-7);
  }

 .glass-8 {
    backdrop-filter: url(#filter-8);
    -webkit-backdrop-filter: url(#filter-8);
    mask: url(#shape-mask-8);
    -webkit-mask: url(#shape-mask-8);
  }

  .glass-9 {
    backdrop-filter: url(#filter-9);
    -webkit-backdrop-filter: url(#filter-9);
    mask: url(#shape-mask-9);
    -webkit-mask: url(#shape-mask-9);
  }

.clock-container {
  display: flex;
  gap: 0px; 
  flex-wrap: no-wrap;
  justify-content: center;
    align-items: center;
  height: 100vh;
}

.number {
  width: 115px;
  height: 100vh;
  position: relative;
}

.glass {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.08);
}

.glass.active {
  display: block; 
}

.separator {
  width: 50px
}

#browser-warning {
  display:none; 
  color:white; 
  background:#c00; 
  padding:20px; 
  text-align:center; 
  border-radius:8px;
  font-family: Arial, sans-serif;
  position: absolute
}

 .video-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   
    z-index: -1;         
  }
</style>

  
  
</head>

<body translate="no">
  <div class="clock-container">
  
  <div class="number hour-1">
    <div class="glass glass-1"></div>
  </div>
  <div class="number hour-2">
    <div class="glass glass-0"></div>
  </div>
  <div class="number separator">
    <div class="glass glass-points"></div>
  </div>
  <div class="number minute-1">
    <div class="glass glass-2"></div>
  </div>
  <div class="number minute-2">
    <div class="glass glass-8"></div>
  </div>
</div>

<svg style="position:absolute;width:0;height:0;">
  <symbol id="filter-body">
    <feGaussianBlur in="SourceGraphic" stdDeviation="0.01" result="blur" />
    <feColorMatrix in="blur" type="matrix" result="red_channel" values="1 0 0 0 0
      0 0 0 0 0
      0 0 0 0 0
      0 0 0 1 0" />
    <feDisplacementMap in="red_channel" in2="map" scale="0.4" xChannelSelector="B" yChannelSelector="R" result="red_displaced" />
    <feColorMatrix in="blur" type="matrix" result="green_channel" values="0 0 0 0 0
      0 1 0 0 0
      0 0 0 0 0
      0 0 0 1 0" />
    <feDisplacementMap in="green_channel" in2="map" scale="0.4" xChannelSelector="B" yChannelSelector="R" result="green_displaced" />
    <feColorMatrix in="blur" type="matrix" result="blue_channel" values="0 0 0 0 0
      0 0 0 0 0
      0 0 1 0 0
      0 0 0 1 0" />
    <feDisplacementMap in="blue_channel" in2="map" scale="0.4" xChannelSelector="B" yChannelSelector="R" result="blue_displaced" />
    <feComposite in="red_displaced" in2="green_displaced" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="rg_added" />
    <feComposite in="rg_added" in2="blue_displaced" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
  </symbol>
</svg>

<svg style="position: absolute; width: 0; height: 0;">
  <filter id="filter-points" href="#filter-template" primitiveUnits="objectBoundingBox">
    <feImage href="data:image/png;base64,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" preserveAspectRatio="none" x="0" y="0" width="1" height="1" result="map" />

    <feGaussianBlur in="SourceGraphic" stdDeviation="0.01" result="blur" />
    <feColorMatrix in="blur" type="matrix" result="red_channel" values="1 0 0 0 0
                            0 0 0 0 0
                            0 0 0 0 0
                            0 0 0 1 0" />
    <feDisplacementMap in="red_channel" in2="map" scale="0.4" xChannelSelector="B" yChannelSelector="R" result="red_displaced" />
    <feColorMatrix in="blur" type="matrix" result="green_channel" values="0 0 0 0 0
                            0 1 0 0 0
                            0 0 0 0 0
                            0 0 0 1 0" />
    <feDisplacementMap in="green_channel" in2="map" scale="0.4" xChannelSelector="B" yChannelSelector="R" result="green_displaced" />
    <feColorMatrix in="blur" type="matrix" result="blue_channel" values="0 0 0 0 0
                            0 0 0 0 0
                            0 0 1 0 0
                            0 0 0 1 0" />
    <feDisplacementMap in="blue_channel" in2="map" scale="0.4" xChannelSelector="B" yChannelSelector="R" result="blue_displaced" />
    <feComposite in="red_displaced" in2="green_displaced" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="rg_added" />
    <feComposite in="rg_added" in2="blue_displaced" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
  </filter>
  <mask id="shape-mask-points" maskContentUnits="objectBoundingBox">
    <g fill="white">
      <path d="M50,31.025C51.784,31.025 53.233,32.473 53.233,34.257C53.233,36.041 51.784,37.489 50,37.489C48.216,37.489 46.767,36.041 46.767,34.257C46.767,32.473 48.216,31.025 50,31.025ZM50,62.511C51.784,62.511 53.233,63.959 53.233,65.743C53.233,67.527 51.784,68.975 50,68.975C48.216,68.975 46.767,67.527 46.767,65.743C46.767,63.959 48.216,62.511 50,62.511Z" transform="translate(0, 0) scale(0.01)" />
    </g>
  </mask>
</svg>

<svg style="position: absolute; width: 0; height: 0;">
  <filter id="filter-0" href="#filter-template" primitiveUnits="objectBoundingBox">
    <feImage href="data:image/png;base64,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AEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMIAQCAMAATCAEAgDAAEwgBAIAwABMJA9+q67noXgP8nDNAlUWQDCQNdah8W136gnM/nG7s12EzCwG/F5h/T67o2gGATCAMdaxwK7+jwvfpm5/N5uZHNzwwsTRh4q7wFx2uDBjonDHTprg+CqRN3scxQ7rlDOW8ZYaBLg8EgP177m/2yCmvZeGM2qVpfEqwusFGEgS4Nh8P2k2tfD1iLu9hm0h58vAUTYtxrgze/BO7M1tZW45n8Bj8/WOWt9BqPsBcXF+3hQn6nv8ROXnOqrjDQLSMGutQYMaxrwqf9YMXAVFX1yy+/pAdLl6CUN7IwD8JAt4wY6NLW1lbjbfLSMzaNQ3/6do1H2LOzs7y1ulCtIxWNQggD3RIGunTViGHFeaS1V6GKI4aGFbect5C3Jgx0y1QSXSrXGMp1hWrZg2O5kbal93M+n5+dnVVVVdd1r9fr9XrrCoOpJDaQEQNdGg6HjffIazn5J19q0F5mWG7j5+fns9ksVSG3YcU8NE5GMpXE5hAGulROJa3+vr4hlyBtczabLb2pFy9epGN3r9fr9/u9wm2T0D451VQSm0YY6FJj8bkxEZRfdsPFhvyy9k2NZrPZfD5P7/pvu5Pz+fyrr76q6zoloX/pmvNNb659elJd16s0DFZnjYEu5TWG9sLA0ttsTB8ls9lsNptNp9Mljrnffffd8fFxisFgMEhfG1NJt93mwmsgjBjYEMJAl3Z3d9MyQz58l4fyVU5dbQwUchjG4/Ftt/bll1+mgcLw0mAwSG3I44ZbtaG9ulDWZT6fT6fT2+4krJEw0KW6rt977730OB/K09E8v+ZWbWj8YDn+mE6n0+n04uJiMpncfIPff//9y5cvh8Ph1tZW/lpWYcURQ9utdg/ugjDQsRyGaq3nmJY/W44/JpPJq1evbnjwPTg4+NOf/jQYDLa2tra3t7e3t3MYBoNBowo3yUPjNY3ZpPRVGOicxWc69ujRo/SgnP9pzyPdcP258cq8dJG+TZudTCbff//9/v7+3t7eVRuZzWZffvnlZ599Vtf19vb2gwcPti9tbW2lMKS16Or280hXSf91ickuWC9hoGN7e3v9fj+vK0yn0/LcpOW2ubAi5QBiOp1+9913L1++fPfdd/f397e3tweDwXw+Pz8/Pzk5+e9///vixYuzs7PBYDAcDh88eLCzs7Ozs5PykEYMdV0vUYVSOwlGDGwIYaBjvV7v4cOHJycnjWXnciF6iYPvwlWKdPDNZxOdn58fHR09f/58NBqNL+XfuLOzkxYVyjCUU0l5O9Ut55GuGTGkHbjtHwvrJQx079GjR6enp43Th8oJpeXaUMVLoHMV8omnk8lkMBjkte66rtPYJT1Ow4UUhu3t7RSGdFZSmkQqFxhu6I3zSIYLbAJhoHv7+/vffvttdblKnC29zLBQrsJsNmv0ID2fr3LIz2xdSksL6UG+um29w4X0gtFotPQfCOsiDHRvf38/zddXxYlJ5XBh6STUlzdHSsf6+XyejvhpRSEdjtPIYDKZpOWN/OI0X9Q4UTVf3bbE/pQhKWe0GlNJS/yZsF7CQPcGg8F77713dHSUGpDeuefRQ2rG/PLGR8sdkdMWUhWqy0NzmhGaTqeTyaS8fiL9pzzjVC4qlEsLqwwX8s34yk21PyQOOiEMbISPPvro9evX1eW5qulitHJCaZVJpKTX681ms/Ja5el0mp5s/6J8s7w8RMj3zrttFZL8I+2BQt5UurM3dE4Y2Ah7e3sPHz5Mn5JWtmE4HJZXui03XGiMNtIb/zQWGQwGaQYprS6Ur0njhjywyO/0827ccGfK4ULjrt1lacbjsQUGNoQwsCmePXv2/PnzxgJDelOflgfyjNBt81BWIT9O20xjiLI9VWvCp/3uvrplFcofbychveb09PRWfxTcHWFgUzx+/Pi7775LJ/K3Z5Oq4tzTpX9F+bOpECkP7Zn9ckzQnji61T40qlAv+gy4yWRyfn6+9N8F6+VeSWyQDz/8sLo8aTVVIc/zLLxg7eYab/bLtd/2Z+80vm1cyHbzKjR+Y954YzhSGS6wYYSBDfL48eP0CQ15Qql9sdsq22/koXzz3shAowfVLZNQFaONcn1iYWxms9kvv/yyyt8F6yUMbJBer/fBBx/Ul2sJjfOFygmlVQrRPsRftZBw1etvuP2F6wrtBYZ01ffSfw6snTUGNsuTJ0+Ojo4mk0ljQqm+XC6+1TH6GuvazsLNlsOFhdNT5eqCeSQ2jREDm6XX6/3+97/Pcyx53NC4FrravM+/LAcKVVW1hwjpirnGPNKrV6827Q8BYWDj7O7uPnnyJE8otS9263oHF2gvXTSGC+WIIQ8Xjo+P3QODDWQqiU30/vvvn5+fj0aj8tZJSV3c/iifb9rVftbx/Nc8VmisK+SLqMsqXFxcHB8fd7XncA0jBjZRXdfPnj3b3t5OR//5FR/S0Fjjve0q8Sq7V/6u8rdfNX3UqMJkMvnf//73K+wqLEEY2FD9fv/p06e9yzvoNW7HnccNC69Nu6NOLOxBe9Yo96BUVmE6nR4cHKSbcMAGMpXE5hoMBr/73e8ODw/Tt/PLT4Qup4/yhFL+qUYqFrbh+tmn63NSt65saBSiPW4oqzCbzQ4PD6fT6Rv/fOiKMLDRhsPhkydPfv7556r4qIbyNqhV6zjePqxfdceLm1i48YVTWPXVl8uVM0iHh4c+po0NJwxsusFg8Pjx4+Pj48ZH95S3TmoMGtaljmvL7a/lWKERhrp1D77RaHR4eGgGic0nDNwDvV5vb2/v7Ows3xw7f4BPw8KhQPnkG09humr8Ucagai04t2eTGk5PT9MnEd3uL4cuCAP3Q13X77zzzmQyyR9a0LjlajlouGam6CaTSDccKCxsQx3vjlfX9Ww2e/Xq1cXFxbJ/OvzahIH7ZDAY9Pv9dMOM+RUf9lkexNvPv9ESVVgobeHs7Oz169emj7hfhIF7pq7r9LFu1xxtG21YmIQ3PnlVFaqr85D/03w+Pzs7Oz09dfYR95EwcC/Vdd3v99Pja+6s127D9SOJq17f6EG1KBLV5cTR2dlZXg6B+0gYuPeWeO9/1WvaD64fN5TfTqfT09PT8/NzK8zcd8LA2yCfwJoWfsv/tLAKV8013SoP6QWTyWQ8Hl9cXORVcbjvhIG3R74Va1Xc9TrPOGW3ikT72/l8nmIwHo/TMvhd/13wKxMG3k7prkrpcfsedo3poKzMwLxlOp1OJhPXLfPWEwbefmUkGnIk0v2XGpdVw2+TMPCblhvgvFLI3HYbgEAYAAiEAYBAGAAIhAGAQBgACIQBgEAYAAiEAYBAGAAIhAGAQBgACIQBgEAYAAiEAYBAGAAIhAGAQBgACIQBgEAYAAiEAYBAGAAIhAGAQBgACIQBgEAYAAiEAYBAGAAIhAGAQBgACIQBgEAYAAiEAYBAGAAIhAGAQBgACIQBgEAYAAiEAYBAGAAIhAGAQBgACIQBgEAYAAiEAYBAGAAIhAGAQBgACIQBgEAYAAiEAYBAGAAI/g9etgKoBM9u4gAAAABJRU5ErkJggg==" preserveAspectRatio="none" x="0" y="0" width="1" height="1" result="map" />

    <feGaussianBlur in="SourceGraphic" stdDeviation="0.01" result="blur" />
    <feColorMatrix in="blur" type="matrix" result="red_channel" values="1 0 0 0 0
                            0 0 0 0 0
                            0 0 0 0 0
                            0 0 0 1 0" />
    <feDisplacementMap in="red_channel" in2="map" scale="0.4" xChannelSelector="B" yChannelSelector="R" result="red_displaced" />
    <feColorMatrix in="blur" type="matrix" result="green_channel" values="0 0 0 0 0
                            0 1 0 0 0
                            0 0 0 0 0
                            0 0 0 1 0" />
    <feDisplacementMap in="green_channel" in2="map" scale="0.4" xChannelSelector="B" yChannelSelector="R" result="green_displaced" />
    <feColorMatrix in="blur" type="matrix" result="blue_channel" values="0 0 0 0 0
                            0 0 0 0 0
                            0 0 1 0 0
                            0 0 0 1 0" />
    <feDisplacementMap in="blue_channel" in2="map" scale="0.4" xChannelSelector="B" yChannelSelector="R" result="blue_displaced" />
    <feComposite in="red_displaced" in2="green_displaced" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="rg_added" .........完整代码请登录后点击上方下载按钮下载查看