ZorNet.Ru — сайт для вебмастера » HTML и CSS » Цифровые часы для сайта при помощи CSS3

Цифровые часы для сайта при помощи 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 Мая 2018 Просмотров: 1423 Комментариев: (0)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

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