js+css实现镂空文字时间显示效果代码-html代码-BFW代码库

js+css实现镂空文字时间显示效果代码

代码语言：html

代码描述：js+css实现镂空文字时间显示效果代码

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

<!DOCTYPE html>
<html lang="en" >

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


  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
html,body {background-color:#000}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
#clock {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100vmin;
  text-align:center;
    background-image: url(//repo.bfw.wiki/bfwrepo/image/61cc6f12e4ddb.png);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size:auto 300%;
  background-position:center 0px;
  animation: 24s BgPos linear infinite alternate;
  white-space:nowrap
}
@keyframes BgPos {
  0% {background-position:center 0px;}
  100%{background-position:center 100%;}
}
#clock i {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  color:#fff;
font-size:calc(16px + 11vmin);

}
.hrs,.mins,.secs {display:inline-block;width:1.7em}
@media screen and (min-width: 900px) {
  #clock i {
  font-size:calc(16px + 12vw);  
  }
  #clock  {width:100%}
}
.hrs,.mins,.secs {width:1.4em;

}
.dots {
  display:inline-block;
  width:.3em;
  text-align:center.........完整代码请登录后点击上方下载按钮下载查看