Хорошо. ребята, я реализовал руководство по 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):
