создать циферблат с помощью CSS

МаринаБаликоева

Привет,

Я хотел бы создать циферблат с помощью CSS. Прямо сейчас у меня есть PNG для этого.

Я хотел бы восстановить это с помощью CSS.

Есть ли у кого-нибудь подсказка, как с этого начать? (как в случае с псевдоэлементами, позиция: абсолютная и т. д.) Вот картинка:

Вот код CSS, который у меня есть на данный момент.

  <body>
 <div class="clock">
 <div class="hour">
 <div class="hr" id="hr"></div>
 </div>
 <div class="min">
 <div class="mn" id="mn"></div>
 </div>
 <div class="sec">
 <div class="sc" id="sc"></div>
 </div>
 </div>
</body>

Код (CSS): HTML:

 * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #091921; } .clock { width: 350px; height: 350px; display: flex; justify-content: center; align-items: center; background: url(clock.png); background-size: cover; border: 4px solid #091921; border-radius: 50%; /* box-shadow */ /* offset-x | offset-y | blur-radius | color */ box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05), inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3), inset 0 15px 15px rgba(0, 0, 0, 0.3); /* CSS for the hands */ .clock:before { content: ""; position: absolute; width: 15px; height: 15px; background: #fff; border-radius: 50%; z-index: 10000; } .clock .hour, .clock .min, .clock .sec { position: absolute; } .clock .hour, .hr { width: 160px; height: 160px; /* border: 3px solid #ff105e; */ } .clock .min, .mn { width: 190px; height: 190px; /* border: 3px solid #eee2e6; */ } .clock .sec, .sc { width: 230px; height: 230px; /* border: 3px solid #d7f336; */ } .hr, .mn, .sc { display: flex; justify-content: center; position: absolute; /* align-items: center; */ /* border: 3px solid #ff105e; */ border-radius: 50%; } .hr:before { content: ""; position: absolute; width: 8px; height: 80px; background: #ff105e; z-index: 10; border-radius: 6px 6px 0 0; } .mn:before { content: ""; position: absolute; width: 4px; height: 90px; background: #fff; z-index: 11; border-radius: 6px 6px 0 0; } .sc:before { content: ""; position: absolute; width: 2px; height: 150px; background: #fff; z-index: 12; border-radius: 6px 6px 0 0; } }

HTML: Большое спасибо!

Adko_ala

С помощью javascript вы можете иметь часы, которые показывают текущее время (при обновлении):
https://jsfiddle.net/1n8fxhvo/

Вы можете удалить некоторые элементы, если вам нужно только лицо.

Arm1

На мой вкус, разметка немного тяжеловата, но с этой задачей можно справиться.

 
.clockFace {
position:relative;
width:10em;
height:10em;
}

.clockFace:before,
.clockFace:after,
.clockFace div:before,
.clockFace div:after {
position:absolute;
width:1.5em;
line-height:1.5em;
text-align:center;
}

.clockFace:before,
.clockFace:after {
left:50%;
margin-left:-0.75em;
}

.clockFace:before {
content:"12";
top:0;
}

.clockFace:after {
content:"6";
bottom:0;
}

.clockFace div:before,
.clockFace div:after {
top:50%;
margin-top:-0.75em;
}

.clockFace div:before {
content:"9";
left:0;
}

.clockFace div:after {
content:"3";
right:0;
}

.clockFace span:after,
.clockFace span:before {
content:"";
box-sizing:border-box;
position:absolute;
left:50%;
width:0.125em;
height:100%;
margin-left:-0.06125em;
border:solid #000;
border-width:1em 0;
transform:rotate(30deg);
}

.clockFace span:after {
transform:rotate(60deg);
}

.clockFace span + span:before {
transform:rotate(-30deg);
}

.clockFace span + span:after {
transform:rotate(-60deg);
}

Код (разметка):

  <div class="clockFace"> <div></div> <span></span> <span></span> <!-- .clockFace --></div>

Код (разметка): Вот по-твоему? Обратите внимание: сделано в динамических размерах, поскольку px — это гигантский средний палец к удобству использования и доступности.

Barmadan

#deathshadow, большое спасибо за это решение, оно работает очень хорошо! Моя идея заключалась в том, чтобы создать какие-то многоразовые чертежи/шаблоны/компоненты. Например.

У меня есть циферблат с цифрами и штрихами, поэтому я могу построить простые часы или часы.

затем я могу построить хронограф, компас (например, добавив 360 штрихов), наконец, я могу построить инструмент искусственного горизонта для самолета, например.

Поэтому эти компоненты должны быть простыми и гибкими одновременно.

Я отступаю от JS, так как очень не хочу использовать его для простых графических элементов.

С другой стороны, я не хочу использовать фотографии, так как я не могу их изменить.

Лейсан2

И это с выравниванием игрового поля за счет обновления на втором этапе. Раздвоенная ручка здесь:
https://jsfiddle.net/Jason_Knight/1h0us4o7/26/

Самые большие оптимизации — это вывод вычислений из цикла, удаление ненужных аргументов, создающих накладные расходы на стек, и понимание радиан, уничтожающее несколько «переменных даром». Несколько способов пожарить рыбу.

Большая проблема заключается в том, что если вам нужен динамический размер, вам нужно подключить onresize для перерасчета размера, или если вы хотите EM, это немного сложно реализовать.

и на самом деле мы ВСЕ должны работать в EM почти для всего, поскольку это только «истинное» доступное измерение медиа на экране.

Spoot

Обновите, я исправил математическую ошибку и уменьшил 12-й такт, чтобы более точно соответствовать исходному изображению.

поэтому обязательно нажмите Ctrl-F5, чтобы получить последнюю версию.

Да, и если вы хотите контролировать размер, просто измените размер шрифта в .lockFace, он полностью масштабируется за счет этого одного значения.

Примечание: я заставил их вести себя как настоящие старомодные часы, где КАЖДАЯ стрелка «тикает» до 60-х, а не только секундная стрелка.

Забавно, что «настоящие» аналоговые часы на самом деле являются цифровыми по функциям.

Алена Мирова

Живая демонстрация здесь с рабочими часами:
https://cutcodedown.com/for_others/iago111/clock/

Вам может показаться, что код часов немного проще, чем у большинства. Обратите внимание, что часы выражены как 120-ые доли дня, поэтому они «отсчитывают» 6 градусов, как и другие элементы.

Bulkin1

Спасибо лор за это! У меня уже есть решение JS, которое я могу использовать, но я могу сравнить эти решения. Есть ли у кого-нибудь идеи, как это сделать с помощью CSS? (Я хотел бы сделать как можно больше с помощью CSS)

Needle1

Хорошо. ребята, я реализовал руководство по CSS #deathshadow:
https://levelup.gitconnected.com/html-css-analog-clock-with-minimal-javascript-9dcf9a16e079

Моя первоначальная идея заключалась в создании секундомера. Теперь все становится сложнее, когда у вас есть циферблаты внутри циферблата. Я начал с CSS, без JS-функциональности: Вот картинка:
https://drive.google.com/file/d/1_51gfHjMLH8KjUsv_AxBkgl3tY5SpGO-/view?usp=sharing

Три маленьких циферблата обозначают минуты (в позиции 12), секунды (в позиции 9) и 10-ю секунды (в позиции 6). Я использовал технику рисования делений #deathshadow. рисуя линии внутри круга, где границей этих линий являются отметки.

При их вращении отображаются все деления. Это прекрасно работает для основных часов, однако у меня возникают проблемы с размещением этих линий на маленьких часах.

Сделал методом проб и ошибок, что всегда плохо! Есть еще 2 проблемы.

На секунды мне нужно 15 контейнеров.

(15 * 2 до/:после) * 2 (вращение)) Это нужно как-то реорганизовать.

А по поводу 10-й секунды у меня нет галочек на противоположных сайтах: Числовой ряд: [36,72,108,144,180,216,252,288,324,360].
HTML:

 /* stopwatch :before + :after */

#chrono-min,
#chrono-tenth-sec,
#chrono-sec {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 width: 3em;
 height: 3em;
}

#chrono-min {
 position: absolute;
 left: 3.5em; /* 10/2 - width/2 */
 top: 1em;
}

#chrono-sec {
 position: absolute;
 top: 3.5em;
 left: 1em;
}

#chrono-tenth-sec {
 position: absolute;
 left: 3.5em; /* 10/2 - width/2 */
 bottom: 1em;
}

#chrono-min:before {
 content: "";
 display: inline-block;
 width: 3em;
 height: 3em;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 background-color: #fff;
 border: 0.05em solid gray;
}

#chrono-tenth-sec:before {
 content: "";
 display: inline-block;
 width: 3em;
 height: 3em;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 background-color: #fff;
 border: 0.05em solid gray;
}

#chrono-sec:before {
 content: "";
 display: inline-block;
 width: 3em;
 height: 3em;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 background-color: #fff;
 border: 0.05em solid gray;
}

/* stopwatch MIN tick-marks */

#chrono-min span {
 position: absolute;
 top: 0.05em;
 left: 1.55em; /* 3/2 - width/2 */
 width: 0.05em;
 height: 100%;
}

#chrono-sec span {
 position: absolute;
 top: 0.05em;
 left: 1.55em; /* 3/2 - width/2 */
 width: 0.02em;
 height: 100%;
}

#chrono-min i,
#chrono-min span:before,
#chrono-min span:after,
#chrono-sec i,
#chrono-sec span:before,
#chrono-sec span:after {
 position: absolute;
 top: 0; /* (3-height) / 2 */
 left: 0;
 width: 100%;
 height: 2.63em;
}

#chrono-min span:before,
#chrono-min span:after,
#chrono-sec span:before,
#chrono-sec span:after {
 content: "";
 border-style: solid;
 border-color: #000;
 border-width: 0.2em 0;
 /* background-color: #0f0; */
}

/* ROTATE MIN */

#chrono-min span:before {
 transform: rotate(0deg);
}

#chrono-min span:after {
 transform: rotate(30deg);
}

#chrono-min span:nth-child(2) {
 transform: rotate(60deg);
}

#chrono-min span:nth-child(3) {
 transform: rotate(120deg);
}

/* ROTATE SEC */

#chrono-sec span:before {
 transform: rotate(0deg);
}

#chrono-sec span:before {
 transform: rotate(6deg);
}

#chrono-sec span:nth-child(2) {
 transform: rotate(12deg);
}

#chrono-sec span:nth-child(3) {
 transform: rotate(24deg);
}

#chrono-sec span:nth-child(4) {
 transform: rotate(36deg);
}

#chrono-sec span:nth-child(5) {
 transform: rotate(48deg);
}

#chrono-sec span:nth-child(6) {
 transform: rotate(60deg);
}

#chrono-sec span:nth-child(7) {
 transform: rotate(72deg);
}

#chrono-sec span:nth-child(8) {
 transform: rotate(84deg);
}

#chrono-sec span:nth-child(9) {
 transform: rotate(96deg);
}

#chrono-sec span:nth-child(10) {
 transform: rotate(108deg);
}

#chrono-sec span:nth-child(11) {
 transform: rotate(120deg);
}

#chrono-sec span:nth-child(12) {
 transform: rotate(132deg);
}

#chrono-sec span:nth-child(13) {
 transform: rotate(144deg);
}

#chrono-sec span:nth-child(14) {
 transform: rotate(156deg);
}

#chrono-sec span:nth-child(15) {
 transform: rotate(168deg);
}

HTML: стиль.css:

 / * CLOCK WRAPPER */ #clock-wrapper { font-size: 4em; position: relative; width: 10em; height: 10em; line-height: 1.5em; margin: 1em auto; padding: 0; } /* END OF CLOCK WRAPPER */ #clock { position: relative; width: 10em; height: 10em; border: 0.0625em solid #444; border-radius: 50%; box-shadow: inset 0.125em 0.25em 0.5em #0005, -0.25em -0.5em 0.5em #fffc, 0 0 0.0625em 0.5em #777, 0 0 0.0625em 0.5625em #000, 0.125em 0.25em 0.5em 0.5em #0004; } #clock *, #clock *:before, #clock *:after { box-sizing: border-box; #clock span { position: absolute; top: 0; left: 4.9375em; /* 10/2 - width/2 */ width: 0.125em; height: 100%; } #clock i, #clock span:before, #clock span:after { position: absolute; top: 0; /* (10-height) / 2 */ left: 0; width: 100%; height: 10em; } #clock span:nth-child(2) { transform: rotate(60deg); } #clock span:nth-child(3) { transform: rotate(120deg); } #clock span:before, #clock span:after { content: ""; border-style: solid; border-color: #000; border-width: 0.5em 0; /* background-color: #0f0; */ } #clock span:before { transform: rotate(0deg); } #clock span:after { transform: rotate(30deg); }

Код (CSS): хроно.css

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="ширина = ширина устройства, начальный масштаб = 1,0" /> <title>Deathshadow watch</title> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="chrono.css" /> </head> <body> <div id="clock-wrapper"> <div id="clock"> <span></span> <span></span> <span></span> <!-- <i></i> <i></i> <i></i> --> </div> <div id="chrono-min"> <span></span> <span></span> <span></span> </div> <div id="chrono-tenth-sec"></div> <div id="chrono-sec"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div>

Код (CSS):

Похожие темы	Дата
В какой программе сделать дизайн сайта	19.12.2024, 05:12
Отрисовка в Corel Draw	19.12.2024, 05:12
Как переопределить горячие клавиши Image ready	19.12.2024, 05:12
3D в дизайне	19.12.2024, 05:12
Как создать новые страницы 1...2...3 и т.д., чтобы в меню их не было видно	19.12.2024, 05:12
Посоветуйте вариант дизайна	19.12.2024, 05:12
гибкий, не растет до полной высоты	19.12.2024, 05:12
Как я могу позволить авторам заявлять права на темы?	19.12.2024, 05:12
Как обновить мой код	19.12.2024, 05:12
Как центрировать этот div?	19.12.2024, 05:12

создать циферблат с помощью CSS

МаринаБаликоева

Adko_ala

Arm1

Barmadan

Лейсан2

Spoot

Алена Мирова

Bulkin1

Needle1

I AM

Интересно