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

代码语言:html

所属分类:布局界面

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

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

网友评论0