在css中制作一个带有虚线边框的圆圈并在悬停时制作动画答案

【问题标题】：Making a circle with dotted border in css and animating on hover在css中制作一个带有虚线边框的圆圈并在悬停时制作动画
【发布时间】：2013-06-22 01:35:28
【问题描述】：

我正在尝试为 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/

【问题讨论】：

你需要 CSS 动画。 CSS 过渡不会循环。
如何制作虚线边框？你能帮我吗:)
我假设您使用的是 Firefox stackoverflow.com/questions/3718215/…
border: 5px dotted green; 会给你虚线边框
fwiw，有一个未解决的错误：bugzilla.mozilla.org/show_bug.cgi?id=382721

标签： html css css-transitions

【解决方案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);
    }
}

这是DEMO

干杯，狮子座

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

【讨论】：

请记住，这只会出现在现代浏览器中，您可能需要查看modernizr.com。 Modernizr 检查并用 javascript 替换不支持的 css3 功能。
我说得再好不过了。谢谢@Joe_Maker。

【解决方案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 */
        }
}

另外，如果你将border-radius改为0，你可以清楚地看到旋转。由于旋转，边框显示为实心，圆圈显示为静态。

【讨论】：