Javascript 创建旋转虚线边框

我想创建旋转虚线边框，但有一个小问题： 我用过这样的东西

HTML:

问题是我想要像两个div一样的东西，一个在另一个里面（一个大一个小） 就像两个圆圈，一个在另一个里面。 但是如果我使用这段代码，它不仅仅旋转边框…它还旋转里面的div…

您的问题是您的孩子

DIV

已经在一个

悬停的
->
旋转的
DIV
中，所以…

在非嵌套图元上使用绝对位置：

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

对于
.rotate
元素，您甚至不需要特殊的类
1
和
2
。只需旋转


.
显然您只使用Chrome。您在Firefox中试用过您的演示吗？：）是的，漂亮的虚线边界@Roko C.Buljan：这就是问题所在，明白吗？我只想一次旋转一圈：@RokoC.Buljan我希望你理解我现在想要在这里完成的事情..不要因为你的链接都搞砸了，确保锁定以进行进一步的更改（共享->单击锁定…）然后在url中发布一个包含/edit的链接。我的建议是：反向旋转内圈-或者-不要使用内部DIV，而是使用绝对位置重叠两个单独的DIV。这很简单，还有一个小问题。。jsbin.com/xoneruju/11/edit？html、css、output…知道为什么在悬停时会发生这种情况吗？我做了一个圆圈，回应性的..我需要欢迎你来到StackOverflow，请阅读这一部分，还有：我也在上面的10/编辑中给你留下了评论demo@IonutFlorinLupu没问题：）
.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 class="rotate1"></div>
<div class="rotate2"></div>

.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); }
}