创建旋转的虚线边框

Question

我想创建一个旋转的虚线边框，但是我有一个小问题：我使用了类似的方法。

HTML：

<div class="rotate">
</div>

CSS：

.rotate {
        background: red;
        border: 5px solid green;
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }

    .rotate:hover {
         -webkit-animation: rotate 2s linear infinite;
         border: 5px dotted blue;
    }

    @-webkit-keyframes rotate {
        from{
            -webkit-transform: rotate(0deg);
        }
        to{
            -webkit-transform: rotate(180deg);
        }
    }

问题是我想要一个像两个div一样在另一个内部（一个更大和一个更小的）的东西，就像两个圆圈一个在另一个里面。 但是，如果我使用此代码，它不仅会旋转边框...它也会旋转其内部的div ...

Answer 1

Chrome实例

您的问题是您的孩子DIV已经位于hovered -> rotating DIV所以...
在非嵌套元素上使用绝对位置：

<div class="rotate1"></div>
<div class="rotate2"></div>

CSS：

.rotate1,
.rotate2{
  position:absolute;
  left:0;
  right:0;
  margin:0 auto;
  background: red;
  border: 5px dashed black;
  border-radius: 50%;
}
.rotate1 {
  width: 400px;
  height: 400px;
}
.rotate2 {
  width: 200px;
  height: 200px;
  top:100px
}

.rotate1:hover,
.rotate2:hover{
  -webkit-animation: rotate 12s linear infinite;
  border: 5px dashed blue;
}

@-webkit-keyframes rotate {
  from{ -webkit-transform: rotate(0deg);   }
  to{   -webkit-transform: rotate(360deg); }
}

您甚至不需要.rotate元素的特殊类1和2 。 rotate 。
这是一个例子 。