css+js实现咖啡盘子和杯子时钟显示时间代码-html代码-BFW代码库

css+js实现咖啡盘子和杯子时钟显示时间代码

代码语言：html

所属分类：其他

代码描述：css+js实现咖啡盘子和杯子时钟显示时间代码

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

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

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

  
  
<style>
.coffee-clock{
  --width: 70vmin;
  width: var(--width);
  font-size: calc(var(--width) / 100);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  > * { grid-area: 1/1 }
  > .plate {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: hsl(0 0% 95%);
    background-image: radial-gradient(hsl(0 0% 0% / .2), #0000);
    border: 1em solid hsl(0 0% 100% / .5);
    box-shadow: 3em 3em 4em hsl(0 0% 0% / .5);
    display: grid;
    &::before{
      content: "";
      grid-area: 1/1;
      border-radius: 50%;
      --w: calc(360deg / 60);
      background-image: repeating-conic-gradient(from -15deg, 
        transparent 0 14deg, 
        hsl(0 0% 50%) 14.5deg 15.5deg, 
        transparent 16deg 30deg);
      mask-image: radial-gradient(transparent 50%, black)
    }
  }
  > .cup {
    width: 55%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    box-shadow: 2em 2em 4em hsl(0 0% 0% / .5)
  }
  > .handle{
    width: 8%;
    height: 75%;
    place-self: center;
    display: grid;
    filter: drop-shadow(1.5em 1.5em 2em hsl(0 0% 0% / .5));
    > div {
      display: grid;
      rotate: var(--angle-hour);
      &::before{
        content: "";
        height: 50%;
        background-color: hsl(0 0% 90%);
        border-radius: 999vmax;
        box-shadow: inset 0 0 .25cqi hsl(0 0% 0% / .5);
      }
    }
  }
  > .coffee{
    width: 55%;
    aspect-ratio: 1/1;
    border: 3em solid hsl(0 0% 90%);
    border-radius: 50%;
    background-color: hsl(15 25% 10%);
    background-image: radial-gradient(#0000, hsl(0 0% 0% / .5));
    z-index: 1;
  }
  
  > .spoon{
    width: 5%;
    height: 100%;
    place-self: center;
    display: grid;
    filter: drop-shadow(1.5em 1.5em 2em hsl(0 0% 0% / .5));
    z-index: 1;
    > div {
      display: grid;
      perspective: 100em;
      transform.........完整代码请登录后点击上方下载按钮下载查看