» »

Цифровые часы для сайта при помощи CSS3

Цифровые часы для сайта при помощи CSS3

Вашему вниманию анимированные цифровые часы, что созданы для сайта. Имеют как цифровое табло в темном, также идет основным стрелочное. Ранее можно было видеть часы на многих ресурсах, но они реально грузили страницу, что потом веб мастера убирали. Сейчас при помощи CSS3, все изменилось и безусловно сам дизайн стал другим и возможности появились на создание уникального дизайн.

В этой статье мы рассмотрим отличную версию часов, используя простую анимацию CSS, где главное не будет JavaScript, которые ранее всегда можно было увидеть, здесь без него отлично все работает.

Изначально можно заметить присутствие большого количества HTML, что связано с тем, что большая часть его, например, названия будних дней и кода для цифр, генерируется динамически. Думаю многие согласятся, что часы выглядят современно, и тематически они не привязаны. Современная стилистика, плюс в сочетании с разработчиками CSS обладает непреодолимым арсеналом интерфейсных ресурсов. Как на темном или аналогичном оттенке, они будут смотреться корректно, хотя изначально можно посмотреть, как после установки должны смотреться.

Приступаем к установке:

HTML

Код
<div id="zokdsatumiksan">
  <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>

CSS


Лучше всего просматривать на обновленном браузере.

Демонстрация
04.05.2018 Просмотров: 190 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar