参见英文答案 >
Dashed border animation in css3 animation 5个
我在div元素周围有一个虚线边框:
我在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.