CODEWITHSUNDEEP
javascriptcssrotationborder
Ionut Florin Lupu
Ionut Florin Lupu

Reputation: 19

Create spinning dashed border

I want to create a spinning dashed border but i have a little problem: I used something like this.

HTML:

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

CSS:

.rotate {
        background: red;
        border: 5px solid green;
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }

    .rotate:hover {
         -webkit-animation: rotate 2s linear infinite;
         border: 5px dotted blue;
    }

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

Problem is that i want something like two divs one inside of another (one bigger and one smaller) like two circles one inside the other. But if i use this code, it doesn't spin the border only...it spins the div inside it too...

Upvotes: 2

Views: 4819

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

Chrome example

Your problem is that your children DIV is already inside a hovered -> rotating DIV so...
Use position absolute on non-nested elements:

<div class="rotate1"></div>
<div class="rotate2"></div>

CSS:

.rotate1,
.rotate2{
  position:absolute;
  left:0;
  right:0;
  margin:0 auto;
  background: red;
  border: 5px dashed black;
  border-radius: 50%;
}
.rotate1 {
  width: 400px;
  height: 400px;
}
.rotate2 {
  width: 200px;
  height: 200px;
  top:100px
}

.rotate1:hover,
.rotate2:hover{
  -webkit-animation: rotate 12s linear infinite;
  border: 5px dashed blue;
}

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

You don't even need the special classes 1 and 2 for your .rotate elements. Just rotate.
Here's an example.

Upvotes: 1

Related Questions