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

这是DEMO

干杯，狮子座

如果您想在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 */
        }
}

同样值得一提的是，如果将border-radius更改为0，则可以清楚地看到旋转。边框显示为实线，由于旋转，圆圈显示为静态。

在悬停时在css和动画中制作带有虚线边框的圆圈

2 个答案: