Стильные белые часы на Javascript и CSS3
Стильные белые часики для вашего сайта, реализованные средствами CSS3 и Javascript
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
.clock { width: 30rem; height: 30rem; position: relative; padding: 2rem; border: 18px solid #D3D7D0; box-shadow: 5px -5px 5px 0px rgba(242, 243, 242, 0.5), -5px 8px 8px 0px rgba(177, 185, 173, 0.5), inset -3.5px 5.5px 6px 0px rgba(177, 185, 173, 0.5), inset 3px -3px 1px 0px rgba(190, 197, 186, 0.15); border-radius: 50%; margin: 50px auto; } .outer-clock-face { position: relative; background: #d8dcd6; overflow: hidden; width: 100%; height: 100%; border-radius: 100%; } .outer-clock-face::after { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); } .outer-clock-face::after, .outer-clock-face::before, .outer-clock-face .marking { content: ""; position: absolute; width: 5px; height: 100%; background: #84C2B3; z-index: 0; left: 49%; } .outer-clock-face .marking { background: #9bc5bb; width: 3px; } .outer-clock-face .marking.marking-one { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg); } .outer-clock-face .marking.marking-two { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); transform: rotate(60deg); } .outer-clock-face .marking.marking-three { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); transform: rotate(120deg); } .outer-clock-face .marking.marking-four { -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); transform: rotate(150deg); } .inner-clock-face { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; background: #d8dcd6; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; z-index: 1; } .inner-clock-face::before { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border-radius: 18px; margin-left: -9px; margin-top: -6px; background: #e38c63; z-index: 11; } .hand { width: 50%; right: 50%; height: 6px; background: #e38c63; position: absolute; top: 50%; border-radius: 6px; transform-origin: 100%; transform: rotate(90deg); transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } .hand.hour-hand { width: 30%; z-index: 3; } .hand.min-hand { height: 3px; z-index: 10; width: 45%; } .hand.second-hand { background: #767B78; width: 45%; height: 2px; z-index: 1; } |
2#: Следующий код вставьте между тегами <body> и </body>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div class="clock"> <div class="outer-clock-face"> <div class="marking marking-one"></div> <div class="marking marking-two"></div> <div class="marking marking-three"></div> <div class="marking marking-four"></div> </div> <div class="inner-clock-face"> <div class="hand hour-hand"></div> <div class="hand min-hand"></div> <div class="hand second-hand"></div> </div> </div> <script id="rendered-js" > const secondHand = document.querySelector('.second-hand'); const minsHand = document.querySelector('.min-hand'); const hourHand = document.querySelector('.hour-hand'); function setDate() { const now = new Date(); const seconds = now.getSeconds(); const secondsDegrees = seconds / 60 * 360 + 90; secondHand.style.transform = `rotate(${secondsDegrees}deg)`; const mins = now.getMinutes(); const minsDegrees = mins / 60 * 360 + seconds / 60 * 6 + 90; minsHand.style.transform = `rotate(${minsDegrees}deg)`; const hour = now.getHours(); const hourDegrees = hour / 12 * 360 + mins / 60 * 30 + 90; hourHand.style.transform = `rotate(${hourDegrees}deg)`; } setInterval(setDate, 1000); setDate(); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
