#css #animation #border #dotted-line
Вопрос:
Я ищу вращающийся круг с пунктирной границей. Это то, что у меня есть до сих пор:
/*Stylings*/ .square { width: 70px; height: 61px; background: red; } .button-border { width: 100%; height: 100%; border-radius: 50%; border: 4px dotted #6B8291; -webkit-animation-name: Rotate; -webkit-animation-duration: 20s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: Rotate; -moz-animation-duration: 20s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: Rotate; -ms-animation-duration: 20s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; } .button-container { position: relative; width: 138px; height: 138px; } .img_rotating .square { position: absolute; top: 50%; left: 50%!important; transform: translate(-50%,-50%); } /*Animation*/ @-webkit-keyframes Rotate { from{-webkit-transform:rotate(0deg);} to{-webkit-transform:rotate(360deg);} } @-moz-keyframes Rotate { from{-moz-transform:rotate(0deg);} to{-moz-transform:rotate(360deg);} } lt;div class="img_rotating"gt; lt;div class="button-container"gt; lt;div class="square"gt;lt;/divgt; lt;div class="button-border"gt;lt;/divgt; lt;/divgt; lt;/divgt; Меня беспокоят эти две точки с неравномерным расстоянием. Я полагаю, что именно там заканчивается граница на самом деле. Это немного сложно заметить, поэтому я отправляю прикрепленный скриншот:
Есть ли лучший подход к тому, как это закодировать? Я хотел бы иметь круг без этих двух близких точек.
Большое спасибо!
Комментарии:
1. Поскольку точки автоматически отображаются браузером, вы ничего не можете сделать. Попробуйте использовать границу 5 пикселей.
2. Спасибо, к сожалению, ширина границы не решит эту проблему, независимо от толщины границы, проблема остается прежней.
3. Это не большая проблема. Я бы забыл об этом.
Ответ №1:
Просто идея, не полный ответ, но я хочу вставить обрезанный код. Как насчет создания только одной точки и генерации остальных с box-shadow помощью . Возможно, с Сасс или Джей Си. Таким образом, вы всегда можете создать идеальный круг (вы можете самостоятельно рассчитать положение каждого шара, а также изменить цвета, если хотите). Это также было бы масштабируемым. Мне пришлось немного изменить ваш код, чтобы увидеть результат.
body { display: flex; justify-content: center; padding-top: 5em; height: 100vh; } .square { width: 70px; height: 61px; background: red; } .dot { width: 100%; color: red; border: 1px solid green; height: 100%; border-radius: 50%; -webkit-animation-name: Rotate; -webkit-animation-duration: 20s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: Rotate; -moz-animation-duration: 20s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: Rotate; -ms-animation-duration: 20s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; } .button-container { display: flex; justify-content: center; align-items: center; width: 138px; height: 138px; } .square { position: relative; } .dot { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } /*Animation*/ @-webkit-keyframes Rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes Rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } .dot { width: 10px; height: 10px; box-shadow: 100px 0px black, -100px 0px black, 0px -100px blue, 0px 100px blue, 71px -71px green, -71px 71px green, -71px -71px pink, 71px 71px pink; } lt;div class="img_rotating"gt; lt;div class="button-container"gt; lt;div class="square"gt; lt;div class="dot"gt;lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt;