كود ساعة باستخدام css3

سجل في : 13/06/2008

السلام عليكم
احضرت لكم اليوم كود ساعة باستخدام الرائعة css3
وهذا مثال
كود ساعة باستخدام css3 Untitl10

الاكواد

يوضع في المكان المراد ظهور الساعة فيه

الكود:: <div id="iClock">
 <div id="scorpion"></div>
 <div id="hand"></div>
 <div id="second"></div>

 <ul id="hour">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
 <li>10</li>
 <li>11</li>
 <li>12</li>
 </ul>


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

وفي ورقة css

الكود:: /* RESET
------------------------- */

* { margin: 0; padding: 0; }
li { list-style: none; }
body { background: #ddd; }

/* CLOCK BODY
------------------------- */

#iClock {
position: relative;
overflow: hidden;
width: 268px;
height: 268px;
margin: 20px auto;
background: #f8f8f8;
border-radius: 268px;
}

/* center dot */

#iClock:after {
content: '';
position: absolute;
z-index: 12;
left: 50%;
top: 50%;
margin-left: -2px;
margin-top: -2px;
width: 2px;
height: 2px;
border:1px solid #fff;
background: #666;
border-radius: 2px;
}

/* inset shadow */

#iClock:before {
content: '';
position: absolute;
z-index: 12;
width: 100%;
height: 100%;
background: transparent;
overflow: hidden;
border-radius: 100%;
-webkit-box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,.5);
   -moz-box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,.5);
   -o-box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,.5);
      box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,.5);
}

/* MINUTE - HOUR
------------------------- */

ul#minute, ul#hour {
position: absolute;
z-index: 1;
top: 8px;
left: 8px;
width: 252px;
height: 252px;
}

ul#minute li, ul#hour li {
position: absolute;
left: 50%;
top: 0;
width: 2px;
height: 126px;
margin-left: -1px;
-webkit-transform-origin: 50% 100%;
   -moz-transform-origin: 50% 100%;
   -o-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
}

ul#minute li span, ul#hour li span{
display: block;
width: 100%;
height: 13px;
text-indent: -9999px;
background:#333;
}

/* 360(deg) / 60(minute) - 6*1, 6*2, 6*3 ... */

ul#minute li:nth-child(1) { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); }
ul#minute li:nth-child(2) { -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); transform: rotate(12deg); }
ul#minute li:nth-child(3) { -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); -o-transform: rotate(18deg); transform: rotate(18deg); }
ul#minute li:nth-child(4) { -webkit-transform: rotate(24deg); -moz-transform: rotate(24deg); -o-transform: rotate(24deg); transform: rotate(24deg); }
ul#minute li:nth-child(5) { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
ul#minute li:nth-child(6) { -webkit-transform: rotate(36deg); -moz-transform: rotate(36deg); -o-transform: rotate(36deg); transform: rotate(36deg); }
ul#minute li:nth-child(7) { -webkit-transform: rotate(42deg); -moz-transform: rotate(42deg); -o-transform: rotate(42deg); transform: rotate(42deg); }
ul#minute li:nth-child(8) { -webkit-transform: rotate(48deg); -moz-transform: rotate(48deg); -o-transform: rotate(48deg); transform: rotate(48deg); }
ul#minute li:nth-child(9) { -webkit-transform: rotate(54deg); -moz-transform: rotate(54deg); -o-transform: rotate(54deg); transform: rotate(54deg); }
ul#minute li:nth-child(10) { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); }
ul#minute li:nth-child(11) { -webkit-transform: rotate(66deg); -moz-transform: rotate(66deg); -o-transform: rotate(66deg); transform: rotate(66deg); }
ul#minute li:nth-child(12) { -webkit-transform: rotate(72deg); -moz-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); }
ul#minute li:nth-child(13) { -webkit-transform: rotate(78deg); -moz-transform: rotate(78deg); -o-transform: rotate(78deg); transform: rotate(78deg); }
ul#minute li:nth-child(14) { -webkit-transform: rotate(84deg); -moz-transform: rotate(84deg); -o-transform: rotate(84deg); transform: rotate(84deg); }
ul#minute li:nth-child(15) { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
ul#minute li:nth-child(16) { -webkit-transform: rotate(96deg); -moz-transform: rotate(96deg); -o-transform: rotate(96deg); transform: rotate(96deg); }
ul#minute li:nth-child(17) { -webkit-transform: rotate(102deg); -moz-transform: rotate(102deg); -o-transform: rotate(102deg); transform: rotate(102deg); }
ul#minute li:nth-child(18) { -webkit-transform: rotate(108deg); -moz-transform: rotate(108deg); -o-transform: rotate(108deg); transform: rotate(108deg); }
ul#minute li:nth-child(19) { -webkit-transform: rotate(114deg); -moz-transform: rotate(114deg); -o-transform: rotate(114deg); transform: rotate(114deg); }
ul#minute li:nth-child(20) { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); }
ul#minute li:nth-child(21) { -webkit-transform: rotate(126deg); -moz-transform: rotate(126deg); -o-transform: rotate(126deg); transform: rotate(126deg); }
ul#minute li:nth-child(22) { -webkit-transform: rotate(132deg); -moz-transform: rotate(132deg); -o-transform: rotate(132deg); transform: rotate(132deg); }
ul#minute li:nth-child(23) { -webkit-transform: rotate(138deg); -moz-transform: rotate(138deg); -o-transform: rotate(138deg); transform: rotate(138deg); }
ul#minute li:nth-child(24) { -webkit-transform: rotate(144deg); -moz-transform: rotate(144deg); -o-transform: rotate(144deg); transform: rotate(144deg); }
ul#minute li:nth-child(25) { -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); -o-transform: rotate(150deg); transform: rotate(150deg); }
ul#minute li:nth-child(26) { -webkit-transform: rotate(156deg); -moz-transform: rotate(156deg); -o-transform: rotate(156deg); transform: rotate(156deg); }
ul#minute li:nth-child(27) { -webkit-transform: rotate(162deg); -moz-transform: rotate(162deg); -o-transform: rotate(162deg); transform: rotate(162deg); }
ul#minute li:nth-child(28) { -webkit-transform: rotate(168deg); -moz-transform: rotate(168deg); -o-transform: rotate(168deg); transform: rotate(168deg); }
ul#minute li:nth-child(29) { -webkit-transform: rotate(174deg); -moz-transform: rotate(174deg); -o-transform: rotate(174deg); transform: rotate(174deg); }
ul#minute li:nth-child(30) { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
ul#minute li:nth-child(31) { -webkit-transform: rotate(186deg); -moz-transform: rotate(186deg); -o-transform: rotate(186deg); transform: rotate(186deg); }
ul#minute li:nth-child(32) { -webkit-transform: rotate(192deg); -moz-transform: rotate(192deg); -o-transform: rotate(192deg); transform: rotate(192deg); }
ul#minute li:nth-child(33) { -webkit-transform: rotate(198deg); -moz-transform: rotate(198deg); -o-transform: rotate(198deg); transform: rotate(198deg); }
ul#minute li:nth-child(34) { -webkit-transform: rotate(204deg); -moz-transform: rotate(204deg); -o-transform: rotate(204deg); transform: rotate(204deg); }
ul#minute li:nth-child(35) { -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); -o-transform: rotate(210deg); transform: rotate(210deg); }
ul#minute li:nth-child(36) { -webkit-transform: rotate(216deg); -moz-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); }
ul#minute li:nth-child(37) { -webkit-transform: rotate(222deg); -moz-transform: rotate(222deg); -o-transform: rotate(222deg); transform: rotate(222deg); }
ul#minute li:nth-child(38) { -webkit-transform: rotate(228deg); -moz-transform: rotate(228deg); -o-transform: rotate(228deg); transform: rotate(228deg); }
ul#minute li:nth-child(39) { -webkit-transform: rotate(234deg); -moz-transform: rotate(234deg); -o-transform: rotate(234deg); transform: rotate(234deg); }
ul#minute li:nth-child(40) { -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg); }
ul#minute li:nth-child(41) { -webkit-transform: rotate(246deg); -moz-transform: rotate(246deg); -o-transform: rotate(246deg); transform: rotate(246deg); }
ul#minute li:nth-child(42) { -webkit-transform: rotate(252deg); -moz-transform: rotate(252deg); -o-transform: rotate(252deg); transform: rotate(252deg); }
ul#minute li:nth-child(43) { -webkit-transform: rotate(258deg); -moz-transform: rotate(258deg); -o-transform: rotate(258deg); transform: rotate(258deg); }
ul#minute li:nth-child(44) { -webkit-transform: rotate(264deg); -moz-transform: rotate(264deg); -o-transform: rotate(264deg); transform: rotate(264deg); }
ul#minute li:nth-child(45) { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); }
ul#minute li:nth-child(46) { -webkit-transform: rotate(276deg); -moz-transform: rotate(276deg); -o-transform: rotate(276deg); transform: rotate(276deg); }
ul#minute li:nth-child(47) { -webkit-transform: rotate(282deg); -moz-transform: rotate(282deg); -o-transform: rotate(282deg); transform: rotate(282deg); }
ul#minute li:nth-child(48) { -webkit-transform: rotate(288deg); -moz-transform: rotate(288deg); -o-transform: rotate(288deg); transform: rotate(288deg); }
ul#minute li:nth-child(49) { -webkit-transform: rotate(294deg); -moz-transform: rotate(294deg); -o-transform: rotate(294deg); transform: rotate(294deg); }
ul#minute li:nth-child(50) { -webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg); }
ul#minute li:nth-child(51) { -webkit-transform: rotate(306deg); -moz-transform: rotate(306deg); -o-transform: rotate(306deg); transform: rotate(306deg); }
ul#minute li:nth-child(52) { -webkit-transform: rotate(312deg); -moz-transform: rotate(312deg); -o-transform: rotate(312deg); transform: rotate(312deg); }
ul#minute li:nth-child(53) { -webkit-transform: rotate(318deg); -moz-transform: rotate(318deg); -o-transform: rotate(318deg); transform: rotate(318deg); }
ul#minute li:nth-child(54) { -webkit-transform: rotate(324deg); -moz-transform: rotate(324deg); -o-transform: rotate(324deg); transform: rotate(324deg); }
ul#minute li:nth-child(55) { -webkit-transform: rotate(330deg); -moz-transform: rotate(330deg); -o-transform: rotate(330deg); transform: rotate(330deg); }
ul#minute li:nth-child(56) { -webkit-transform: rotate(336deg); -moz-transform: rotate(336deg); -o-transform: rotate(336deg); transform: rotate(336deg); }
ul#minute li:nth-child(57) { -webkit-transform: rotate(342deg); -moz-transform: rotate(342deg); -o-transform: rotate(342deg); transform: rotate(342deg); }
ul#minute li:nth-child(58) { -webkit-transform: rotate(348deg); -moz-transform: rotate(348deg); -o-transform: rotate(348deg); transform: rotate(348deg); }
ul#minute li:nth-child(59) { -webkit-transform: rotate(354deg); -moz-transform: rotate(354deg); -o-transform: rotate(354deg); transform: rotate(354deg); }
ul#minute li:nth-child(60) { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }

/* HOUR
------------------------- */

ul#hour li {
width: 12px;
margin-left: -6px;
}

ul#hour li span{
height: 30px;
}

/* 360(deg) / 12(hour) - 30*1, 30*2, 30*3 ... */

ul#hour li:nth-child(1) { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
ul#hour li:nth-child(2) { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); }
ul#hour li:nth-child(3) { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
ul#hour li:nth-child(4) { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); }
ul#hour li:nth-child(5) { -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); -o-transform: rotate(150deg); transform: rotate(150deg); }
ul#hour li:nth-child(6) { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
ul#hour li:nth-child(7) { -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); -o-transform: rotate(210deg); transform: rotate(210deg); }
ul#hour li:nth-child(8) { -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg); }
ul#hour li:nth-child(9) { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); }
ul#hour li:nth-child(10) { -webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg); }
ul#hour li:nth-child(11) { -webkit-transform: rotate(330deg); -moz-transform: rotate(330deg); -o-transform: rotate(330deg); transform: rotate(330deg); }
ul#hour li:nth-child(12) { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }



/* SCORPION - HAND - SECOND
------------------------- */

#scorpion, #hand, #second {
position: absolute;
left: 50%;
top: 0;
height: 134px;

-webkit-transform-origin: 50% 100%;
-webkit-transform: rotate(0deg);
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-transform-origin: 50% 100%;
-moz-transform: rotate(0deg);
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-o-transform-origin: 50% 100%;
-o-transform: rotate(0deg);
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
transform-origin: 50% 100%;
transform: rotate(0deg);
animation-iteration-count: infinite;
animation-timing-function: linear;
}

#scorpion span, #hand span, #second span{
display: block;
width: 100%;
text-indent: -9999px;
}

/* SCORPION
------------------------- */

#scorpion {
z-index: 2;
width: 12px;
margin-left: -6px;

-webkit-animation-duration: 43200s;
-webkit-animation-name: scorpion;
-moz-animation-duration: 43200s;
-moz-animation-name: scorpion;
-o-animation-duration: 43200s;
-o-animation-name: scorpion;
animation-duration: 43200s;
animation-name: scorpion;
}

@-webkit-keyframes scorpion {
0% { -webkit-transform: rotate(30deg); }
100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes scorpion {
0% { -moz-transform: rotate(30deg); }
100% { -moz-transform: rotate(360deg); }
}

@-o-keyframes scorpion {
0% { -o-transform: rotate(30deg); }
100% { -o-transform: rotate(360deg); }
}

@keyframes scorpion {
0% { transform: rotate(30deg); }
100% { transform: rotate(360deg); }
}

#scorpion span{
height: 103px;
margin-top: 60px;
background:#333;
}

/* HAND
------------------------- */

#hand {
z-index: 3;
width: 12px;
margin-left: -6px;

-webkit-animation-duration: 3600s;
-webkit-animation-name: hand;
-moz-animation-duration: 3600s;
-moz-animation-name: hand;
-o-animation-duration: 3600s;
-o-animation-name: hand;
animation-duration: 3600s;
animation-name: hand;
}

@-webkit-keyframes hand {
0% { -webkit-transform: rotate(48deg); }
100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes hand {
0% { -moz-transform: rotate(48deg); }
100% { -moz-transform: rotate(360deg); }
}

@-o-keyframes hand {
0% { -o-transform: rotate(48deg); }
100% { -o-transform: rotate(360deg); }
}

@keyframes hand {
0% { transform: rotate(48deg); }
100% { transform: rotate(360deg); }
}

#hand span{
height: 144px;
margin-top: 23px;
background:#333;
}

/* SECOND
------------------------- */

#second {
z-index: 4;
width: 4px;
margin-left: -2px;

-webkit-animation-duration: 60s;
-webkit-animation-name: second;
-moz-animation-duration: 60s;
-moz-animation-name: second;
-o-animation-duration: 60s;
-o-animation-name: second;
animation-duration: 60s;
animation-name: second;
}

@-webkit-keyframes second {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes second {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}

@-o-keyframes second {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); }
}

@keyframes second {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

#second span{
height: 118px;
margin-top: 60px;
background: #cd1d1d;
}

/* second start ball */

#second span::before{
content: '';
position: absolute;
z-index: 4;
left: 50%;
top: 40px;
margin-left: -10px;
width: 20px;
height: 20px;
background: #cd1d1d;
border-radius: 100%;
}

/* second center ball */

#second span::after{
content: '';
position: absolute;
z-index: 4;
left: 50%;
top: 128px;
margin-left: -6px;
width: 12px;
height: 12px;
background: #cd1d1d;
border-radius: 100%;
}

اودعكم الله الذي لا تضيع ودائعه
الى اللقاء

مواضيع جديدة

كود ساعة باستخدام css3

تفضّل شارك بتعليقك