svg打造博朗手表走动效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg打造博朗手表走动效果代码

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


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

<head>

  <meta charset="UTF-8">

  
<style>
/*
https://dev.to/flexdigital/creating-a-braun-bn0171-watch-svg-animation-40pe

Image credit: https://www.behance.net/gallery/64303683/Braun-Watch-Free-Vector-Resource
*/
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: #FFCC00;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 776px;
  margin: 0 auto 100px;
}

.watch {
  width: 403px;
  position: relative;
}
.watch-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-28px, -70px);
}
.watch-face {
  position: absolute;
  width: 359px;
  height: 359px;
  top: 208px;
  left: 19px;
}
.watch .hours {
  position: absolute;
  left: 50%;
  top: 88px;
  transform-origin: 48% 105%;
  filter: drop-shadow(1px 1px 0 #999999) drop-shadow(0.11rem 0.11rem 0.13rem rgba(0, 0, 0, 0.95));
}
.watch .mins {
  position: absolute;
  left: 49%;
  margin-left: 2px;
  top: 47px;
  transform-origin: 48% 103%;
  filter: drop-shadow(1px 1px 0 #999999) drop-shadow(0.11rem 0.11rem 0.13rem rgba(0, 0, 0, 0.95));
}
.watch .secs {
  position: absolute;
  left: 48%;
  top: 50px;
  transform-origin: 49% 84%;
  filter: drop-shadow(1px 1px 0 #f3dc7c) drop-shadow(0.11rem 0.11rem 0.13rem rgba(0, 0, 0, 0.95));
}

.credits {
  text-align: center;
  margin-bottom: 100px;
}
.credits a {
  color: #000000;
  text-decoration: none;
  border-bottom: 1px solid;
}
.credits sup {
  font-size: 90%;
}
.credits span {
  margin: 0 10px;
  font-size: 12px;
}
</style>



</head>

<body>
  <div class="container">
  <div class="watch">
    <svg width="403" height="776" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b">
          <stop stop-color="#383838" offset="0%"/>
          <stop stop-color="#2D2D2D" offset="100%"/>
        </linearGradient>
        <linearGradient x1="50%" y1="114.4%" x2="50%" y2="0%" id="c">
          <stop stop-color="#383838" offset="0%"/>
          <stop stop-color="#2D2D2D" offset="100%"/>
        </linearGradient>
        <linearGradient x1="129.7%" y1="50%" x2="37%" y2="50%" id="e">
          <stop stop-color="#141414" offset="0%"/>
          <stop stop-color="#5A5A5A" offset="100%"/>
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="g">
          <stop stop-color="#010101" offset="0%"/>
          <stop stop-color="#6A6A6A" offset="23.4%"/>
          <stop stop-color="#4A4848" offset="35.4%"/>
          <stop stop-color="#383838" offset="55%"/>
          <stop offset="100%"/>
        </linearGradient>
        <linearGradient x1="166.8%" y1="50%" x2="-40.1%" y2="50%" id="f">
          <stop stop-color="#262626" offset="0%"/>
          <stop offset="46.6%"/>
          <stop stop-color="#1F1F1F" offset="100%"/>
        </linearGradient>
        <linearGradient x1="-4.7%" y1="18.2%" x2="72.6%" y2="94.2%" id="j">
          <stop stop-color="#47474A" offset="0%"/>
          <stop stop-color="#050505" offset="100%"/>
        </linearGradient>
        <filter x="-72.7%" y="-44.4%" width="245.5%" height="188.9%" filterUnits="objectBoundingBox" id="d">
          <feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/>
          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.177139946 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/>
          <feMerge>
            <feMergeNode in="shadowMatrixOuter1"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
        <filter x="-3.1%" y="-3.1%" width="107%" height="112.3%" filterUnits="objectBoundingBox" id="h">
          <feMorphology radius="10" in="SourceAlpha" result="shadowSpreadOuter1"/>
          <feOffset dx="9" dy="28" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
          <feGaussianBlur stdDeviation="7" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.109091938 0" in="shadowBlurOuter1"/>
        </filter>
        <filter x="-8.1%" y="-6%" width="132.3%" height="113.1%" filterUnits="objectBoundingBox" id="l">
          <feOffset dx="20" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
          <feGaussianBlur stdDeviation="4.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowBlurOuter1"/>
        </filter>
        <filter x="-7.2%" y="-7.2%" width="114.5%" height="114.5%" filterUnits="objectBoundingBox" id="n">
          <feMorphology radius="5" in="SourceAlpha" result="shadowSpreadOuter1"/>
          <feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
          <feMorphology radius="15" in="SourceAlpha" result="shadowInner"/>
          <feOffset in="shadowInner" result="shadowInner"/>
          <feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"/>
          <feGaussianBlur stdDeviation="12" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowBlurOuter1"/>
        </filter>
        <circle id="i" cx="179.5" cy="179.5" r="179.5"/>
        <circle id="a" cx="180" cy="181" r="165"/>
        <circle id="o" cx="179.5" cy="179.5" r="179.5"/>
        <radialGradient .........完整代码请登录后点击上方下载按钮下载查看