简单的手表走动效果-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%, #c.........完整代码请登录后点击上方下载按钮下载查看