html怎么做一个圆形表格,分享一个html编写的圆形时钟模版

1 2

34

5

6

78

9

html圆形时钟模拟10

11

13 html{14

15 background:#000;16

17 color:#666;18

19 font-size:12px;20

21 overflow:hidden;22

23}24

25 *{26

27 margin:0;28

29 padding:0;30

31}32

33 span{34

35 display:block;36

37 float:left;38

39}40

41 .on{42

43 color:#fff;44

45}46

47 .wrapper{48

49 width:200px;50

51 height:200px;52

53 position:absolute;54

55 left:50%;56

57 top:50%;58

59 margin-top:-100px;60

61 margin-left:-100px;62

63}64

65 .wrapper .timebox{66

67 position:absolute;68

69 width:200px;70

71 height:200px;72

73 top:0;74

75 left:0;76

77 border-radius:100%;78

79 transition:all 0.5s;80

81}82

83 .timebox span{84

85 transition:all 0.5s;86

87 float:left;88

89}90

91 .wrapper .timebox span{92

93 position:absolute;94

95 left:50%;96

97 top:50%;98

99 width:40px;100

101 height:18px;102

103 margin-top:-9px;104

105 margin-left:-20px;106

107 text-align:right;108

109}110

111112

113114

115

116

117118

119

120