temporal+svg实现逼真质感麻子手表代码-html代码-BFW代码库

temporal+svg实现逼真质感麻子手表代码

代码语言：html

代码描述：temporal+svg实现逼真质感麻子手表代码

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

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

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

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni&display=swap');

:root {
  --c0: #000;
  --c1: #fff;
  --c2: #f0f0f8;
  --s1: hsl(45, 30%, 30%);
  --s2: hsl(46, 23%, 45%);
  --s3: hsl(48, 20%, 60%);
  --s4: hsl(50, 15%, 75%);
}

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: hsl(120, 20%, 30%);
}
svg {
  width: 100%;
  height: 100%;
  color-interpolation: sRGB;
  color-interpolation-filters: sRGB;
}

#hourly {
  animation: round 43200s var(--s) linear infinite;
}
#minutely {
  animation: round 3600s var(--s) linear infinite;
}
#secondly {
  animation: round 60s var(--s) linear infinite;
}
@keyframes round {
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}
</style>


  
</head>

<body translate="no">
  <svg viewBox="-300 -300 850 600" style="filter:drop-shadow(#221c -2px 0px 10px)">
  <filter id="f1" >
    <feFlood flood-color="var(--s1)" />
    <feComposite in2="SourceGraphic" operator="in"/>
    <feGaussianBlur stdDeviation="2" result="a"/>
    <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
    <feComposite in2="SourceGraphic" operator="in"/>
    <feMerge>
      <feMergeNode in="a"/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
  <clipPath id="cp">
    <circle r="280"/>
  </clipPath>
  <radialGradient id="rg1" cx="-40" cy="0" r="280" gradientUnits="userSpaceOnUse">
    <stop offset=".1" stop-color="var(--s1)"/>
    <stop offset=".9" stop-color="var(--s4)"/>
    <stop offset=".95" stop-color="var(--c1)"/>
    <stop offset="1" stop-color="var(--s4)"/>
  </radialGradient>
  <radialGradient id="rg2" cx="424" cy="-1" r="102" gradientUnits="userSpaceOnUse">
    <stop offset=".75" stop-color=".........完整代码请登录后点击上方下载按钮下载查看