CODEWITHSUNDEEP
htmlcss
Si8
Si8

Reputation: 9225

How to rotate the border colors of a div

Fiddle: https://jsfiddle.net/t11738dm/

HTML:

<div class="ball-5"></div>

How can I rotate 360 degree, only the border colors of the div?

I tried the following but that rotates the entire div which I don't want:

.ball-5 {
    -webkit-animation-name: Rotate;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: Rotate;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: Rotate;
    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

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

I would like to have the colors race around the div not the div nor the content of the div to go in circle.

Upvotes: 2

Views: 3163

Answers (2)

Cameron
Cameron

Reputation: 1067

I would say having a div over it that has a transparent background and is the div that has the borders. Then that div rotates on top and it looks like it is the border of the actual element rotating.

Try this:

#containerDiv {
  position: relative;
}
#div, #div2 {
  position: absolute;
  left: 0px; top: 0px;
}
#div2 {
  z-index: 5;
  background: transparent;
  border: 1px black solid;
}
#div {
  background: #f00;
}

div2 will be the animated one and div will be the non-border one. The container will have div and div2 inside it.

Upvotes: 0

Christoph
Christoph

Reputation: 51211

The only solution I can think of is using pseudo elements (or nested elements) to decouple the border and the center.

.ball-5 {
  background: #fff;
  border-radius: 500px;
  box-shadow: 0px 0px 10px #222;
  padding: 10px;
  cursor: pointer;
  overflow:hidden;
  border:0px;
}

.ball-5 {
  position:relative;
  width: 115px;
  height: 70px;
}

.ball-5:before{
  display:block;position:absolute;
  top:-55px;left:-30px;
  content:"";width:0px;height:0px;
  border: solid 100px;
  border-top-color:  rgba(156, 206, 228, 1);
  border-right-color: rgba(122, 183, 142, 1);
  border-bottom-color: rgba(255, 177, 38, 1);
  border-left-color: rgba(241, 139, 41, 1);
}

.ball-5:after{
  display:block;position:absolute;
  top:10px;left:10px;
  content:"";
  width: 115px;
  height: 70px;
  background:white;
  border-radius: 500px;
}

.ball-5:before {
  animation: Rotate 2s infinite linear;
}

@keyframes Rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<div class="ball-5">
</div>

Upvotes: 3

Related Questions