Advanced Search

CSS3 Only - Small Sphere Following Larger Circular Track

/ Published in: CSS
Save to your folder(s)
* This will not work in IE.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style>
  2. #outerCircle { 
  3.     height:300px;
  4.     width:300px;
  5.     background-color:#fff;
  6.     -webkit-border-radius: 200px;
  7.     -moz-border-radius: 200px;
  8.     border-radius: 200px;
  9.     border:3px solid gray;
  10.     -webkit-animation-duration:5s;
  11.     -webkit-animation-iteration-count:infinite;
  12.     -webkit-animation-timing-function:linear;
  13.     -webkit-animation-name:spin;
  14.     position:relative;
  15.     top:30px;
  16.     left:30px;
  17. }
  18.  
  19. #innerCircle {
  20.     height:30px;
  21.     width:30px;
  22.     background-color:#000;
  23.     -webkit-border-radius: 15px;
  24.     -moz-border-radius: 15px;
  25.     border-radius: 15px;
  26.     position:relative;
  27.     top:26px;
  28.     left:26px;
  29. }
  30.  
  31. @-webkit-keyframes spin { 
  32.     from {
  33.         -moz-transform:rotate(0deg);
  34.         -webkit-transform:rotate(0deg);
  35.         -o-transform:rotate(0deg);
  36.         -ms-transform:rotate(0deg);
  37.         transform:rotate(0deg) ;            
  38.     } 
  39.     to { 
  40.         -moz-transform:rotate(360deg);
  41.         -webkit-transform:rotate(360deg);
  42.         -o-transform:rotate(360deg);
  43.         -ms-transform:rotate(360deg);
  44.         transform:rotate(360deg) ;        
  45.     } 
  46. }
  47.  
  48. .background {
  49.     border:1px solid #000;
  50.     background: #d0e4f7; /* Old browsers */
  51.     background: -moz-linear-gradient(-45deg,  #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); /* FF3.6+ */
  52.     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#d0e4f7), color-stop(24%,#73b1e7), color-stop(50%,#0a77d5), color-stop(79%,#539fe1), color-stop(100%,#87bcea)); /* Chrome,Safari4+ */
  53.     background: -webkit-linear-gradient(-45deg,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Chrome10+,Safari5.1+ */
  54.     background: -o-linear-gradient(-45deg,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Opera 11.10+ */
  55.     background: -ms-linear-gradient(-45deg,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* IE10+ */
  56.     background: linear-gradient(-45deg,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* W3C */
  57.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  58. }
  59. </style>
  60.  
  61. <div id="outerCircle">
  62.     <div id="innerCircle" class="background">
  63.     </div>
  64. </div>

URL: http://jsfiddle.net/ryanwfiorini/SM9r4/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.