javascript – 当您悬停时,如何使虚线边框线顺时针移动[复制]

参见英文答案 > Dashed border animation in css3 animation                                    5个
我在div元素周围有一个虚线边框：

.dash_border{
        border: dashed;
        stroke: 2px;
        margin:20px;
    }

当我的指针位于div元素的顶部时,我想顺时针移动虚线,当我离开该元素时,我想停止.我该怎么做 ？

解决方法

div {
    background: white;
    border: 2px solid black;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

div:hover {
     -webkit-animation: rotate 2s linear infinite;
     border: 2px dashed blue;
}

@-webkit-keyframes rotate {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(180deg);
    }
}

<div class="rotate"></div>

这是基于这个答案：Making a circle with dotted border in css and animating on hover.

http://jsfiddle.net/MadalinaTn/j4ys9x2L/