单个元素纯CSS手表，HTML/Vue代码在线实时编辑、预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

            
            $t: rgba(255,255,255,0.0001);
$g: #dae7cd;


body{
  display:grid;
  height:100vh;
  place-items:center;
  background:radial-gradient(circle at center, #fff 300px, #ccc);
  div{
    width:150px;
    height:140px;
    background:
      linear-gradient(to bottom, #555 20px, $t 20px, $t 50px, #555 50px, #555 70px, $t 70px) calc(100% + 5px) calc(50% + 35px) / 10px 100% no-repeat,
      linear-gradient(to bottom, #333 10px, $t 10px, $t calc(100% - 10px), #333 calc(100% - 10px)) calc(50% - 5px) 50% / calc(100% - 60px) 100% no-repeat,
      linear-gradient(45deg, $t 20px, #333 20px, #333 33px, darken(#333, 10%) 30px, darken(#333, 10%) 36px, $t 36px) calc(50% - 6px) 100% / 100% 30px no-repeat,
      linear-gradient(-45deg, $t 22.5px, darken(#333, 10%) 20px, darken(#333, 10%) 30px, #333 30px, #333 40px, $t 40px) calc(50% + 4px) 100% / 100% 27px no-repeat,
      linear-gradient(135deg, $t 20px, #333 20px, #333 33px, darken(#333, 10%) 30px, darken(#333, 10%) 36px, $t 36px) calc(50% - 6px) 0% / 100% 30px no-repeat,
      linear-gradient(-135deg, $t 22.5px, darken(#333, 10%) 20px, darken(#333, 10%) 30px, #333 30px, #333 40px, $t 40px) calc(50% + 4px) 0% / 100% 27px no-repeat,
      linear-gradient(to right, #333 10px, darken(#333, 20%) 10px, darken(#333, 20%) 15px, $t 10px, $t calc(100% - 25px), #333 calc(100% - 25px), #333 calc(100% - 10px), darken(#333, 10%) calc(100% - 10px), darken(#333, 10%) calc(100% - 1.5px), $t calc(100% - 1.5px)) calc(50% - 0px) 50% / calc(100% - 0px) calc(100% - 52.5px) no-repeat,
      repeating-linear-gradient(to bottom, #000 1.5px, #000 2px, $t 2px, $t 5px, #000 5px, #000 5.5px) calc(50% - 7.5px) 15px / 40% 20px no-repeat,
      repeating-linear-gradient(to bottom, #000 1.5px, #000 2px, $t 2px, $t 5px, #000 5px, #000 5.5px) calc(50% - 7.5px) calc(100% - 15px) / 40% 20px no-repeat,
      linear-gradient(to bottom, #444 35px, $t 35px, $t calc(100% - 35px), #444 calc(100% - 40px)) 50% 50% / calc(100% - 40px) calc(100% - 15px) no-repeat,
      linear-gradient(to right, #444 20px, darken($g, 15%) 20px, $g 30px, $g calc(100% - 35px), darken($g,15%) calc(100% - 25px), #444 calc(100% - 25px)) calc(50% - 5px) 50% / calc(100% - 20px) calc(100% - 35px) no-repeat;
    position:relative;
    margin-left:-75px;
    &:before{
      content:'4 20';
      position:absolute;
      font-size:30px;
      background:radial-gradient(circle at center, #000 2px, $t 2px) -12.5px -5px / 100% no-repeat, radial-gradient(circle at center, #000 2px, $t 2px) -12.5px -15px / 100% no-repeat;
      left:30px;
      letter-spacing:2px;
      top:50px;
      width:75px;
      height:60px;
      box-shadow:132.5px 0px 0 -10px #444, 134.5px 0px 0 #000;
      border-radius:5px;
      animation:blink 1s linear infinite;
      @keyframes blink{
        50%{
          background:radial-gradient(circle at center, $t 2px, $t 2px) -12.5px -5px / 100% no-repeat, radial-gradient(circle at center, $t 2px, $t 2px) -12.5px -15px / 100% no-repeat;
        }
      }
    }
    &:after{
      content:'';
      position:absolute;
      width:125px;
      height:90px;
      left:105px;
      top:-20px;
      z-index:-1;
      box-shadow:0 40px 0 #fff, inset -75px 0px 0 -20px #444, -35px 0px 0 35px #111, ;
      border-radius:200px 200px 200px 200px / 200px 100px 0 0;
      -webkit-box-reflect:below;
    }
  }
}