CSS 3+HTML 5特効9-シンプルクロック

原文:
CSS 3+HTML 5特効9-シンプルクロック
効果のプレゼンテーション(100倍高速)
 
 
 
 
 
 
 
<!--
@-webkit-keyframes rotateLabel {
0%{
-webkit-transform-origin:0% 100%;
-webkit-transform: rotate(0deg);
}
100%{
-webkit-transform-origin:0% 100%;
-webkit-transform: rotate(360deg);
}
}
@keyframes rotateLabel {
0%{
transform-origin:0% 100%;
transform: rotate(0deg);
}
100%{
transform-origin:0% 100%;
transform: rotate(360deg);
}
}
.hour
{
position: absolute;
top: 280px;
left: 400px;
width: 1px;
height: 50px;
background-color: #000;
-webkit-animation:rotateLabel 4320s infinite linear ;
animation:rotateLabel 4320s infinite linear ;
}
.minute
{
position: absolute;
top: 260px;
left: 400px;
width: 1px;
height: 70px;
background-color: #0000ff;
-webkit-animation:rotateLabel 36s infinite linear ;
animation:rotateLabel 36s infinite linear ;
}
.second
{
position: absolute;
top: 230px;
left: 400px;
width: 1px;
height: 100px;
background-color: #ff0000;
-webkit-animation:rotateLabel 0.6s infinite linear ;
animation:rotateLabel 0.6s infinite linear ;
}
.border{
position: absolute;
top: 225px;
left: 295px;
width: 210px;
height: 210px;
border-radius: 105px;
border: 1px solid #e0e0e0;
}
-->
 
 
 
 
実装の原理
CSS 3のtransform-originおよびtransformで以上の効果を達成します.
 
コードおよび説明

 1 <style>

 2 @-webkit-keyframes rotateLabel {

 3     0%{

 4         -webkit-transform-origin:0% 100%;

 5         -webkit-transform: rotate(0deg);

 6     }

 7     100%{

 8         -webkit-transform-origin:0% 100%;

 9         -webkit-transform: rotate(360deg);

10     }

11 }

12  

13 @keyframes rotateLabel {

14     0%{

15         transform-origin:0% 100%;

16         transform: rotate(0deg);

17     }

18     100%{

19         transform-origin:0% 100%;

20         transform: rotate(360deg);

21     }

22  }

23 .hour

24 {

25     position: absolute;

26     top: 60px;

27     left: 200px;

28     width: 1px;

29     height: 50px;

30     background-color: #000;

31     -webkit-animation:rotateLabel 43200s infinite linear ;

32     animation:rotateLabel 43200s infinite linear ;

33 }

34 .minute

35 {

36     position: absolute;

37     top: 40px;

38     left: 200px;

39     width: 1px;

40     height: 70px;

41     background-color: #0000ff;

42     -webkit-animation:rotateLabel 3600s infinite linear ;

43     animation:rotateLabel 3600s infinite linear ;

44 }

45 .second

46 {

47     position: absolute;

48     top: 10px;

49     left: 200px;

50     width: 1px;

51     height: 100px;

52     background-color: #ff0000;

53     -webkit-animation:rotateLabel 60s infinite linear ;

54     animation:rotateLabel 60s infinite linear ;

55 }

56 

57 .border{

58     position: absolute;

59     top: 5px;

60     left: 95px;

61     width: 210px;

62     height: 210px;

63     border-radius: 105px;

64     border: 1px solid #e0e0e0;

65 }

66 </style>

67 

68 <div class="hour"></div>

69 <div class="minute"></div>

70 <div class="second"></div>

71 <div class="border"></div>

 

第2-22行は、回転の中性点と回転の角度を定義している.

第23-33行は、時計回りの効果を定義するとともに、43200秒で1週間回転する、すなわち12時間で360度回転することを定義した.

第34-44行は、分針の効果を定義するとともに、3600秒の回転1週間、すなわち1時間の回転360度を定義する.

第45-55行は、秒針の効果を定義するとともに、60秒回転1週間、すなわち1分回転360度を定義する.

第57-65行は、文字盤を定義している.

第68-71行、時計回り、分針、秒針、時計盤を表示します.

 
これで簡単な時計が完成し、現在のコンピュータの時間と一致するには、JSを使用して時計回り、分針、秒針の初期角度を調整するだけです.