css+js实现算盘型阿巴时钟Abaclock显示时间代码-html代码-BFW代码库

css+js实现算盘型阿巴时钟Abaclock显示时间代码

代码语言：html

所属分类：其他

代码描述：css+js实现算盘型阿巴时钟Abaclock显示时间代码

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

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

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

  
  
  
<style>
.abaclock{
  --max-beads: 10;
  --min-beads-gap: 4;
  container-type: inline-size;
  display: grid;
  width: min(30rem, 100%);
  margin-inline: auto;
  position: relative;
  --grad: hsl(0 0% 100% / .25), hsl(0 0% 100% / .5) 25%, hsl(0 0% 0% / .5) 90%;
  &::before, &::after{
    content: "";
    position: absolute;
    width: 5cqi;
    background-color: orange;
    background-image: linear-gradient(90deg, var(--grad));
    height: 100%;
    top: 0;
    border-radius: 5cqi 5cqi 0 0;
  }
  &::before { left: 0 }
  &::after { right: 0 }
  > time {
    width: 100%;
    text-align: center;
    font-size: 5cqi;
    color: white;
    font-family: system-ui, sans-serif;
  }
  > [data-beads] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-inline: 5cqi;
    margin-block: 1cqi;
    &:first-of-type{ margin-top: 10cqi}
    &::before{
      content: "";
      position: absolute;
      inset: 40% 0;
      background-color: var(--color);
      background-image: linear-gradient(var(--grad));
      z-index: -1;
    }

    > i {
      width: calc(100% / (var(--max-beads) + var(--min-beads-gap,1)));
      aspect-ratio: 1/1.5;
      border-radius:25%;
      transition: transform 0.5s;
      background-color: var(--color);
      background-image: linear-gradient(var(--grad));
      box-shadow: inset 0 -10px 10px hsl(0 0% 0% /.5);
      &[data-active=true] {
        transform: translateX(calc(-100% * (var(--max-beads) - var(--beads, var(--max-beads)) + var(--min-beads-gap,1))));
      }   
    }
  }
}

*, *::before, *::after { box-sizing: border-box}
body {
  margin: 0;
  padding: 2rem;
  display: grid;
  align-items: center;
  min-height: 100vh;
  
}
body::after{
  content: "";
 .........完整代码请登录后点击上方下载按钮下载查看