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

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

代码语言：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">
       .........完整代码请登录后点击上方下载按钮下载查看