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