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 example

您的问题是您的孩子DIV已经在hovered - ＆gt;内了rotating DIV所以......
在非嵌套元素上使用position绝对位置：

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

您甚至不需要为1元素设置特殊课程2和.rotate。只需rotate。
Here's an example

创建旋转虚线边框

1 个答案: