Advanced Search

Return to Snippet

Revision: 56734
at April 13, 2012 00:24 by ryanfiorini
Initial Code 
<style>
#outerCircle { 
    height:300px;
    width:300px;
    background-color:#fff;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
    border:3px solid gray;
    -webkit-animation-duration:5s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:spin;
    position:relative;
    top:30px;
    left:30px;
}

#innerCircle {
    height:30px;
    width:30px;
    background-color:#000;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    position:relative;
    top:26px;
    left:26px;
}

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

.background {
    border:1px solid #000;
    background: #d0e4f7; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); /* FF3.6+ */
    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+ */
    background: -webkit-linear-gradient(-45deg,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* IE10+ */
    background: linear-gradient(-45deg,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
</style>

<div id="outerCircle">
    <div id="innerCircle" class="background">
    </div>
</div>
Initial URL 
http://jsfiddle.net/ryanwfiorini/SM9r4/
Initial Description 
* This will not work in IE.
Initial Title 
CSS3 Only - Small Sphere Following Larger Circular Track
Initial Tags 
animation, CSS3
Initial Language 
CSS