Ответственный образ изображения загрузочный

Question

Две проблемы. Черный border кажется немного яйцо (очень хорошо видно, если вы измените продолжительность animation от 60s до 1s). Изображения даже с загрузочным class="img-responsive center-block" не меняют ширину/высоту. Как я могу это исправить?

JSFiddle зеркало: https://jsfiddle.net/9g7oswgk/3/

EDIT # 1: Найдено решение для почти идеальный круг границы в моем фрагменте кода, но пришлось удалить текст внутри него. Все, что я должен был сделать, это изменить padding-bottom значение от 100% до 99%. В ответном разделе @Ganpat дал идеальное решение для добавления дополнительного класса переноса. С 1s анимация может выглядеть несовершенной, но с 60-х годов ее несовершенство почти невидимо.

EDIT # 2: найдено решение для чувствительных изображений внутри этой границы. Просто пришлось заменить hardcoded width: 150px; height: 150px; на width: 40%; классу с именем img-orbit. По-видимому, 50% делает их слишком большими, но 40% - K.

EDIT # 3: Похоже, что изображения сосредоточены на значении -20%.

.orbit{ 
 
    text-align: center; 
 
    color: black; 
 
    padding-bottom: 99%; 
 
    position: relative; 
 
    border: 3px solid black; 
 
    border-radius: 50%; 
 
    
 
    -webkit-animation: spin-right 60s linear infinite; 
 
    -moz-animation: spin-right 60s linear infinite; 
 
     -ms-animation: spin-right 60s linear infinite; 
 
     -o-animation: spin-right 60s linear infinite; 
 
      animation: spin-right 60s linear infinite; /* change here from 60s to 1s*/ 
 
    
 
} 
 

 
/* small circles */ 
 
.img-orbit{ 
 
    width: 40%; 
 
    position: absolute; 
 
    border: 2px solid black; 
 
    border-radius: 50%; 
 
    box-shadow: 0 0 34px blue; 
 
    -webkit-animation: spin-left 60s linear infinite; 
 
    -moz-animation: spin-left 60s linear infinite; 
 
     -ms-animation: spin-left 60s linear infinite; 
 
     -o-animation: spin-left 60s linear infinite; 
 
      animation: spin-left 60s linear infinite; 
 
} 
 

 
.img-orbit2{ 
 
    top: 30%; 
 
    left: -20%; 
 
} 
 
.img-orbit4{ 
 
    top: 30%; 
 
    right: -20%; 
 
} 
 

 
.some-class{ 
 
    width: 50%; 
 
    margin: auto; 
 
} 
 

 
@-webkit-keyframes spin-right { 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
     -moz-transform: rotate(360deg); 
 
     -ms-transform: rotate(360deg); 
 
     -o-transform: rotate(360deg); 
 
      transform: rotate(360deg); 
 
    } 
 
} 
 

 
@keyframes spin-right { 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
     -moz-transform: rotate(360deg); 
 
     -ms-transform: rotate(360deg); 
 
     -o-transform: rotate(360deg); 
 
      transform: rotate(360deg); 
 
    } 
 
} 
 

 
@-webkit-keyframes spin-left { 
 
    100% { 
 
    -webkit-transform: rotate(-360deg); 
 
     -moz-transform: rotate(-360deg); 
 
     -ms-transform: rotate(-360deg); 
 
     -o-transform: rotate(-360deg); 
 
      transform: rotate(-360deg); 
 
    } 
 
} 
 

 
@keyframes spin-left { 
 
    100% { 
 
    -webkit-transform: rotate(-360deg); 
 
     -moz-transform: rotate(-360deg); 
 
     -ms-transform: rotate(-360deg); 
 
     -o-transform: rotate(-360deg); 
 
      transform: rotate(-360deg); 
 
    } 
 
}

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="some-class"> 
 
    <div class='orbit'> 
 
     <img class="img-orbit img-orbit2" src="http://lorempixel.com/200/200/" class=" img-responsive center-block"> 
 
     <img class="img-orbit img-orbit4" src="http://lorempixel.com/200/200/" class=" img-responsive center-block"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Чтобы сделать это, как реагировать вы должны создать другой Div вокруг «орбиты» класса DIV и дают ширину этого Div в процентах.

<div class="container"> 
<div class="some-class"> 
    <div class="orbit"> 
     <h2><span class="jumbotron-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</span></h2> 
     <img class="img-orbit img-orbit2" src="http://lorempixel.com/200/200/"> 
     <img class="img-orbit img-orbit4" src="http://lorempixel.com/200/200/"> 
    </div> 
    </div> 
</div> 

, а затем попробуйте добавить ширину к этому «некоторому классу».

.some-class{ 
    width: 50%; 
    margin: auto; 
} 

Вторая проблема: если вы посмотрите, что ДИВЫ с инспектировать элементы, то вы получите, что ширина дивы становится chaged: раз попытаться дать здесь фиксированному и высоту он правильно работает, когда вы уменьшаете переходную форму продолжительности От 60 до 1 с.

или иначе, если вы хотите изменить заголовок вы текст, то вы можете разрешить его, или если вы можете удалить этот текст, то он также может решить, что