html5 css3制作时钟,js html5 css3动态时钟

1

2

3

4

5

6

7

8

9

动态时钟

10

11 *{

12 margin:0;

13 padding:0;

14 background:gray;

15 }

16

17 .wrapper{

18 position:absolute;

19 left:50%;

20 top:50%;

21 margin-top:-150px;

22 margin-left:-150px;

23 width:300px;

24 height:300px;

25 /*background: white;*/

26 }

27

28 .horologe{

29 /*没有指针的时钟图片*/

30 background:url(img/原子钟2.png);

31 background-size:100%;

32 width:100%;

33 height:100%;

34 border-radius:50%;

35 display:flex;

36 justify-content:center;

37 align-items:center;

38 }

39

40 /*圆心*/

41 .clock{

42 background:red;

43 width:10px;

44 height:10px;

45 border-radius:50%;

46 }

47

48 /*刻度在没有背景图片时使用*/

49 .scale{

50 position:absolute;

51 background:red;

52 width:5px;

53 height:15px;

54 border-radius:5px;

55 }

56

57 .shi{

58

59 display:flex;

60 flex-direction:row;

61 justify-content:center;

62 background:rgb(28, 28, 29);

63 width:6px;

64 height:80px;

65 /*transform: rotate(0deg);*/

66 transform-origin:3px 70px;

67 border-radius:5px;

68 position:absolute;

69 top:80px;

70 }

71

72 .shi::before{

73 content:‘‘;

74 display:block;

75 width:5px;

76 height:10px;

77 background:rgb(28, 28, 29);

78 transform:rotate(160deg);

79 position:relative;

80 top:-5px;

81 left:3px;

82 border-radius:50%;

83 }

84

85 .shi::after{

86 position:relative;

87 content:‘‘;

88 display:block;

89 width:5px;

90 height:10px;

91 background:rgb(28, 28, 29);

92 transform:rotate(-160deg);

93 top:-5px;

94 left:-3px;

95 border-radius:50%;

96 }

97

98 .fen{

99 display:flex;

100 flex-direction:row;

101 justify-content:center;

102 background:rgb(28, 28, 29);

103 width:4px;

104 height:115px;

105 /*transform: rotate(10deg);*/

106 transform-origin:2px 100px;

107 border-radius:5px;

108 position:absolute;

109 top:50px;

110 }

111

112 .miao{

113 display:flex;

114 flex-direction:row;

115 justify-content:center;

116 background:rgb(28, 28, 29);

117 width:1px;

118 height:150px;

119 /*transform: rotate(0deg);*/

120 transform-origin:0.5px 130px;

121 border-radius:5px;

122 position:absolute;

123 top:20px;

124 }

125

126

127

128

129

130

131