Блог

http://raphaeljs.com/polar-clock.html

Я бы хотел создать это без использования SVC или Canvas. Кто-нибудь может указать мне на примеры, делающие что-то подобное с css?

Спасибо!

Ну, SVG, безусловно, кажется правильным решением для этого (или canvas, но я бы предпочел SVG). И скрипт Raphael будет работать даже в старых версиях IE, поскольку он переключается на VML в IE6 / 7 / 8, поэтому, если вы пытаетесь избежать SVG / Canvas из-за этого, вам не нужно беспокоиться.

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

Есть несколько людей, которые продемонстрировали рисование некоторых довольно сложных фигур с использованием чистого CSS. Смотрите http://css-tricks.com/examples/ShapesOfCSS / например.

В чистом CSS / HTML единственным реалистичным способом рисования кривых является использование border-radius стиля. Круг, как в примере в вопросе, может быть получен с помощью квадратного элемента с border-radius и толстой рамкой.

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

Теперь самое сложное. Превратить их из окружностей в дуги будет сложнее. Единственный разумный способ, который я могу придумать, это сделать, это наложить еще несколько элементов поверх кругов, окрашенных в тот же цвет, что и фон, чтобы скрыть часть круга. Нам нужно было бы использовать CSS transform , чтобы повернуть их так, чтобы угол отсечения был правильным.

Так что это можно было бы сделать.

Анимировать его (конечно, так же красиво, как в примере) было бы на порядок сложнее, и я бы не хотел даже начинать думать об этом. Просто дайте мне SVN в любой день.