在css中制作一个带点边框的圆圈，并在悬停时设置动画

Question

我正在尝试制作一个css圆的动画。当用户悬停时，圆的边界应该变成一条虚线，并且它应该像旋转的轮子一样设置动画。我可以让它在给定的时间内旋转，但我找不到一种方法来制作动画，直到鼠标指针悬停在它上面，然后当鼠标指针从圆圈中取出并制作一个虚线边框时停止动画。

html

<div>
</div>

css

div {
    background: red;
    border: 5px solid green;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    transition: all 5s ease-in-out;
}
div:hover {
     transform:rotate(180deg);
     border: 5px dotted blue;
}

jsfiddle->http://jsfiddle.net/uYBKQ/1/

Answer 1

您需要CSS动画。

在HTML代码中，放入以下类：

<div class="rotate">
 <!-- The content -->
</div>

在您的CSS文件中，添加以下规则（此示例仅适用于webkit）：

div:hover {
     -webkit-animation: rotate 2s linear infinite;
}
@-webkit-keyframes rotate {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(180deg);
    }
}

这是演示

干杯，Leo

如果您想在Firefox中工作，只需添加相应的供应商前缀即可。

Answer 2

我把你的小提琴叉在这里：http://jsfiddle.net/vHRat/3/

以下是更新后的CSS：

div {
    background: red;
    border: 5px solid green;
    width: 200px;
    height: 200px;
    border-radius: 0%;
}
div:hover {
    border: dotted 5px blue;
    animation: hover 5s;
    -webkit-animation: hover 5s; /* Safari and Chrome */
}
@keyframes hover
{
    from {}
    to {
        transform:rotate(360deg);
        -ms-transform:rotate(360deg); /* IE 9 */
        -webkit-transform:rotate(360deg); /* Safari and Chrome */
    }
}
@-webkit-keyframes hover /* Safari and Chrome */
{
    from {}
        to {
            transform:rotate(360deg);
            -ms-transform:rotate(360deg); /* IE 9 */
            -webkit-transform:rotate(360deg); /* Safari and Chrome */
        }
}

此外，如果将边界半径更改为0，则可以清楚地看到旋转。边框显示为实心，而圆由于旋转而显示为静态。