کد ساعت آنالوگ | چهار آنلاین

کد ساعت آنالوگ | چهار آنلاین

رزرو تبلیغــات

تعرفه تبلیغات
logo
تعرفه تبلیغات تعرفه تبلیغات

شمـا میتوانیــد برای دریافت آخرین مطالب و آگاهی از آخریـن اخبــار گلریـز وبـــ در ایمیـــل خـود در خبــرنامـه ثـبت نـام کنــید

http://s6.picofile.com/file/8209025634/Screen_Shot_2015.png

کدphp :

<!DOCTYPE html> 
<
html lang="en">
<
head>
    <
meta charset="UTF-8">
    <
title>s1i2n3a4.loxblog.com 4oNliNe</title>
    <
style type="text/css">
        
body {
          
font-size62.5%;
          
margin1em;
          
background#232425
        
}

        
ul {
          list-
stylenone;
          
margin0;
          
padding0
        
}

        
#watch {
          
font-size1em;
          
positionrelative
        
}

        
#watch .frame-face {
          
positionrelative;
          
width30em;
          
height30em;
          
margin2em auto;
          
border-radius15em;
          
background: -webkit-linear-gradient(top#f9f9f9, #666);
          
background: -moz-linear-gradient(top#f9f9f9, #666);
          
backgroundlinear-gradient(to bottom#f9f9f9, #666);
          
box-shadowrgba(000.8.5em .5em 4em;
        }

        
#watch .frame-face:before {
          
content';
          
width29.4em;
          
height29.4em;
          
border-radius14.7em;
          
positionabsolute;
          
top.3em;
          
left.3em;
          
background: -webkit-linear-gradient(135degrgba(24624824900%, rgba(229235238150%, rgba(205212217151%, rgba(2452472490100%), -webkit-radial-gradient(centerellipse coverrgba(24624824910%, rgba(229235238165%, rgba(205212217166%, rgba(2452472491100%);
          
background: -moz-linear-gradient(135degrgba(24624824900%, rgba(229235238150%, rgba(205212217151%, rgba(2452472490100%), -moz-radial-gradient(centerellipse coverrgba(24624824910%, rgba(229235238165%, rgba(205212217166%, rgba(2452472491100%);
          
backgroundlinear-gradient(135degrgba(24624824900%, rgba(229235238150%, rgba(205212217151%, rgba(2452472490100%), radial-gradient(ellipse at centerrgba(24624824910%, rgba(229235238165%, rgba(205212217166%, rgba(2452472491100%);
        }

        
#watch .frame-face:after {
          
content';
          
width28em;
          
height28em;
          
border-radius14.2em;
          
positionabsolute;
          
top.9em;
          
left.9em;
          
box-shadowinset rgba(000.2.2em .2em 1em;
          
border.1em solid rgba(000.2);
          
background: -webkit-linear-gradient(top#fff, #ccc);
          
background: -moz-linear-gradient(top#fff, #ccc);
          
backgroundlinear-gradient(to bottom#fff, #ccc);
        
}

        
#watch .minute-marks li {
          
displayblock;
          
width.2em;
          
height.6em;
          
background#929394;
          
positionabsolute;
          
top50%;
          
left50%;
          
margin: -.4em 0 0 -.1em;
        }

        
#watch .minute-marks li:first-child {
          
transformrotate(6degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(2) {
          
transformrotate(12degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(3) {
          
transformrotate(18degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(4) {
          
transformrotate(24degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(5) {
          
transformrotate(36degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(6) {
          
transformrotate(42degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(7) {
          
transformrotate(48degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(8) {
          
transformrotate(54degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(9) {
          
transformrotate(66degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(10) {
          
transformrotate(72degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(11) {
          
transformrotate(78degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(12) {
          
transformrotate(84degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(13) {
          
transformrotate(96degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(14) {
          
transformrotate(102degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(15) {
          
transformrotate(108degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(16) {
          
transformrotate(114degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(17) {
          
transformrotate(126degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(18) {
          
transformrotate(132degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(19) {
          
transformrotate(138degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(20) {
          
transformrotate(144degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(21) {
          
transformrotate(156degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(22) {
          
transformrotate(162degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(23) {
          
transformrotate(168degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(24) {
          
transformrotate(174degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(25) {
          
transformrotate(186degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(26) {
          
transformrotate(192degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(27) {
          
transformrotate(198degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(28) {
          
transformrotate(204degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(29) {
          
transformrotate(216degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(30) {
          
transformrotate(222degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(31) {
          
transformrotate(228degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(32) {
          
transformrotate(234degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(33) {
          
transformrotate(246degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(34) {
          
transformrotate(252degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(35) {
          
transformrotate(258degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(36) {
          
transformrotate(264degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(37) {
          
transformrotate(276degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(38) {
          
transformrotate(282degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(39) {
          
transformrotate(288degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(40) {
          
transformrotate(294degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(41) {
          
transformrotate(306degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(42) {
          
transformrotate(312degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(43) {
          
transformrotate(318degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(44) {
          
transformrotate(324degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(45) {
          
transformrotate(336degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(46) {
          
transformrotate(342degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(47) {
          
transformrotate(348degtranslateY(-12.7em)
        }

        
#watch .minute-marks li:nth-child(48) {
          
transformrotate(354degtranslateY(-12.7em)
        }

        
#watch .digits {
          
width30em;
          
height30em;
          
border-radius15em;
          
positionabsolute;
          
top0;
          
left50%;
          
margin-left: -15em;
        }

        
#watch .digits li {
          
font-size1.6em;
          
displayblock;
          
width1.6em;
          
height1.6em;
          
positionabsolute;
          
top50%;
          
left50%;
          
line-height1.6em;
          
text-aligncenter;
          
margin: -.8em 0 0 -.8em;
          
font-weightbold;
        }

        
#watch .digits li:nth-child(1) {
          
transformtranslate(3.9em, -6.9em)
        }

        
#watch .digits li:nth-child(2) {
          
transformtranslate(6.9em, -4em)
        }

        
#watch .digits li:nth-child(3) {
          
transformtranslate(8em0)
        }

        
#watch .digits li:nth-child(4) {
          
transformtranslate(6.8em4em)
        }

        
#watch .digits li:nth-child(5) {
          
transformtranslate(3.9em6.9em)
        }

        
#watch .digits li:nth-child(6) {
          
transformtranslate(08em)
        }

        
#watch .digits li:nth-child(7) {
          
transformtranslate(-3.9em6.9em)
        }

        
#watch .digits li:nth-child(8) {
          
transformtranslate(-6.8em4em)
        }

        
#watch .digits li:nth-child(9) {
          
transformtranslate(-8em0)
        }

        
#watch .digits li:nth-child(10) {
          
transformtranslate(-6.9em, -4em)
        }

        
#watch .digits li:nth-child(11) {
          
transformtranslate(-3.9em, -6.9em)
        }

        
#watch .digits li:nth-child(12) {
          
transformtranslate(0, -8em)
        }

        
#watch .digits:before {
          
content';
          
width1.6em;
          
height1.6em;
          
border-radius.8em;
          
positionabsolute;
          
top50%;
          
left50%;
          
margin: -.8em 0 0 -.8em;
          
background#121314;
        
}

        
#watch .digits:after {
          
content';
          
width4em;
          
height4em;
          
border-radius2.2em;
          
positionabsolute;
          
top50%;
          
left50%;
          
margin: -2.1em 0 0 -2.1em;
          
border.1em solid #c6c6c6;
          
background: -webkit-radial-gradient(centerellipse coverrgba(2002002000), rgba(190190190190%, rgba(1301301301100%);
          
background: -moz-radial-gradient(centerellipse coverrgba(2002002000), rgba(190190190190%, rgba(1301301301100%);
          
backgroundradial-gradient(ellipse at centerrgba(2002002000), rgba(190190190190%, rgba(1301301301100%);
        }

        @
keyframes hours {
          
to {
            
transformrotate(335deg)
          }
        }

        
#watch .hours-hand {
          
width.8em;
          
height7em;
          
border-radius0 0 .9em .9em;
          
background#232425;
          
positionabsolute;
          
bottom50%;
          
left50%;
          
margin0 0 -.8em -.4em;
          
box-shadow#232425 0 0 2px;
          
transform-origin0.4em 6.2em;
          
transformrotate(-25deg);
          
animationhours 43200s linear 0s infinite;
        }

        
#watch .hours-hand:before {
          
content';
          
backgroundinherit;
          
width1.8em;
          
height.8em;
          
border-radius0 0 .8em .8em;
          
box-shadow#232425 0 0 1px;
          
positionabsolute;
          
top: -.7em;
          
left: -.5em;
        }

        
#watch .hours-hand:after {
          
content';
          
width0;
          
height0;
          
border.9em solid #232425;
          
border-width0 .9em 2.4em .9em;
          
border-left-colortransparent;
          
border-right-colortransparent;
          
positionabsolute;
          
top: -3.1em;
          
left: -.5em;
        }

        @
keyframes minutes {
          
to {
            
transformrotate(422deg)
          }
        }

        
#watch .minutes-hand {
          
width.8em;
          
height12.5em;
          
border-radius.5em;
          
background#343536;
          
positionabsolute;
          
bottom50%;
          
left50%;
          
margin0 0 -1.5em -.4em;
          
box-shadow#343536 0 0 2px;
          
transform-origin0.4em 11em;
          
transformrotate(62deg);
          
animationminutes 3600s linear 0s infinite;
        }

        @
keyframes seconds {
          
to {
            
transformrotate(480deg)
          }
        }

        
#watch .seconds-hand {
          
width.2em;
          
height14em;
          
border-radius.1em .1em 0 0/10em 10em 0 0;
          
background#c00;
          
positionabsolute;
          
bottom50%;
          
left50%;
          
margin0 0 -2em -.1em;
          
box-shadowrgba(000.80 0 .2em;
          
transform-origin0.1em 12em;
          
transformrotate(120deg);
          
animationseconds 60s steps(60end0s infinite;
        }

        
#watch .seconds-hand:after {
          
content';
          
width1.4em;
          
height1.4em;
          
border-radius.7em;
          
backgroundinherit;
          
positionabsolute;
          
left: -.65em;
          
bottom1.35em;
        }

        
#watch .seconds-hand:before {
          
content';
          
width.8em;
          
height3em;
          
border-radius.2em .2em .4em .4em/.2em .2em 2em 2em;
          
box-shadowrgba(000.80 0 .2em;
          
backgroundinherit;
          
positionabsolute;
          
left: -.35em;
          
bottom: -3em;
        }

        
#watch .digital-wrap {
          
width9em;
          
height3em;
          
border.1em solid #222;
          
border-radius.2em;
          
positionabsolute;
          
top50%;
          
left50%;
          
margin3em 0 0 -4.5em;
          
overflowhidden;
          
background#4c4c4c;
          
background: -webkit-linear-gradient(top#4c4c4c 0%, #0f0f0f 100%);
          
background: -moz-linear-gradient(top#4c4c4c 0%, #0f0f0f 100%);
          
background: -ms-linear-gradient(top#4c4c4c 0%, #0f0f0f 100%);
          
background: -o-linear-gradient(top#4c4c4c 0%, #0f0f0f 100%);
          
backgroundlinear-gradient(to bottom#4c4c4c 0%, #0f0f0f 100%);
        
}

        
#watch .digital-wrap ul {
          
floatleft;
          
width2.85em;
          
height3em;
          
border-right.1em solid #000;
          
color#ddd;
          
font-familyConsolasmonacomonospace;
        }

        
#watch .digital-wrap ul:last-child {
          
bordernone
        
}

        
#watch .digital-wrap li {
          
font-size1.5em;
          
line-height2;
          
letter-spacing2px;
          
text-aligncenter;
          
positionrelative;
          
left1px;
        }

        
#watch .digit-minutes li {
          
animationdsm 3600s steps(60end0s infinite;
        }

        
#watch .digit-seconds li {
          
animationdsm 60s steps(60end0s infinite;
        }

        @
keyframes dsm {
          
to {
            
transformtranslateY(-120em)
          }
        }
    </
style>
</
head>
<
body>
    <
div id="watch">
      <
div class="frame-face"></div>
      <
ul class="minute-marks">
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
      </
ul>
      <
div class="digital-wrap">
        <
ul class="digit-hours">
          <
li>23</li>
          <
li>00</li>
          <
li>01</li>
          <
li>02</li>
          <
li>03</li>
          <
li>04</li>
          <
li>05</li>
          <
li>06</li>
          <
li>07</li>
          <
li>08</li>
          <
li>09</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>
        </
ul>
        <
ul class="digit-minutes">
          <
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>00</li>
          <
li>01</li>
          <
li>02</li>
          <
li>03</li>
          <
li>04</li>
          <
li>05</li>
          <
li>06</li>
          <
li>07</li>
          <
li>08</li>
          <
li>09</li>
        </
ul>
        <
ul class="digit-seconds">
          <
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>00</li>
          <
li>01</li>
          <
li>02</li>
          <
li>03</li>
          <
li>04</li>
          <
li>05</li>
          <
li>06</li>
          <
li>07</li>
          <
li>08</li>
          <
li>09</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>
        </
ul>
      </
div>
      <
ul class="digits">
        <
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>
      <
div class="hours-hand"></div>
      <
div class="minutes-hand"></div>
      <
div class="seconds-hand"></div>
    </
div>
</
body>
</
html

 


طراحی چت روم


بازدید : 2424 | تاریخ : دو شنبه 7 / 6 / 1394 ساعت : 4:27 |
نظرات
برای دیدن نظرات بیشتر روی شماره صفحات در زیر کلیک کنید
نام
آدرس ایمیل
وب سایت/بلاگ
:) :( ;) :D
;)) :X :? :P
:* =(( :O };-
:B /:) =DD :S
-) :-(( :-| :-))
نظر خصوصی

 کد را وارد نمایید:

آپلود عکس دلخواه: