Geek Answers Handbook

Rotate only borders using CSS

I am trying to rotate the border only with css, but the font icon also rotates. How to stop the rotation of the icon and make only the border?

CSS

.circle { width: 100px; height: 100px; background: transparent; border-radius: 50%; border: 2px dashed #000; -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; } .play { padding: 20px 30px; font-size: 56px; } @-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);} }

HTML:

 <div class="circle"> <div class="play"><i class="fa fa-play"></i></div> </div>

Where am I wrong in this code?

DEMO JSFIDDEL

+5
source share
2 answers

The rotating parent will rotate the child, so it’s better to erase the border separately, as here

 .circle { width: 100px; height: 100px; position: relative; } .circle .border { /* content: ''; */ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: transparent; border-radius: 50%; border: 2px dashed #000; -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; } .play { padding: 20px 30px; font-size: 56px; } .stop { font-size: 12px; padding: 30px; text-align: center; } @-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); } } 
 <div class="circle"> <div class="border"></div> <div class="play"><i class="fa fa-play"></i> </div> </div> <p> PS: The icon loading is a bit slow. Wait until it shows up. </p> <div class="circle"> <div class="border"></div> <div class="stop">Stop me please</div> </div>
+5
source 
 <div class="button-container"> <i class="fa fa-play button-icon"></i> <div class="button-border"></div> </div>

You can find an updated version of your sample here JSFiddle

+1
source

More articles:


All Articles