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,iVBORw0KGgoAAAANSUhEUgAAAggAAAIHCAIAAAB1yDPhAAABgWlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz8zfoz8iGJhobyE1ZAfNbFRZhJqksYog82b582Mmh+v954kW2U7RYmNXwv+ArbKWikiJWu2xAY95xk1kjm3c8/nfu89p3vPBW80rWWs8h7IZG0zMhpUZmKziu+JGirx0YpX1SxjeHIyTEl7u8Hjxqsut1bpc/9azYJuaeCpEh7SDNMWHhMOL9uGy5vCTVpKXRA+FvabckHha1ePF/jR5WSBP1w2o5EQeBuEleQvjv9iLWVmhOXltGfSS9rPfdyX1OrZ6SmJbeItWEQYJYjCOCOECNDLoMwBuuijW1aUyO/5zp8gJ7mazAYrmCySJIWNX9Qlqa5LTIiuy0iz4vb/b1+tRH9foXptECoeHOelA3wb8Jl3nPd9x/k8gLJ7OMsW83N7MPAqer6ote9C/RqcnBe1+BacrkPznaGa6rdUJu5NJOD5COpi0HgJ1XOFnv3sc3gL0VX5qgvY3oFOOV8//wX8B2e1fB9zKgAAAAlwSFlzAAAuIwAALiMBeKU/dgAAGexJREFUeJzt3VtzHMXdwOGZPUiWwJIxJsYVvv+HoFKpQO5ykUpRhEMOrsIJYECKkXVA2uN70aV++z+zkqXdF.........完整代码请登录后点击上方下载按钮下载查看