Question

两个问题。黑色border似乎是蛋形的（如果您将animation的持续时间从60s更改为1s，则非常明显）。即使使用bootstrap class="img-responsive center-block"，图像也不会改变它们的宽度/高度。我该如何解决这个问题？

JSFiddle镜像： https://jsfiddle.net/9g7oswgk/3/

编辑＃1：在我的代码段中找到了几乎完美的圆形边框的解决方案，但不得不删除其中的文字。我所要做的就是将padding-bottom值从100%更改为99%。从响应部分开始，@ Ganpat为其添加额外的包装类提供了理想的解决方案。使用1s动画可能看起来不完美，但60年代它的缺陷几乎是不可见的。

编辑＃2：在此边框内找到响应式图像的解决方案。只需将带有width: 150px; height: 150px;的硬编码width: 40%;替换为名为img-orbit的类。显然50%使它们太大，但40％是K.

编辑＃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

为了使其具有响应性，您必须围绕“orbit”类div创建另一个div，并以百分比形式给出div的宽度。

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

然后尝试为这个“some-class”div添加宽度。

CALayer

第二个问题：如果你使用inspect元素观察div，那么你会得到divs宽度变得很大的问题：一旦尝试给出固定的高度和高度，当你将转换持续时间从60s减少到1s时它就能正常工作。

或者如果你想调整标题文本的大小，那么你可以解决它，或者你可以删除那个文本然后它也可以解决这个问题

响应圆圈图像引导程序

1 个答案: