简单的手表走动效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：简单的手表走动效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body{ overflow: hidden; }

/* line 3, ../sass/s.scss */
#watch {
  position: relative;
  margin: 50px;
}

/* Bands */
/* Grippers */
/* line 11, ../sass/s.scss */
.grip {
  position: absolute;
  border: 1px solid #777;
  width: 12px;
  height: 30px;
  background: #eee;
}

/* line 18, ../sass/s.scss */
#tlg {
  top: -11px;
  left: 50px;
  border-radius: 8px 4px 0 0;
  border-left: none;
  box-shadow: inset 0 1px 0px #444444, inset 0 2px 0 white, inset 0 -6px 3px #444444;
}

/* line 25, ../sass/s.scss */
#trg {
  top: -11px;
  left: 150px;
  border-radius: 4px 8px 0 0;
  border-right: none;
  box-shadow: inset 0 1px 0 #444444, inset 0 2px 0 white, inset 0 -6px 3px #444444;
}

/* line 32, ../sass/s.scss */
#blg {
  top: 151px;
  left: 50px;
  border-radius: 0 0 4px 8px;
  border-left: none;
  box-shadow: inset 0 -1px 0px #444444, inset 0 -2px 0 white, inset 0 6px 3px #444444;
}

/* line 39, ../sass/s.scss */
#brg {
  top: 151px;
  left: 150px;
  border-radius: 0 0 8px 4px;
  border-left: none;
  box-shadow: inset 0 -1px 0px #444444, inset 0 -2px 0 white, inset 0 6px 3px #444444;
}

/* Material */
/* line 47, ../sass/s.scss */
.band {
  background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
  width: 87px;
  height: 600px;
  position: absolute;
}

/* line 54, ../sass/s.scss */
#topBand {
  top: -80px;
  left: 63px;
}

/* line 59, ../sass/s.scss */
#botBand {
  top: 140px;
  left: 63px;
}

/* Starting with the face of the watch */
/* line 65, ../sass/s.scss */
#face {
  background-color: #fefefe;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFEFEFE', endColorstr='#FFFFFFFF');
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(17%, #dbd9da), color-stop(50%, #0b0d0c), color-stop(51%, #0b0e0c), color-stop(59%, #b0b1b5), color-stop(71%, #aeadbd), color-stop(84%, #cfcfcd), color-stop(100%, #ffffff));
  background-image: -webkit-linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%);
  background-image: -moz-linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%);
  background-image: -o-linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%);
  background-image: linear-gradient(top, #fefefe 0%, #dbd9da 17%, #0b0d0c 50%, #0b0e0c 51%, #b0b1b5 59%, #aeadbd 71%, #cfcfcd 84%, #ffffff 100%);
  margin: 20px;
  padding: 10px 0 0 10px;
  width: 160px;
  height: 160px;
  border: 1px solid #999;
  border-radius: 50%;
  box-shadow: inset 0 0 3px #000;
  position: relative;
}
/* line 78, ../sass/s.scss */
#face:after {
  content: " ";
  display: block;
  width: 14px;
  height: 22px;
  position: absolute;
  right: -15px;
  top: 74px;
  z-index: -9;
  border-radius: 10px;
  border: 1px solid #888;
  background-color: #aaa;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FF282828');
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(7%, #505050), color-stop(14%, #c5c7c6), color-stop(22%, #505050), color-stop(28%, #e6e4e7), color-stop(35%, #8d8c91), color-stop(42%, #e9e9e9), color-stop(49%, #8c8c8c), color-stop(57%, #e2e2e4), color-stop(65%, #c8c8c8), color-stop(72%, #808080), color-stop(76%, #b4b4b4), color-stop(85%, #fdfdfd), color-stop(92%, #b4b4b4), color-stop(100%, #282828));
  background-image: -webkit-linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%);
  background-image: -moz-linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%);
  background-image: -o-linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%);
  background-image: linear-gradient(top, #ffffff 0%, #505050 7%, #c5c7c6 14%, #505050 22%, #e6e4e7 28%, #8d8c91 35%, #e9e9e9 42%, #8c8c8c 49%, #e2e2e4 57%, #c8c8c8 65%, #808080 72%, #b4b4b4 76%, #fdfdfd 85%, #b4b4b4 92%, #282828 100%);
}

/* line 94, ../sass/s.scss */
#glass {
  box-shadow: inset 0 0 6px #000;
  background: #a6a39e;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFC8C5C0', endColorstr='#FFADA8A2');
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c8c5c0), color-stop(100%, #ada8a2));
  background-image: -webkit-linear-gradient(top, #c8c5c0 0%, #ada8a2 100%);
  background-image: -moz-linear-gradient(top, #c8c5c0 0%, #ada8a2 100%);
  background-image: -o-linear-gradient(top, #c8c5c0 0%, #ada8a2 100%);
  background-image: linear-gradient(top, #c8c5c0 0%, #ada8a2 100%);
  width: 150px;
  height: 150px;
  border: 1px solid #999;
  border-radius: 80px;
  position: relative;
  /* Numbers */
}
/* line 107, ../sass/s.scss */
#glass div {
  position: absolute;
  font-size: 14px;
}
/* line 111, ../sass/s.scss */
#glass div:nth-child(2n) {
  transform: rotate(-90deg);
}
/* line 115, ../sass/s.scss */
#glass #twelve {
  top: 3px;
  left: 65px;
}
/* line 116, ../sass/s.scss */
#glass #three {
  top: 66px;
  left: 135px;
}
/* line 117, ../sass/s.scss */
#glass #six {
  top: 135px;
  left: 67px;
}
/* line 118, ../sass/s.scss */
#glass #nine {
  top: 66px;
  left: 5px;
}
/* line 121, ../sass/s.scss */
#glass #center {
  background: #e1ddd2;
  box-shadow: inset 0 1px 1px #777777, inset 0 -1px 1px #777777;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  top: 20px;
  left: 20px;
}
/* line 130, ../sass/s.scss */
#glass #center div {
  top: 55px;
  left: 55px;
}
/* line 134, ../sass/s.scss */
#glass #center #name, #glass #center #desc {
  top: 10px;
  left: 32px;
  font-variant: small-caps;
  font-size: 8px;
}
/.........完整代码请登录后点击上方下载按钮下载查看