正方形手表走动效果swag-html代码-BFW代码库

正方形手表走动效果swag

代码语言：html

所属分类：其他

代码描述：正方形手表走动效果swag

代码标签：效果 swag

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


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

<style>
@import "https://fonts.googleapis.com/css?family=PT+Sans+Narrow";
html, body {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  font-size: 12px;
  font-family: 'PT Sans Narrow';
  background: -webkit-gradient(linear, right top, left bottom, from(#47C9AF), to(#D9F5BE)) 100% no-repeat;
  background: linear-gradient(to bottom left, #47C9AF 0%, #D9F5BE 100%) 100% no-repeat;
}

.watch {
  width: 150px;
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: calc(-0.5 * 150px);
}

.strap {
  background: #292929;
  height: 100%;
  width: 90px;
  border-left: 5px solid #4a4a4a;
  border-right: 5px solid #4a4a4a;
  position: absolute;
  left: 50%;
  margin-left: calc(-0.5 * 100px);
}

.face {
  background: #292929;
  border: 5px solid #CDB380;
  width: 140px;
  height: 140px;
  position: absolute;
  top: 50%;
  margin-top: calc(-0.5 * 150px);
  box-shadow: 0 0 80px 0 rgba(0, 0, 0, 0.6), inset 0 0 50px 0 rgba(0, 0, 0, 0.6);
}

.numeral {
  background: #4a4a4a;
  height: 20px;
  width: 4px;
}

.n-12, .n-6 {
  position: absolute;
  left: 50%;
  margin-left: calc(-0.5 * 4px);
}

.n-3, .n-9 {
  height: 4px;
  width: 20px;
  position: absolute;
  top: 50%;
  margin-top: calc(-0.5 * 4px);
}

.n-12 {
  top: 5px;
}

.n-6 {
  bottom: 5px;
}

.n-3 {
  right: 5px;
}

.n-9 {
  left: 5px;
}

.cntrpt {
  background: #CDB380;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  margin-top: calc(-0.5 * 10px);
  position: absolute;
  left: 50%;
  margin-left: calc(-0.5 * 10px);
}

.crown {
  background: #4a4a4a;
  height: 20px;
  width: 10px;
  right: -10px;
  position: absolute;
  top: 50%;
  margin-top: calc(-0.5 * 20px);
}

.hand {
  background: #4a4a4a;
  position: absolute;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}

.hours {
  width: 6px;
  height: 28px;
  position: absolute;
  left: 50%;
  margin-left: calc(-0.5 * 6px);
  top: calc(70px - 28px);
}

.mins {
  width: 4px;
  height: 42px;
  position: absolute;
  left: 50%;
  margin-left: calc(-0.5 * 4px);
  top: calc(70px - 42px);
}

.secs {
  background: #BF4A67;
  width: 2px;
  height: 5.........完整代码请登录后点击上方下载按钮下载查看