2

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

4

2 回答 2

4

你需要 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);
    }
}

这是一个演示

干杯，狮子座

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

于 2013-06-21T17:19:07.147 回答
4

我在这里叉了你的小提琴：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，则可以清楚地看到旋转。由于旋转，边框显示为实心，圆圈显示为静态。

于 2013-06-21T17:22:16.253 回答