在CSS中用虚线边框制作圆形，并在悬停时进行动画制作 [英] Making a circle with dotted border in css and animating on hover

问题描述

我正在尝试制作一个CSS圈的动画。当用户徘徊它时，圆圈的边界应该变成虚线，它应该像一个旋转轮一样动画。我可以让它旋转一段时间，但我无法找到一种方法来制作动画，直到鼠标指针悬停在上面为止，然后当鼠标指针从圆圈中取出并制作虚线边框时停止动画。

html

 < div> 
< / div> 
  

css

  div {
 background：red; 
 border：5px纯绿色; 
 width：200px; 
 height：200px; 
 border-radius：50％; 
转换：全部5秒缓出; 
} 
 
 div：hover {
 transform：rotate（180deg）; 
 border：5px点缀蓝色; 
} 
  

jsfiddle - > http://jsfiddle.net/uYBKQ/1/

解决方案

您需要CSS动画。

在您的HTML代码中，放置下面的类：

 < div class =rotate> 
 <！ - 内容 - > 
< / div> 
  

在您的CSS文件中，添加这些规则（此示例仅适用于webkit）：

  div：hover {
 -webkit-animation：rotate 2s linear infinite; 
} 
 
 @ -webkit-keyframes rotate {
 from {
 -webkit-transform：rotate（0deg）; 
} 
到{
 -webkit-transform：rotate（180deg）; 
 
 
  

以下是 DEMO

干杯，利奥

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

I'm trying to animate a css circle. When the user hovers it, the border of the circle should become a dotted line and it should animate like a spinning wheel. I can make it spin for a given time, but I couldn't find a way to animate it until the mouse pointer hovers on it and then stop the animation when the mouse pointer is taken out of the circle and make a dotted border.

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/

解决方案

You need CSS Animations.

In your HTML code, put the follow class:

<div class="rotate">
 <!-- The content -->
</div>

And in your CSS file, add these rules (this example is only for webkit):

div:hover {
     -webkit-animation: rotate 2s linear infinite;
}

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

Here's a DEMO

Cheers, Leo

If you want to works in Firefox, just add the respective vendor prefixes.

这篇关于在CSS中用虚线边框制作圆形，并在悬停时进行动画制作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！