CSS 手表

下载代码

html

css

分享到微信朋友圈

html

css

@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-linear-gradient(top right, #47C9AF 0%, #D9F5BE 100%) 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 * calc(90px + 10px));
}

.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: calc(0.2 * 140px);
  position: absolute;
  left: 50%;
  margin-left: calc(-0.5 * 6px);
  top: calc(0.5 * 140px - calc(0.2 * 140px));
}

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

.secs {
  background: #BF4A67;
  width: 2px;
  height: calc(0.4 * 140px);
  position: absolute;
  left: 50%;
  margin-left: calc(-0.5 * 2px);
  top: calc(0.5 * 140px - calc(0.4 * 140px));
}

.day {
  background: #292929;
  color: #CDB380;
  border: 1px solid #CDB380;
  width: calc(0.13 * 140px);
  height: calc(0.1 * 140px);
  line-height: calc(0.1 * 140px);
  text-align: center;
  position: absolute;
  top: 50%;
  margin-top: calc(-0.5 * calc(0.13 * 140px));
  right: 28px;
}

.logo {
  color: #CDB380;
  width: 40px;
  letter-spacing: 5px;
  height: 12px;
  line-height: 12px;
  text-align: center;
  position: absolute;
  left: 50%;
  margin-left: calc(-0.5 * 40px);
  top: 36px;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg