Создать что-то подобное с помощью CSS3?

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

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

Спасибо!

javascript,css,css3,

1

Ответов: 1


1 принят

Что ж, SVG, безусловно, кажется правильным решением (или холстом, но я бы предпочел 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 в любой день.

JavaScript, CSS, CSS3,
Похожие вопросы