Day/Night animated switch

day-night-animated-switch.markdown

Day/Night animated switch

A Pen by Med redha on CodePen.

License.

index.html

<div id="container">
  <div id="switch_wrap">
    <div id="switch">
      <div class="bubble">
        <div class="crat1"></div>
        <div class="crat2"></div>
        <div class="crat3"></div>
      </div>
      <div class="special_star"></div>
      <div class="tree"></div>
      <div class="tree t2"></div>
      <div class="cloud"></div>
    </div>
  </div>
</div>

script.js

$(document).ready(function() {
  $('#switch').on('click', function() {
    $(this).toggleClass('active');
  });
  
  var res = '',
      width = parseInt($('#switch').width()),
      height = parseInt($('#switch').height()) + 20;

  for (var i = 0;i < 15;i++) {
    res += '<div class="star" ' +
        'style="top: ' + (Math.random() * (height)) +
        'px;left: ' + (Math.random() * (width - 80) + 80) + 'px;"></div>';
  }
  $('#switch').html($('#switch').html() + res);
  
  var i = 0;
  setInterval(function() {
    $('.star').eq(i).fadeOut(100).fadeIn(400);
    i++;
    if (i > 15)
      i = 0;
  }, 2000);
});

scripts

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

style.css

* {
	 padding: 0;
	 margin: 0;
	 box-sizing: border-box;
}
 #container {
	 position: relative;
	 width: 100%;
	 height: 100vh;
	 background-color: #fafafa;
}
 #switch_wrap {
	 position: relative;
	 top: 50%;
	 left: 50%;
	 transform: translateX(-50%) translateY(-50%);
	 width: 210px;
	 height: 110px;
	 background-color: #dadada;
	 background: linear-gradient(to bottom right, #dadada, #c7c7c7);
	 border-radius: 60px;
}
 #switch {
	 position: relative;
	 top: 5px;
	 overflow: hidden;
	 left: 5px;
	 width: 200px;
	 height: 100px;
	 padding: 10px;
	 background-color: #171f47;
	 border-radius: 60px;
	 z-index: 1;
	 box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.05) inset;
	 transition: background-color 300ms ease-in-out;
	 cursor: pointer;
}
 #switch .star, #switch .special_star {
	 position: absolute;
	 width: 2px;
	 height: 2px;
	 border-radius: 50%;
	 background-color: #fafafa;
	 z-index: 6;
	 transition: background-color 100ms ease-in-out;
}
 #switch .special_star {
	 bottom: 0;
	 left: 0;
	 transform: rotate(160deg);
	 animation: filante 1.5s ease-in-out 5s;
	 animation-fill-mode: forwards;
	 z-index: 1;
}
 #switch .special_star:after {
	 content: '';
	 display: block;
	 width: 30px;
	 height: 2px;
	 background: linear-gradient(to right, rgba(255, 255, 255, 0.7), transparent);
}
 #switch .bubble {
	 position: relative;
	 left: 0;
	 width: 80px;
	 height: 80px;
	 background-color: #fbf3df;
	 border-radius: 50%;
	 box-shadow: 0px 0px 20px 10px rgba(252, 236, 197, 0.3);
	 z-index: 9;
	 overflow: hidden;
	 transition: left 300ms ease-in-out, background-color 300ms ease-in-out, box-shadow 300ms ease-in-out;
}
 #switch .bubble .crat1, #switch .bubble .crat2, #switch .bubble .crat3 {
	 position: absolute;
	 top: 45px;
	 left: 40px;
	 width: 30px;
	 height: 30px;
	 border-radius: 50%;
	 background-color: #e3dbc7;
	 box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2) inset;
	 transition: opacity 200ms ease-in-out;
}
 #switch .bubble .crat1.active, #switch .bubble .crat2.active, #switch .bubble .crat3.active {
	 opacity: 0;
}
 #switch .bubble .crat2 {
	 width: 20px;
	 height: 20px;
	 top: 20px;
	 left: 10px;
}
 #switch .bubble .crat3 {
	 width: 10px;
	 height: 10px;
	 top: 15px;
	 left: 45px;
	 box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2) inset;
}
 #switch .tree {
	 position: relative;
	 left: 90px;
	 bottom: 50px;
	 height: 0;
	 width: 0;
	 border-left: 30px solid transparent;
	 border-right: 30px solid #365c33;
	 border-top: 100px solid transparent;
	 z-index: 7;
	 transition: left 300ms ease-in-out, border-right-color 300ms ease-in-out;
}
 #switch .tree.t2 {
	 left: 72px;
	 bottom: 130px;
}
 #switch .tree:after {
	 content: '';
	 position: relative;
	 left: 30px;
	 height: 0;
	 width: 0;
	 border-right: 30px solid transparent;
	 border-left: 30px solid #294137;
	 border-top: 100px solid transparent;
	 transition: border-left-color 300ms ease-in-out;
}
 #switch .cloud {
	 position: relative;
	 bottom: 255px;
	 left: 5px;
	 width: 50px;
	 height: 20px;
	 background-color: #fff;
	 border-radius: 10px;
	 z-index: 8;
	 opacity: 0;
	 animation: travel 8s ease-in-out infinite;
	 transition: opacity 300ms ease-in-out;
}
 #switch .cloud:after {
	 content: '';
	 position: absolute;
	 top: -6px;
	 left: 5px;
	 width: 20px;
	 height: 20px;
	 background-color: #fff;
	 border-radius: 50%;
}
 #switch .cloud:before {
	 content: '';
	 position: absolute;
	 top: -10px;
	 right: 5px;
	 width: 30px;
	 height: 30px;
	 background-color: #fff;
	 border-radius: 50%;
}
 #switch.active {
	 background-color: #7bdefa;
}
 #switch.active .bubble {
	 left: 100px;
	 background-color: #f4dc23;
	 box-shadow: 0px 0px 20px 10px rgba(247, 219, 5, 0.2);
}
 #switch.active .star, #switch.active #switch .special_star, #switch #switch.active .special_star {
	 background-color: transparent;
}
 #switch.active .tree {
	 left: -30px;
	 border-right-color: #57a152;
}
 #switch.active .tree.t2 {
	 left: -10px;
	 border-right-color: #57a152;
}
 #switch.active .tree:after {
	 border-left-color: #77d270;
}
 #switch.active .cloud {
	 opacity: 0.7;
}
 #switch.active .crat1, #switch.active #switch .bubble .crat2, #switch .bubble #switch.active .crat2, #switch.active #switch .bubble .crat3, #switch .bubble #switch.active .crat3, #switch.active .crat2, #switch.active .crat3 {
	 opacity: 0;
}
 @keyframes travel {
	 0% {
		 left: 5px;
	}
	 50% {
		 left: 70px;
	}
	 100% {
		 left: 5px;
	}
}
 @keyframes filante {
	 from {
		 bottom: 0;
		 left: 0;
	}
	 to {
		 bottom: 120px;
		 left: 300px;
	}
}