javascript - 悬停时如何使虚线边框顺时针移动

标签 javascript jquery html css

<分区>

我在 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/

关于javascript - 悬停时如何使虚线边框顺时针移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40057495/

相关文章:

javascript - Mapbox 使用 loadURL 处理多个 GEOJSON 文件

jquery - Bootstrap 网格/列响应问题

javascript - 如何让 jquery 在 Bootstrap v3 的面板内添加面板

javascript代码在运行后自行删除

javascript - 固定宽度的accounting.js格式数字

javascript - 我们可以在 firebase 的云功能中使用 async/await 吗?

javascript - Highcharts - 在单个值上显示标记图标

Javascript 模块多实例

javascript - 使用来自输入的数据更新数组

asp.net - jQuery黑莓ajax问题