独特的水平状的表

从上而下，三条横线分别代表时、分、秒

watch

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1758
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
  background-color: #000; }

.watch {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: 100%;
  max-width: 600px;
  padding: 0 10px;
  margin: -60px auto 0; }

.seconds, .minutes, .hours {
  height: 40px;
  border-radius: 20px;
  margin-bottom: 2px;
  box-shadow: 0 -3px 25px 1px rgba(0, 0, 0, .5); }

.seconds {
  background-color: rgba(233, 11, 58, .2); }

.minutes {
  background-color: rgba(160, 255, 3, .2); }

.hours {
  background-color: rgba(26, 213, 222, .2); }

.seconds > .seconds, .minutes > .minutes, .hours > .hours {
  transition: width 0.5s; }

.seconds > .seconds {
  background-image: linear-gradient(#e90b3a, rgba(233, 11, 58, .6)); }

.minutes > .minutes {
  background-image: linear-gradient(#a0ff03, rgba(160, 255, 3, .6)); }

.hours > .hours {
  background-image: linear-gradient(#1ad5de, rgba(26, 213, 222, .6)); }

.icons {
  margin-left: 15px;
  font-family: arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  line-height: 38px;
  white-space: nowrap; }

HTML

从上而下，三条横线分别代表时、分、秒

watch

编辑器支持Emmet

快捷键

从上而下，三条横线分别代表时、分、秒

watch

html5版本的土豪金劳力士表（Rolex）

用于可穿戴设备（手表 | 腕表）上的迷你消息通知卡界面设计

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：