CSS3 Saturn Icon Animated

In this example below you will see how to do a CSS3 Saturn Icon Animated with some HTML / CSS and Javascript

Inspired from What if... by SvN

Thumbnail
This awesome code was written by motorlatitude, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright motorlatitude ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS3 Saturn Icon Animated</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body{
  margin: 0;
  padding: 0;
  background: #173743;
}

.wrapper{
  position: absolute;
  width: 400px;
  height: 400px;
  left: calc(50% - 200px);
  top: calc(50% - 200px);
  z-index: 10;
}

.box1{
  position: absolute;
  background: #59cddc;
  border-radius: 50px;
  animation: box1 0.5s 0 linear;
  animation-fill-mode: forwards;
}

@keyframes box1{
  0%{
    width: 0px;
    height: 0px;
    left: 50%;
    top: 50%;
    transform: rotate(0deg);
  }
  55%{
    width: 340px;
    height: 340px;
    left: calc(50% - 170px);
    top: calc(50% - 170px);
    transform: rotate(290deg);
  }
  100%{
    width: 290px;
    height: 290px;
    left: calc(50% - 145px);
    top: calc(50% - 145px);
    transform: rotate(270deg);
  }
}

.box2{
  position: absolute;
  background: linear-gradient(to top, rgba(72,165,186,1) 0%,rgba(31,82,117,1) 100%); 
  border-radius: 50px;
  animation: box2 0.5s 0 linear;
  animation-fill-mode: forwards;
}

@keyframes box2{
  0%{
    width: 0px;
    height: 0px;
    left: 50%;
    top: 50%;
    transform: rotate(90deg);
  }
  55%{
    width: 340px;
    height: 340px;
    left: calc(50% - 170px);
    top: calc(50% - 170px);
    box-shadow: inset 0 -5px 0 #59cddc, inset 0 9px 0 #153c5f, 0 0 15px #122933;
    transform: rotate(220deg);
  }
  80%{
    width: 280px;
    height: 280px;
    left: calc(50% - 140px);
    top: calc(50% - 140px);
    box-shadow: inset 0 -5px 0 #59cddc, inset 0 9px 0 #153c5f, 0 0 15px #122933;
    transform: rotate(170deg);
  }
  100%{
    width: 300px;
    height: 300px;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    box-shadow: inset 0 -1px 0 #59cddc, inset 0 5px #153c5f, 0 0 12px #011822;
    transform: rotate(180deg);
  }
}

.planet{
  position: absolute;
  overflow: hidden;
  z-index: 10;
  background: linear-gradient(45deg, rgba(232,232,227,1) 0%,rgba(193,162,135,1) 100%);
  box-shadow: inset -8px -8px 0 rgba(0,0,0,0.3);
  border-radius: 360px;
  transform: rotate(15deg);
  animation: planet 0.6s 0.1s linear;
  animation-fill-mode: forwards;
}

@keyframes planet{
  0%{
    width: 0px;
    height: 0px;
    left: 50%;
    top: 50%;
  }
  10%{
    box-shadow: inset -8px -8px 0 rgba(0,0,0,0.3); 
  }
  55%{
    width: 220px;
    height: 220px;
    left: calc(50% - 110px);
    top: calc(50% - 110px);
  }
  70%{
    width: 160px;
    height: 160px;
    left: calc(50% - 80px);
    top: calc(50% - 80px);
  }
  100%{
    width: 180px;
    height: 180px;
    background: linear-gradient(135deg, rgba(232,232,227,1) 0%,rgba(193,162,135,1) 100%);
    left: calc(50% - 90px);
    top: calc(50% - 90px);
  }
}

.box3{
  position: absolute;
  overflow: hidden;
  width: 300px;
  z-index: 3;
  height: 300px;
  left: calc(50% - 150px);
  top: calc(50% - 150px);
  border-radius: 50px;
  transform: rotate(180deg);
}

.planet_shadow{
  position: absolute;
  top: calc(50% - 75px);
  left: calc(50% - 165px);
  background: rgba(0,0,0,0.3);
  width: 200px;
  height: 0px;
  transform: rotate(45deg);
  animation: planet_shadow 0.6s 0.1s linear;
  animation-fill-mode: forwards;
}

@keyframes planet_shadow{
  0%{
    top: calc(50% - 75px);
    left: calc(50% - 165px);
    width: 200px;
    height: 0px;
  }
  55%{
    top: calc(50% - 175px);
    left: calc(50% - 165px);
    width: 200px;
    height: 220px;
  }
  70%{
    top: calc(50% - 150px);
    left: calc(50% - 165px);
    width: 200px;
    height: 160px;
  }
  100%{
    top: calc(50% - 160px);
    left: calc(50% - 170px);
    width: 200px;
    height: 180px;
  }
  
}


.circle{
  position: absolute;
  width: 0px;
  height: 0px;
  left: 50%;
  top: 50%;
  border: 4px solid #fff;
  border-radius: 360px;
  animation: circle 0.4s 0.2s linear;
  animation-fill-mode: forwards;
}

@keyframes circle{
  0%{
    width: 0px;
    height: 0px;
    left: 50%;
    top: 50%;
  }
  90%{
    opacity: 1;
  }
  100%{
    width: 400px;
    height: 400px;
    opacity: 0;
    left: calc(50% - 200px);
    top: calc(50% - 200px);
  }
}

.planet ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.planet ul li:first-child{
  position: absolute;
  top: -220px;
  left: 145px;
  width: 30px;
  height: 240px;
  transform: rotate(45deg);
  background: rgba(0,0,0,0.1);
  animation: stripe1 0.3s 0.4s linear;
  animation-fill-mode: forwards;
}

@keyframes stripe1{
  0%{
    top: -220px;
    left: 145px;
  }
  100%{
    top: -120px;
    left: 45px;
  }
}

.planet ul li:nth-child(2){
  position: absolute;
  top: 100px;
  left: -115px;
  width: 40px;
  height: 240px;
  transform: rotate(45deg);
  background: rgba(0,0,0,0.1);
  animation: stripe2 0.3s 0.4s linear;
  animation-fill-mode: forwards;
}

@keyframes stripe2{
  0%{
    top: 100px;
    left: -115px;
  }
  100%{
    top: -60px;
    left: 45px;
  }
}

.planet ul li:nth-child(3){
  position: absolute;
  top: -190px;
  left: 225px;
  width: 8px;
  height: 240px;
  transform: rotate(45deg);
  background: rgba(0,0,0,0.2);
  animation: stripe3 0.3s 0.4s linear;
  animation-fill-mode: forwards;
}

@keyframes stripe3{
  0%{
    top: -190px;
    left: 225px;
  }
  100%{
    top: -50px;
    left: 85px;
  }
}

.planet ul li:nth-child(4){
  position: absolute;
  top: 150px;
  left: -45px;
  width: 40px;
  height: 240px;
  transform: rotate(45deg);
  background: rgba(187,154,121,0.5);
  animation: stripe4 0.3s 0.4s linear;
  animation-fill-mode: forwards;
}

@keyframes stripe4{
  0%{
    top: 150px;
    left: -45px;
  }
  100%{
    top: -10px;
    left: 115px;
  }
}

.ring{
  position: absolute;
  top: 23px;
  left: 30px;
  z-index: 3;
  width: 320px;
  height: 320px;
  transform: rotateX(70deg) rotateY(-30deg);
  border: 15px solid #877f77;
  box-shadow: inset 15px 15px 0 #948c8a, inset -15px -15px 0 #948c8a, inset 16px 20px 0 #162f3a, 16px 20px 0 #948c8a, -15px -5px 0 #948c8a, -6px 16px 0 #162f3a;
  border-radius: 360px;
  opacity: 0;
  animation: ring 0.1s 0.5s linear;
  animation-fill-mode: forwards;
}

@keyframes ring{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 0;
  }
  51%{
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}

.box4{
  position: absolute;
  top: 183px;
  left: 155px;
  overflow: hidden;
  width: 200px;
  height: 120px;
  z-index: 10;
}

.ring_front{
  position: absolute;
  top: -160px;
  left: -125px;
  z-index: 3;
  width: 320px;
  height: 320px;
  transform: rotateX(70deg) rotateY(-30deg);
  border: 15px solid #877f77;
  box-shadow: inset 15px 15px 0 #948c8a, inset -15px -15px 0 #948c8a, inset 16px 20px 0 #162f3a, 16px 20px 0 #948c8a, -15px -5px 0 #948c8a, -6px 20px 0 #162f3a;
  border-radius: 360px;
  opacity: 0;
  animation: ring 0.1s 0.5s linear;
  animation-fill-mode: forwards;
}
    
.stars{
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}

.stars ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.stars ul li{
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 360px;
}

.credits{
  font-family: Sans Serif, Helvetica, Arial;
  color: #fff;
  font-weight: 100;
  position: absolute;
  bottom: 2px;
  left: 2px;
}

.credits a{
  text-decoration: none;
  color: #3c8da6;
}
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class='wrapper'>
  <div class='box1'></div>
  <div class='box2'></div>
  <div class='box3'>
    <div class='planet_shadow'></div>
  </div>
  <div class='planet'>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class='circle'></div>
  <div class='ring'></div>
  <div class='box4'>
    <div class='ring_front'></div>
  </div>
</div>
<div class='stars'>
  <ul></ul>
</div>
<div class='credits'>
  Inspired from <a href="https://dribbble.com/shots/1509358-What-if" target="_blank">What if...</a> by <a href="https://dribbble.com/SvNProd" target="_blank">SvN</a>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/motorlatitude/css3-saturn-icon-animated-sabEi */
body{
  margin: 0;
  padding: 0;
  background: #173743;
}

.wrapper{
  position: absolute;
  width: 400px;
  height: 400px;
  left: calc(50% - 200px);
  top: calc(50% - 200px);
  z-index: 10;
}

.box1{
  position: absolute;
  background: #59cddc;
  border-radius: 50px;
  animation: box1 0.5s 0 linear;
  animation-fill-mode: forwards;
}

@keyframes box1{
  0%{
    width: 0px;
    height: 0px;
    left: 50%;
    top: 50%;
    transform: rotate(0deg);
  }
  55%{
    width: 340px;
    height: 340px;
    left: calc(50% - 170px);
    top: calc(50% - 170px);
    transform: rotate(290deg);
  }
  100%{
    width: 290px;
    height: 290px;
    left: calc(50% - 145px);
    top: calc(50% - 145px);
    transform: rotate(270deg);
  }
}

.box2{
  position: absolute;
  background: linear-gradient(to top, rgba(72,165,186,1) 0%,rgba(31,82,117,1) 100%); 
  border-radius: 50px;
  animation: box2 0.5s 0 linear;
  animation-fill-mode: forwards;
}

@keyframes box2{
  0%{
    width: 0px;
    height: 0px;
    left: 50%;
    top: 50%;
    transform: rotate(90deg);
  }
  55%{
    width: 340px;
    height: 340px;
    left: calc(50% - 170px);
    top: calc(50% - 170px);
    box-shadow: inset 0 -5px 0 #59cddc, inset 0 9px 0 #153c5f, 0 0 15px #122933;
    transform: rotate(220deg);
  }
  80%{
    width: 280px;
    height: 280px;
    left: calc(50% - 140px);
    top: calc(50% - 140px);
    box-shadow: inset 0 -5px 0 #59cddc, inset 0 9px 0 #153c5f, 0 0 15px #122933;
    transform: rotate(170deg);
  }
  100%{
    width: 300px;
    height: 300px;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    box-shadow: inset 0 -1px 0 #59cddc, inset 0 5px #153c5f, 0 0 12px #011822;
    transform: rotate(180deg);
  }
}

.planet{
  position: absolute;
  overflow: hidden;
  z-index: 10;
  background: linear-gradient(45deg, rgba(232,232,227,1) 0%,rgba(193,162,135,1) 100%);
  box-shadow: inset -8px -8px 0 rgba(0,0,0,0.3);
  border-radius: 360px;
  transform: rotate(15deg);
  animation: planet 0.6s 0.1s linear;
  animation-fill-mode: forwards;
}

@keyframes planet{
  0%{
    width: 0px;
    height: 0px;
    left: 50%;
    top: 50%;
  }
  10%{
    box-shadow: inset -8px -8px 0 rgba(0,0,0,0.3); 
  }
  55%{
    width: 220px;
    height: 220px;
    left: calc(50% - 110px);
    top: calc(50% - 110px);
  }
  70%{
    width: 160px;
    height: 160px;
    left: calc(50% - 80px);
    top: calc(50% - 80px);
  }
  100%{
    width: 180px;
    height: 180px;
    background: linear-gradient(135deg, rgba(232,232,227,1) 0%,rgba(193,162,135,1) 100%);
    left: calc(50% - 90px);
    top: calc(50% - 90px);
  }
}

.box3{
  position: absolute;
  overflow: hidden;
  width: 300px;
  z-index: 3;
  height: 300px;
  left: calc(50% - 150px);
  top: calc(50% - 150px);
  border-radius: 50px;
  transform: rotate(180deg);
}

.planet_shadow{
  position: absolute;
  top: calc(50% - 75px);
  left: calc(50% - 165px);
  background: rgba(0,0,0,0.3);
  width: 200px;
  height: 0px;
  transform: rotate(45deg);
  animation: planet_shadow 0.6s 0.1s linear;
  animation-fill-mode: forwards;
}

@keyframes planet_shadow{
  0%{
    top: calc(50% - 75px);
    left: calc(50% - 165px);
    width: 200px;
    height: 0px;
  }
  55%{
    top: calc(50% - 175px);
    left: calc(50% - 165px);
    width: 200px;
    height: 220px;
  }
  70%{
    top: calc(50% - 150px);
    left: calc(50% - 165px);
    width: 200px;
    height: 160px;
  }
  100%{
    top: calc(50% - 160px);
    left: calc(50% - 170px);
    width: 200px;
    height: 180px;
  }
  
}


.circle{
  position: absolute;
  width: 0px;
  height: 0px;
  left: 50%;
  top: 50%;
  border: 4px solid #fff;
  border-radius: 360px;
  animation: circle 0.4s 0.2s linear;
  animation-fill-mode: forwards;
}

@keyframes circle{
  0%{
    width: 0px;
    height: 0px;
    left: 50%;
    top: 50%;
  }
  90%{
    opacity: 1;
  }
  100%{
    width: 400px;
    height: 400px;
    opacity: 0;
    left: calc(50% - 200px);
    top: calc(50% - 200px);
  }
}

.planet ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.planet ul li:first-child{
  position: absolute;
  top: -220px;
  left: 145px;
  width: 30px;
  height: 240px;
  transform: rotate(45deg);
  background: rgba(0,0,0,0.1);
  animation: stripe1 0.3s 0.4s linear;
  animation-fill-mode: forwards;
}

@keyframes stripe1{
  0%{
    top: -220px;
    left: 145px;
  }
  100%{
    top: -120px;
    left: 45px;
  }
}

.planet ul li:nth-child(2){
  position: absolute;
  top: 100px;
  left: -115px;
  width: 40px;
  height: 240px;
  transform: rotate(45deg);
  background: rgba(0,0,0,0.1);
  animation: stripe2 0.3s 0.4s linear;
  animation-fill-mode: forwards;
}

@keyframes stripe2{
  0%{
    top: 100px;
    left: -115px;
  }
  100%{
    top: -60px;
    left: 45px;
  }
}

.planet ul li:nth-child(3){
  position: absolute;
  top: -190px;
  left: 225px;
  width: 8px;
  height: 240px;
  transform: rotate(45deg);
  background: rgba(0,0,0,0.2);
  animation: stripe3 0.3s 0.4s linear;
  animation-fill-mode: forwards;
}

@keyframes stripe3{
  0%{
    top: -190px;
    left: 225px;
  }
  100%{
    top: -50px;
    left: 85px;
  }
}

.planet ul li:nth-child(4){
  position: absolute;
  top: 150px;
  left: -45px;
  width: 40px;
  height: 240px;
  transform: rotate(45deg);
  background: rgba(187,154,121,0.5);
  animation: stripe4 0.3s 0.4s linear;
  animation-fill-mode: forwards;
}

@keyframes stripe4{
  0%{
    top: 150px;
    left: -45px;
  }
  100%{
    top: -10px;
    left: 115px;
  }
}

.ring{
  position: absolute;
  top: 23px;
  left: 30px;
  z-index: 3;
  width: 320px;
  height: 320px;
  transform: rotateX(70deg) rotateY(-30deg);
  border: 15px solid #877f77;
  box-shadow: inset 15px 15px 0 #948c8a, inset -15px -15px 0 #948c8a, inset 16px 20px 0 #162f3a, 16px 20px 0 #948c8a, -15px -5px 0 #948c8a, -6px 16px 0 #162f3a;
  border-radius: 360px;
  opacity: 0;
  animation: ring 0.1s 0.5s linear;
  animation-fill-mode: forwards;
}

@keyframes ring{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 0;
  }
  51%{
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}

.box4{
  position: absolute;
  top: 183px;
  left: 155px;
  overflow: hidden;
  width: 200px;
  height: 120px;
  z-index: 10;
}

.ring_front{
  position: absolute;
  top: -160px;
  left: -125px;
  z-index: 3;
  width: 320px;
  height: 320px;
  transform: rotateX(70deg) rotateY(-30deg);
  border: 15px solid #877f77;
  box-shadow: inset 15px 15px 0 #948c8a, inset -15px -15px 0 #948c8a, inset 16px 20px 0 #162f3a, 16px 20px 0 #948c8a, -15px -5px 0 #948c8a, -6px 20px 0 #162f3a;
  border-radius: 360px;
  opacity: 0;
  animation: ring 0.1s 0.5s linear;
  animation-fill-mode: forwards;
}
    
.stars{
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}

.stars ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.stars ul li{
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 360px;
}

.credits{
  font-family: Sans Serif, Helvetica, Arial;
  color: #fff;
  font-weight: 100;
  position: absolute;
  bottom: 2px;
  left: 2px;
}

.credits a{
  text-decoration: none;
  color: #3c8da6;
}

/*Downloaded from https://www.codeseek.co/motorlatitude/css3-saturn-icon-animated-sabEi */
$(document).ready(function(){
  var w = $(".stars").width();
  var h = $(".stars").height();
  for(var i=0;i<=50;i++){
    $(".stars ul").append("<li></li>");
  }
  $(".stars ul li").each(function(){
        $(this).css("top",(Math.random()*h)+"px").css("left",(Math.random()*w)+"px");
    });
});

Comments