Có lẽ các bạn đã quá quen thuộc với các thủ thuật tạo đồng hồ bằng javacript hay flash, tuy nhiên các bạn đã từng làm bằng CSS3 chưa, và cùng mình từng bước làm đồng hồ bằng CSS3 nhé.
Bước 1 : HTML
Các bạn copy đoạn html sau
<div class="container">
<div id="clock">
<div class="secs">
<div id="s1"></div><div id="s2"></div><div id="s3"></div>
<div id="s4"></div><div id="s5"></div><div id="s6"></div>
<div id="s7"></div><div id="s8"></div><div id="s9"></div>
<div id="s10"></div><div id="s11"></div><div id="s12"></div>
<div id="s13"></div><div id="s14"></div><div id="s15"></div>
<div id="s16"></div><div id="s17"></div><div id="s18"></div>
<div id="s19"></div><div id="s20"></div><div id="s21"></div>
<div id="s22"></div><div id="s23"></div><div id="s24"></div>
<div id="s25"></div><div id="s26"></div><div id="s27"></div>
<div id="s28"></div><div id="s29"></div><div id="s30"></div>
<div id="s31"></div><div id="s32"></div><div id="s33"></div>
<div id="s34"></div><div id="s35"></div><div id="s36"></div>
<div id="s37"></div><div id="s38"></div><div id="s39"></div>
<div id="s40"></div><div id="s41"></div><div id="s42"></div>
<div id="s43"></div><div id="s44"></div><div id="s45"></div>
<div id="s46"></div><div id="s47"></div><div id="s48"></div>
<div id="s49"></div><div id="s50"></div><div id="s51"></div>
<div id="s52"></div><div id="s53"></div><div id="s54"></div>
<div id="s55"></div><div id="s56"></div><div id="s57"></div>
<div id="s58"></div><div id="s59"></div><div id="s60"></div>
</div>
<div class="mins">
<div id="m1"></div><div id="m2"></div><div id="m3"></div>
<div id="m4"></div><div id="m5"></div><div id="m6"></div>
<div id="m7"></div><div id="m8"></div><div id="m9"></div>
<div id="m10"></div><div id="m11"></div><div id="m12"></div>
<div id="m13"></div><div id="m14"></div><div id="m15"></div>
<div id="m16"></div><div id="m17"></div><div id="m18"></div>
<div id="m19"></div><div id="m20"></div><div id="m21"></div>
<div id="m22"></div><div id="m23"></div><div id="m24"></div>
<div id="m25"></div><div id="m26"></div><div id="m27"></div>
<div id="m28"></div><div id="m29"></div><div id="m30"></div>
<div id="m31"></div><div id="m32"></div><div id="m33"></div>
<div id="m34"></div><div id="m35"></div><div id="m36"></div>
<div id="m37"></div><div id="m38"></div><div id="m39"></div>
<div id="m40"></div><div id="m41"></div><div id="m42"></div>
<div id="m43"></div><div id="m44"></div><div id="m45"></div>
<div id="m46"></div><div id="m47"></div><div id="m48"></div>
<div id="m49"></div><div id="m50"></div><div id="m51"></div>
<div id="m52"></div><div id="m53"></div><div id="m54"></div>
<div id="m55"></div><div id="m56"></div><div id="m57"></div>
<div id="m58"></div><div id="m59"></div><div id="m60"></div>
</div>
<div class="hours">
<div id="h1"></div><div id="h2"></div><div id="h3"></div>
<div id="h4"></div><div id="h5"></div><div id="h6"></div>
<div id="h7"></div><div id="h8"></div><div id="h9"></div>
<div id="h10"></div><div id="h11"></div><div id="h12"></div>
</div>
</div>
</div>
Bước 2 : CSS
Sau đây là đoạn css giúp bạn tạo ra hiệu ứng chuyển động cho các kim giây, phút và giờ
#clock {
background: #fff url(cface.png) 0 0 no-repeat;
height: 500px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 500px;
-webkit-border-radius: 250px;
-moz-border-radius: 250px;
-ms-border-radius: 250px;
-o-border-radius: 250px;
border-radius: 250px;
}
/* seconds */
@-webkit-keyframes secs_effect {
0% {opacity: 1;}
1.66% {opacity: 1;}
1.67% {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes secs_effect {
0% {opacity: 1;}
1.66% {opacity: 1;}
1.67% {opacity: 0;}
100% {opacity: 0;}
}
#clock .secs {
height: 400px;
left: 155px;
position: absolute;
top: 249px;
width: 400px;
}
#clock .secs div {
background-color: #860000;
height: 2px;
opacity: 0;
position: absolute;
width: 190px;
-moz-animation-name: secs_effect;
-moz-animation-duration: 60s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: secs_effect;
-webkit-animation-duration: 60s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#clock #s1 {
-moz-transform: rotate(-90deg) translatex(130px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-90deg) translatex(130px);
-webkit-animation-delay: 0s;
}
#clock #s2 {
-moz-transform: rotate(-84deg) translatex(130px);
-moz-animation-delay: 1s;
-webkit-transform: rotate(-84deg) translatex(130px);
-webkit-animation-delay: 1s;
}
#clock #s3 {
-moz-transform: rotate(-78deg) translatex(130px);
-moz-animation-delay: 2s;
-webkit-transform: rotate(-78deg) translatex(130px);
-webkit-animation-delay: 2s;
}
#clock #s4 {
-moz-transform: rotate(-72deg) translatex(130px);
-moz-animation-delay: 3s;
-webkit-transform: rotate(-72deg) translatex(130px);
-webkit-animation-delay: 3s;
}
#clock #s5 {
-moz-transform: rotate(-66deg) translatex(130px);
-moz-animation-delay: 4s;
-webkit-transform: rotate(-66deg) translatex(130px);
-webkit-animation-delay: 4s;
}
#clock #s6 {
-moz-transform: rotate(-60deg) translatex(130px);
-moz-animation-delay: 5s;
-webkit-transform: rotate(-60deg) translatex(130px);
-webkit-animation-delay: 5s;
}
#clock #s7 {
-moz-transform: rotate(-54deg) translatex(130px);
-moz-animation-delay: 6s;
-webkit-transform: rotate(-54deg) translatex(130px);
-webkit-animation-delay: 6s;
}
#clock #s8 {
-moz-transform: rotate(-48deg) translatex(130px);
-moz-animation-delay: 7s;
-webkit-transform: rotate(-48deg) translatex(130px);
-webkit-animation-delay: 7s;
}
#clock #s9 {
-moz-transform: rotate(-42deg) translatex(130px);
-moz-animation-delay: 8s;
-webkit-transform: rotate(-42deg) translatex(130px);
-webkit-animation-delay: 8s;
}
#clock #s10 {
-moz-transform: rotate(-36deg) translatex(130px);
-moz-animation-delay: 9s;
-webkit-transform: rotate(-36deg) translatex(130px);
-webkit-animation-delay: 9s;
}
#clock #s11 {
-moz-transform: rotate(-30deg) translatex(130px);
-moz-animation-delay: 10s;
-webkit-transform: rotate(-30deg) translatex(130px);
-webkit-animation-delay: 10s;
}
#clock #s12 {
-moz-transform: rotate(-24deg) translatex(130px);
-moz-animation-delay: 11s;
-webkit-transform: rotate(-24deg) translatex(130px);
-webkit-animation-delay: 11s;
}
#clock #s13 {
-moz-transform: rotate(-18deg) translatex(130px);
-moz-animation-delay: 12s;
-webkit-transform: rotate(-18deg) translatex(130px);
-webkit-animation-delay: 12s;
}
#clock #s14 {
-moz-transform: rotate(-12deg) translatex(130px);
-moz-animation-delay: 13s;
-webkit-transform: rotate(-12deg) translatex(130px);
-webkit-animation-delay: 13s;
}
#clock #s15 {
-moz-transform: rotate(-6deg) translatex(130px);
-moz-animation-delay: 14s;
-webkit-transform: rotate(-6deg) translatex(130px);
-webkit-animation-delay: 14s;
}
#clock #s16 {
-moz-transform: rotate(0deg) translatex(130px);
-moz-animation-delay: 15s;
-webkit-transform: rotate(0deg) translatex(130px);
-webkit-animation-delay: 15s;
}
#clock #s17 {
-moz-transform: rotate(6deg) translatex(130px);
-moz-animation-delay: 16s;
-webkit-transform: rotate(6deg) translatex(130px);
-webkit-animation-delay: 16s;
}
#clock #s18 {
-moz-transform: rotate(12deg) translatex(130px);
-moz-animation-delay: 17s;
-webkit-transform: rotate(12deg) translatex(130px);
-webkit-animation-delay: 17s;
}
#clock #s19 {
-moz-transform: rotate(18deg) translatex(130px);
-moz-animation-delay: 18s;
-webkit-transform: rotate(18deg) translatex(130px);
-webkit-animation-delay: 18s;
}
#clock #s20 {
-moz-transform: rotate(24deg) translatex(130px);
-moz-animation-delay: 19s;
-webkit-transform: rotate(24deg) translatex(130px);
-webkit-animation-delay: 19s;
}
#clock #s21 {
-moz-transform: rotate(30deg) translatex(130px);
-moz-animation-delay: 20s;
-webkit-transform: rotate(30deg) translatex(130px);
-webkit-animation-delay: 20s;
}
#clock #s22 {
-moz-transform: rotate(36deg) translatex(130px);
-moz-animation-delay: 21s;
-webkit-transform: rotate(36deg) translatex(130px);
-webkit-animation-delay: 21s;
}
#clock #s23 {
-moz-transform: rotate(42deg) translatex(130px);
-moz-animation-delay: 22s;
-webkit-transform: rotate(42deg) translatex(130px);
-webkit-animation-delay: 22s;
}
#clock #s24 {
-moz-transform: rotate(48deg) translatex(130px);
-moz-animation-delay: 23s;
-webkit-transform: rotate(48deg) translatex(130px);
-webkit-animation-delay: 23s;
}
#clock #s25 {
-moz-transform: rotate(54deg) translatex(130px);
-moz-animation-delay: 24s;
-webkit-transform: rotate(54deg) translatex(130px);
-webkit-animation-delay: 24s;
}
#clock #s26 {
-moz-transform: rotate(60deg) translatex(130px);
-moz-animation-delay: 25s;
-webkit-transform: rotate(60deg) translatex(130px);
-webkit-animation-delay: 25s;
}
#clock #s27 {
-moz-transform: rotate(66deg) translatex(130px);
-moz-animation-delay: 26s;
-webkit-transform: rotate(66deg) translatex(130px);
-webkit-animation-delay: 26s;
}
#clock #s28 {
-moz-transform: rotate(72deg) translatex(130px);
-moz-animation-delay: 27s;
-webkit-transform: rotate(72deg) translatex(130px);
-webkit-animation-delay: 27s;
}
#clock #s29 {
-moz-transform: rotate(78deg) translatex(130px);
-moz-animation-delay: 28s;
-webkit-transform: rotate(78deg) translatex(130px);
-webkit-animation-delay: 28s;
}
#clock #s30 {
-moz-transform: rotate(84deg) translatex(130px);
-moz-animation-delay: 29s;
-webkit-transform: rotate(84deg) translatex(130px);
-webkit-animation-delay: 29s;
}
#clock #s31 {
-moz-transform: rotate(90deg) translatex(130px);
-moz-animation-delay: 30s;
-webkit-transform: rotate(90deg) translatex(130px);
-webkit-animation-delay: 30s;
}
#clock #s32 {
-moz-transform: rotate(96deg) translatex(130px);
-moz-animation-delay: 31s;
-webkit-transform: rotate(96deg) translatex(130px);
-webkit-animation-delay: 31s;
}
#clock #s33 {
-moz-transform: rotate(102deg) translatex(130px);
-moz-animation-delay: 32s;
-webkit-transform: rotate(102deg) translatex(130px);
-webkit-animation-delay: 32s;
}
#clock #s34 {
-moz-transform: rotate(108deg) translatex(130px);
-moz-animation-delay: 33s;
-webkit-transform: rotate(108deg) translatex(130px);
-webkit-animation-delay: 33s;
}
#clock #s35 {
-moz-transform: rotate(114deg) translatex(130px);
-moz-animation-delay: 34s;
-webkit-transform: rotate(114deg) translatex(130px);
-webkit-animation-delay: 34s;
}
#clock #s36 {
-moz-transform: rotate(120deg) translatex(130px);
-moz-animation-delay: 35s;
-webkit-transform: rotate(120deg) translatex(130px);
-webkit-animation-delay: 35s;
}
#clock #s37 {
-moz-transform: rotate(126deg) translatex(130px);
-moz-animation-delay: 36s;
-webkit-transform: rotate(126deg) translatex(130px);
-webkit-animation-delay: 36s;
}
#clock #s38 {
-moz-transform: rotate(132deg) translatex(130px);
-moz-animation-delay: 37s;
-webkit-transform: rotate(132deg) translatex(130px);
-webkit-animation-delay: 37s;
}
#clock #s39 {
-moz-transform: rotate(138deg) translatex(130px);
-moz-animation-delay: 38s;
-webkit-transform: rotate(138deg) translatex(130px);
-webkit-animation-delay: 38s;
}
#clock #s40 {
-moz-transform: rotate(144deg) translatex(130px);
-moz-animation-delay: 39s;
-webkit-transform: rotate(144deg) translatex(130px);
-webkit-animation-delay: 39s;
}
#clock #s41 {
-moz-transform: rotate(150deg) translatex(130px);
-moz-animation-delay: 40s;
-webkit-transform: rotate(150deg) translatex(130px);
-webkit-animation-delay: 40s;
}
#clock #s42 {
-moz-transform: rotate(156deg) translatex(130px);
-moz-animation-delay: 41s;
-webkit-transform: rotate(156deg) translatex(130px);
-webkit-animation-delay: 41s;
}
#clock #s43 {
-moz-transform: rotate(162deg) translatex(130px);
-moz-animation-delay: 42s;
-webkit-transform: rotate(162deg) translatex(130px);
-webkit-animation-delay: 42s;
}
#clock #s44 {
-moz-transform: rotate(168deg) translatex(130px);
-moz-animation-delay: 43s;
-webkit-transform: rotate(168deg) translatex(130px);
-webkit-animation-delay: 43s;
}
#clock #s45 {
-moz-transform: rotate(174deg) translatex(130px);
-moz-animation-delay: 44s;
-webkit-transform: rotate(174deg) translatex(130px);
-webkit-animation-delay: 44s;
}
#clock #s46 {
-moz-transform: rotate(180deg) translatex(130px);
-moz-animation-delay: 45s;
-webkit-transform: rotate(180deg) translatex(130px);
-webkit-animation-delay: 45s;
}
#clock #s47 {
-moz-transform: rotate(186deg) translatex(130px);
-moz-animation-delay: 46s;
-webkit-transform: rotate(186deg) translatex(130px);
-webkit-animation-delay: 46s;
}
#clock #s48 {
-moz-transform: rotate(192deg) translatex(130px);
-moz-animation-delay: 47s;
-webkit-transform: rotate(192deg) translatex(130px);
-webkit-animation-delay: 47s;
}
#clock #s49 {
-moz-transform: rotate(198deg) translatex(130px);
-moz-animation-delay: 48s;
-webkit-transform: rotate(198deg) translatex(130px);
-webkit-animation-delay: 48s;
}
#clock #s50 {
-moz-transform: rotate(204deg) translatex(130px);
-moz-animation-delay: 49s;
-webkit-transform: rotate(204deg) translatex(130px);
-webkit-animation-delay: 49s;
}
#clock #s51 {
-moz-transform: rotate(210deg) translatex(130px);
-moz-animation-delay: 50s;
-webkit-transform: rotate(210deg) translatex(130px);
-webkit-animation-delay: 50s;
}
#clock #s52 {
-moz-transform: rotate(216deg) translatex(130px);
-moz-animation-delay: 51s;
-webkit-transform: rotate(216deg) translatex(130px);
-webkit-animation-delay: 51s;
}
#clock #s53 {
-moz-transform: rotate(222deg) translatex(130px);
-moz-animation-delay: 52s;
-webkit-transform: rotate(222deg) translatex(130px);
-webkit-animation-delay: 52s;
}
#clock #s54 {
-moz-transform: rotate(228deg) translatex(130px);
-moz-animation-delay: 53s;
-webkit-transform: rotate(228deg) translatex(130px);
-webkit-animation-delay: 53s;
}
#clock #s55 {
-moz-transform: rotate(234deg) translatex(130px);
-moz-animation-delay: 54s;
-webkit-transform: rotate(234deg) translatex(130px);
-webkit-animation-delay: 54s;
}
#clock #s56 {
-moz-transform: rotate(240deg) translatex(130px);
-moz-animation-delay: 55s;
-webkit-transform: rotate(240deg) translatex(130px);
-webkit-animation-delay: 55s;
}
#clock #s57 {
-moz-transform: rotate(246deg) translatex(130px);
-moz-animation-delay: 56s;
-webkit-transform: rotate(246deg) translatex(130px);
-webkit-animation-delay: 56s;
}
#clock #s58 {
-moz-transform: rotate(252deg) translatex(130px);
-moz-animation-delay: 57s;
-webkit-transform: rotate(252deg) translatex(130px);
-webkit-animation-delay: 57s;
}
#clock #s59 {
-moz-transform: rotate(258deg) translatex(130px);
-moz-animation-delay: 58s;
-webkit-transform: rotate(258deg) translatex(130px);
-webkit-animation-delay: 58s;
}
#clock #s60 {
-moz-transform: rotate(264deg) translatex(130px);
-moz-animation-delay: 59s;
-webkit-transform: rotate(264deg) translatex(130px);
-webkit-animation-delay: 59s;
}
/* minutes */
@-webkit-keyframes mins_effect {
0% {opacity: 1;}
1.66% {opacity: 1;}
1.67% {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes mins_effect {
0% {opacity: 1;}
1.66% {opacity: 1;}
1.67% {opacity: 0;}
100% {opacity: 0;}
}
#clock .mins {
height: 300px;
left: 175px;
position: absolute;
top: 249px;
width: 300px;
}
#clock .mins div {
background-color: #000086;
height: 3px;
opacity: 0;
position: absolute;
width: 150px;
-moz-animation-name: mins_effect;
-moz-animation-duration: 3600s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: mins_effect;
-webkit-animation-duration: 3600s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#clock #m1 {
-moz-transform: rotate(-90deg) translatex(110px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-90deg) translatex(110px);
-webkit-animation-delay: 0s;
}
#clock #m2 {
-moz-transform: rotate(-84deg) translatex(110px);
-moz-animation-delay: 60s;
-webkit-transform: rotate(-84deg) translatex(110px);
-webkit-animation-delay: 60s;
}
#clock #m3 {
-moz-transform: rotate(-78deg) translatex(110px);
-moz-animation-delay: 120s;
-webkit-transform: rotate(-78deg) translatex(110px);
-webkit-animation-delay: 120s;
}
#clock #m4 {
-moz-transform: rotate(-72deg) translatex(110px);
-moz-animation-delay: 180s;
-webkit-transform: rotate(-72deg) translatex(110px);
-webkit-animation-delay: 180s;
}
#clock #m5 {
-moz-transform: rotate(-66deg) translatex(110px);
-moz-animation-delay: 240s;
-webkit-transform: rotate(-66deg) translatex(110px);
-webkit-animation-delay: 240s;
}
#clock #m6 {
-moz-transform: rotate(-60deg) translatex(110px);
-moz-animation-delay: 300s;
-webkit-transform: rotate(-60deg) translatex(110px);
-webkit-animation-delay: 300s;
}
#clock #m7 {
-moz-transform: rotate(-54deg) translatex(110px);
-moz-animation-delay: 360s;
-webkit-transform: rotate(-54deg) translatex(110px);
-webkit-animation-delay: 360s;
}
#clock #m8 {
-moz-transform: rotate(-48deg) translatex(110px);
-moz-animation-delay: 420s;
-webkit-transform: rotate(-48deg) translatex(110px);
-webkit-animation-delay: 420s;
}
#clock #m9 {
-moz-transform: rotate(-42deg) translatex(110px);
-moz-animation-delay: 480s;
-webkit-transform: rotate(-42deg) translatex(110px);
-webkit-animation-delay: 480s;
}
#clock #m10 {
-moz-transform: rotate(-36deg) translatex(110px);
-moz-animation-delay: 540s;
-webkit-transform: rotate(-36deg) translatex(110px);
-webkit-animation-delay: 540s;
}
#clock #m11 {
-moz-transform: rotate(-30deg) translatex(110px);
-moz-animation-delay: 600s;
-webkit-transform: rotate(-30deg) translatex(110px);
-webkit-animation-delay: 600s;
}
#clock #m12 {
-moz-transform: rotate(-24deg) translatex(110px);
-moz-animation-delay: 660s;
-webkit-transform: rotate(-24deg) translatex(110px);
-webkit-animation-delay: 660s;
}
#clock #m13 {
-moz-transform: rotate(-18deg) translatex(110px);
-moz-animation-delay: 720s;
-webkit-transform: rotate(-18deg) translatex(110px);
-webkit-animation-delay: 720s;
}
#clock #m14 {
-moz-transform: rotate(-12deg) translatex(110px);
-moz-animation-delay: 780s;
-webkit-transform: rotate(-12deg) translatex(110px);
-webkit-animation-delay: 780s;
}
#clock #m15 {
-moz-transform: rotate(-6deg) translatex(110px);
-moz-animation-delay: 840s;
-webkit-transform: rotate(-6deg) translatex(110px);
-webkit-animation-delay: 840s;
}
#clock #m16 {
-moz-transform: rotate(0deg) translatex(110px);
-moz-animation-delay: 900s;
-webkit-transform: rotate(0deg) translatex(110px);
-webkit-animation-delay: 900s;
}
#clock #m17 {
-moz-transform: rotate(6deg) translatex(110px);
-moz-animation-delay: 960s;
-webkit-transform: rotate(6deg) translatex(110px);
-webkit-animation-delay: 960s;
}
#clock #m18 {
-moz-transform: rotate(12deg) translatex(110px);
-moz-animation-delay: 1020s;
-webkit-transform: rotate(12deg) translatex(110px);
-webkit-animation-delay: 1020s;
}
#clock #m19 {
-moz-transform: rotate(18deg) translatex(110px);
-moz-animation-delay: 1080s;
-webkit-transform: rotate(18deg) translatex(110px);
-webkit-animation-delay: 1080s;
}
#clock #m20 {
-moz-transform: rotate(24deg) translatex(110px);
-moz-animation-delay: 1140s;
-webkit-transform: rotate(24deg) translatex(110px);
-webkit-animation-delay: 1140s;
}
#clock #m21 {
-moz-transform: rotate(30deg) translatex(110px);
-moz-animation-delay: 1200s;
-webkit-transform: rotate(30deg) translatex(110px);
-webkit-animation-delay: 1200s;
}
#clock #m22 {
-moz-transform: rotate(36deg) translatex(110px);
-moz-animation-delay: 1260s;
-webkit-transform: rotate(36deg) translatex(110px);
-webkit-animation-delay: 1260s;
}
#clock #m23 {
-moz-transform: rotate(42deg) translatex(110px);
-moz-animation-delay: 1320s;
-webkit-transform: rotate(42deg) translatex(110px);
-webkit-animation-delay: 1320s;
}
#clock #m24 {
-moz-transform: rotate(48deg) translatex(110px);
-moz-animation-delay: 1380s;
-webkit-transform: rotate(48deg) translatex(110px);
-webkit-animation-delay: 1380s;
}
#clock #m25 {
-moz-transform: rotate(54deg) translatex(110px);
-moz-animation-delay: 1440s;
-webkit-transform: rotate(54deg) translatex(110px);
-webkit-animation-delay: 1440s;
}
#clock #m26 {
-moz-transform: rotate(60deg) translatex(110px);
-moz-animation-delay: 1500s;
-webkit-transform: rotate(60deg) translatex(110px);
-webkit-animation-delay: 1500s;
}
#clock #m27 {
-moz-transform: rotate(66deg) translatex(110px);
-moz-animation-delay: 1560s;
-webkit-transform: rotate(66deg) translatex(110px);
-webkit-animation-delay: 1560s;
}
#clock #m28 {
-moz-transform: rotate(72deg) translatex(110px);
-moz-animation-delay: 1620s;
-webkit-transform: rotate(72deg) translatex(110px);
-webkit-animation-delay: 1620s;
}
#clock #m29 {
-moz-transform: rotate(78deg) translatex(110px);
-moz-animation-delay: 1680s;
-webkit-transform: rotate(78deg) translatex(110px);
-webkit-animation-delay: 1680s;
}
#clock #m30 {
-moz-transform: rotate(84deg) translatex(110px);
-moz-animation-delay: 1740s;
-webkit-transform: rotate(84deg) translatex(110px);
-webkit-animation-delay: 1740s;
}
#clock #m31 {
-moz-transform: rotate(90deg) translatex(110px);
-moz-animation-delay: 1800s;
-webkit-transform: rotate(90deg) translatex(110px);
-webkit-animation-delay: 1800s;
}
#clock #m32 {
-moz-transform: rotate(96deg) translatex(110px);
-moz-animation-delay: 1860s;
-webkit-transform: rotate(96deg) translatex(110px);
-webkit-animation-delay: 1860s;
}
#clock #m33 {
-moz-transform: rotate(102deg) translatex(110px);
-moz-animation-delay: 1920s;
-webkit-transform: rotate(102deg) translatex(110px);
-webkit-animation-delay: 1920s;
}
#clock #m34 {
-moz-transform: rotate(108deg) translatex(110px);
-moz-animation-delay: 1980s;
-webkit-transform: rotate(108deg) translatex(110px);
-webkit-animation-delay: 1980s;
}
#clock #m35 {
-moz-transform: rotate(114deg) translatex(110px);
-moz-animation-delay: 2040s;
-webkit-transform: rotate(114deg) translatex(110px);
-webkit-animation-delay: 2040s;
}
#clock #m36 {
-moz-transform: rotate(120deg) translatex(110px);
-moz-animation-delay: 2100s;
-webkit-transform: rotate(120deg) translatex(110px);
-webkit-animation-delay: 2100s;
}
#clock #m37 {
-moz-transform: rotate(126deg) translatex(110px);
-moz-animation-delay: 2160s;
-webkit-transform: rotate(126deg) translatex(110px);
-webkit-animation-delay: 2160s;
}
#clock #m38 {
-moz-transform: rotate(132deg) translatex(110px);
-moz-animation-delay: 2220s;
-webkit-transform: rotate(132deg) translatex(110px);
-webkit-animation-delay: 2220s;
}
#clock #m39 {
-moz-transform: rotate(138deg) translatex(110px);
-moz-animation-delay: 2280s;
-webkit-transform: rotate(138deg) translatex(110px);
-webkit-animation-delay: 2280s;
}
#clock #m40 {
-moz-transform: rotate(144deg) translatex(110px);
-moz-animation-delay: 2340s;
-webkit-transform: rotate(144deg) translatex(110px);
-webkit-animation-delay: 2340s;
}
#clock #m41 {
-moz-transform: rotate(150deg) translatex(110px);
-moz-animation-delay: 2400s;
-webkit-transform: rotate(150deg) translatex(110px);
-webkit-animation-delay: 2400s;
}
#clock #m42 {
-moz-transform: rotate(156deg) translatex(110px);
-moz-animation-delay: 2460s;
-webkit-transform: rotate(156deg) translatex(110px);
-webkit-animation-delay: 2460s;
}
#clock #m43 {
-moz-transform: rotate(162deg) translatex(110px);
-moz-animation-delay: 2520s;
-webkit-transform: rotate(162deg) translatex(110px);
-webkit-animation-delay: 2520s;
}
#clock #m44 {
-moz-transform: rotate(168deg) translatex(110px);
-moz-animation-delay: 2580s;
-webkit-transform: rotate(168deg) translatex(110px);
-webkit-animation-delay: 2580s;
}
#clock #m45 {
-moz-transform: rotate(174deg) translatex(110px);
-moz-animation-delay: 2640s;
-webkit-transform: rotate(174deg) translatex(110px);
-webkit-animation-delay: 2640s;
}
#clock #m46 {
-moz-transform: rotate(180deg) translatex(110px);
-moz-animation-delay: 2700s;
-webkit-transform: rotate(180deg) translatex(110px);
-webkit-animation-delay: 2700s;
}
#clock #m47 {
-moz-transform: rotate(186deg) translatex(110px);
-moz-animation-delay: 2760s;
-webkit-transform: rotate(186deg) translatex(110px);
-webkit-animation-delay: 2760s;
}
#clock #m48 {
-moz-transform: rotate(192deg) translatex(110px);
-moz-animation-delay: 2820s;
-webkit-transform: rotate(192deg) translatex(110px);
-webkit-animation-delay: 2820s;
}
#clock #m49 {
-moz-transform: rotate(198deg) translatex(110px);
-moz-animation-delay: 2880s;
-webkit-transform: rotate(198deg) translatex(110px);
-webkit-animation-delay: 2880s;
}
#clock #m50 {
-moz-transform: rotate(204deg) translatex(110px);
-moz-animation-delay: 2940s;
-webkit-transform: rotate(204deg) translatex(110px);
-webkit-animation-delay: 2940s;
}
#clock #m51 {
-moz-transform: rotate(210deg) translatex(110px);
-moz-animation-delay: 3000s;
-webkit-transform: rotate(210deg) translatex(110px);
-webkit-animation-delay: 3000s;
}
#clock #m52 {
-moz-transform: rotate(216deg) translatex(110px);
-moz-animation-delay: 3060s;
-webkit-transform: rotate(216deg) translatex(110px);
-webkit-animation-delay: 3060s;
}
#clock #m53 {
-moz-transform: rotate(222deg) translatex(110px);
-moz-animation-delay: 3120s;
-webkit-transform: rotate(222deg) translatex(110px);
-webkit-animation-delay: 3120s;
}
#clock #m54 {
-moz-transform: rotate(228deg) translatex(110px);
-moz-animation-delay: 3180s;
-webkit-transform: rotate(228deg) translatex(110px);
-webkit-animation-delay: 3180s;
}
#clock #m55 {
-moz-transform: rotate(234deg) translatex(110px);
-moz-animation-delay: 3240s;
-webkit-transform: rotate(234deg) translatex(110px);
-webkit-animation-delay: 3240s;
}
#clock #m56 {
-moz-transform: rotate(240deg) translatex(110px);
-moz-animation-delay: 3300s;
-webkit-transform: rotate(240deg) translatex(110px);
-webkit-animation-delay: 3300s;
}
#clock #m57 {
-moz-transform: rotate(246deg) translatex(110px);
-moz-animation-delay: 3360s;
-webkit-transform: rotate(246deg) translatex(110px);
-webkit-animation-delay: 3360s;
}
#clock #m58 {
-moz-transform: rotate(252deg) translatex(110px);
-moz-animation-delay: 3420s;
-webkit-transform: rotate(252deg) translatex(110px);
-webkit-animation-delay: 3420s;
}
#clock #m59 {
-moz-transform: rotate(258deg) translatex(110px);
-moz-animation-delay: 3480s;
-webkit-transform: rotate(258deg) translatex(110px);
-webkit-animation-delay: 3480s;
}
#clock #m60 {
-moz-transform: rotate(264deg) translatex(110px);
-moz-animation-delay: 3540s;
-webkit-transform: rotate(264deg) translatex(110px);
-webkit-animation-delay: 3540s;
}
/* hours */
@-webkit-keyframes hours_effect {
0% {opacity: 1;}
8.33% {opacity: 1;}
8.34% {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes hours_effect {
0% {opacity: 1;}
8.33% {opacity: 1;}
8.34% {opacity: 0;}
100% {opacity: 0;}
}
#clock .hours {
height: 300px;
left: 175px;
position: absolute;
top: 249px;
width: 300px;
}
#clock .hours div {
background-color: #860086;
height: 3px;
opacity: 0;
position: absolute;
width: 150px;
-moz-animation-name: hours_effect;
-moz-animation-duration: 43200s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: hours_effect;
-webkit-animation-duration: 43200s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#clock #h1 {
-moz-transform: rotate(-180deg) translatex(110px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-180deg) translatex(110px);
-webkit-animation-delay: 0s;
}
#clock #h2 {
-moz-transform: rotate(-150deg) translatex(110px);
-moz-animation-delay: 3600s;
-webkit-transform: rotate(-150deg) translatex(110px);
-webkit-animation-delay: 3600s;
}
#clock #h3 {
-moz-transform: rotate(-120deg) translatex(110px);
-moz-animation-delay: 7200s;
-webkit-transform: rotate(-120deg) translatex(110px);
-webkit-animation-delay: 7200s;
}
#clock #h4 {
-moz-transform: rotate(-90deg) translatex(110px);
-moz-animation-delay: 10800s;
-webkit-transform: rotate(-90deg) translatex(110px);
-webkit-animation-delay: 10800s;
}
#clock #h5 {
-moz-transform: rotate(-60deg) translatex(110px);
-moz-animation-delay: 14400s;
-webkit-transform: rotate(-60deg) translatex(110px);
-webkit-animation-delay: 14400s;
}
#clock #h6 {
-moz-transform: rotate(-30deg) translatex(110px);
-moz-animation-delay: 18000s;
-webkit-transform: rotate(-30deg) translatex(110px);
-webkit-animation-delay: 18000s;
}
#clock #h7 {
-moz-transform: rotate(0deg) translatex(110px);
-moz-animation-delay: 21600s;
-webkit-transform: rotate(0deg) translatex(110px);
-webkit-animation-delay: 21600s;
}
#clock #h8 {
-moz-transform: rotate(30deg) translatex(110px);
-moz-animation-delay: 25200s;
-webkit-transform: rotate(30deg) translatex(110px);
-webkit-animation-delay: 25200s;
}
#clock #h9 {
-moz-transform: rotate(60deg) translatex(110px);
-moz-animation-delay: 28800s;
-webkit-transform: rotate(60deg) translatex(110px);
-webkit-animation-delay: 28800s;
}
#clock #h10 {
-moz-transform: rotate(90deg) translatex(110px);
-moz-animation-delay: 32400s;
-webkit-transform: rotate(90deg) translatex(110px);
-webkit-animation-delay: 32400s;
}
#clock #h11 {
-moz-transform: rotate(120deg) translatex(110px);
-moz-animation-delay: 36000s;
-webkit-transform: rotate(120deg) translatex(110px);
-webkit-animation-delay: 36000s;
}
#clock #h12 {
-moz-transform: rotate(150deg) translatex(110px);
-moz-animation-delay: 39600s;
-webkit-transform: rotate(150deg) translatex(110px);
-webkit-animation-delay: 39600s;
}
Trong đoạn css trên có sử dụng file cface.png làm ảnh nền, các bạn có thể save ảnh này về máy
Mình hy vọng các bạn sẽ cảm thấy thích thú với bài viết này