hits counter
الرئيسيةس .و .جبحـثالتسجيلدخول
دعم شباب الآن: لدينا 8248 موضوع ، و 1991 عضو ، آخر عضو مسجل : نغم سات فمرحباُ به.



كود ساعة باستخدام css3
avatar
THE QM
إدارة الموقع
 
المشاركات : 7657
القسم المفضل : تطوير المواقع
سجل في : 13/06/2008
النقاط : 22
موضوع: كود ساعة باستخدام css3



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


الاكواد

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

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

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



كن بالقرب :
follow me @HDagash


التعليقات
لا يوجد حالياً أي تعليق

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

دعم شباب  :: تطوير المواقع والمنتديات :: تطوير المواقع :: عالم الاكواد :: اكواد الـ html واكواد css موحدة لجميع النسخ-