CSS
/* DAY STYLES*/
body{
background: #48E8AA;
}
.the-container{
display: block;
position: absolute;
width: 500px;
height: 350px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.c-window{
display: block;
position: relative;
width: 235px;
height: 235px;
margin: 0 auto;
border-radius: 100%;
border: 8px solid #34A87C;
background: #42FFEB;
box-shadow: 0px 0px 5px rgba(0,0,0,0.25) inset;
overflow: hidden;
}
.c-window .the-sun{
display: block;
position: relative;
top: 18px;
height: 40px; width: 40px;
background: #FFE067;
border-radius: 100%;
margin: 0 auto;
box-shadow: 0px 0px 40px #FFC41D;
left: 30px;
}
.c-window .the-moon{
position: relative;
height: 24px; width: 24px;
background: #EEE;
border-radius: 100%;
box-shadow: 0px 0px 20px #FFF;
display:none;
}
.c-window .the-fox{
display: block;
position: absolute;
bottom: -20px;
height: 140px;
width: 135px;
margin: 0 50px;
background: #E86A47;
transition: bottom 1s;
}
.c-window .the-fox:before{
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 60px solid transparent;
border-bottom: 30px solid #E86A47;
top: -30px;
left: 0;
position: absolute;
content: "";
}
.c-window .the-fox:after{
width: 0;
height: 0;
border-right: 0px solid transparent;
border-left: 60px solid transparent;
border-bottom: 30px solid #E86A47;
top: -30px;
right: 0;
position: absolute;
content: "";
}
.c-window .the-fox:hover{
display: block;
position: absolute;
bottom: -30px;
}
.c-window .the-fox .eyes{
display: block;
position: absolute;
background: #FFFFFF;
height: 15px; width: 15px;
border-radius: 100%;
bottom: 90px;
}
.c-window .the-fox:hover .eyes{
display: block;
position: absolute;
height: 2px; width: 15px;
bottom:95px;
}
.c-window .the-fox .eyes.left{
left: 30px;
}
.c-window .the-fox .eyes.right{
right: 30px;
}
.c-window .the-fox .nose{
display: block;
position: relative;
background: #333;
height: 12px; width: 12px;
border-radius: 100%;
margin: 0 auto;
top: 50px;
}
.c-window .the-fox .white-part{
display: block;
position: relative;
width: 0px;
height: 0px;
top: 55px;
border-style: solid;
border-width: 60px 70px 0 65px;
border-color: #ffffff transparent transparent transparent;
}
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
input#toggle[type=checkbox]{
display:none;
}
label {
position: absolute;
height: 40px;
width: 120px;
display: block;
top: 0px; bottom: 0; right: 0; left:0;
z-index: 9999;
cursor: pointer;
margin: 0 auto;
}
.switch {
display: block;
position: relative;
border-bottom: 1px solid #FFF;
border-radius: 25px;
background: #34A87C;
box-shadow: inset 0 0 10px #888888;
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.25);
height: 40px;
width: 100px;
margin: 0px auto 30px auto;
}
.switch .button{
display: block;
position: absolute;
border-top: 1px solid #FFF;
border-bottom: 1px solid #AAA;
border-radius: 100%;
background: #48E8AA;
height: 32px;
width: 32px;
top: 4px;
left: 4px;
box-shadow: 0 0 2px rgba(0,0,0,0.25)
}
.switch .button .b-inside{
display: block;
position: absolute;
border: 1px solid #888;
border-radius: 100%;
background: #FFE067;
height: 15px;
width: 15px;
top: 7px;
left: 7px;
box-shadow: 0 0 2px rgba(0,0,0,0.25)
}
.day-night-cont {
display: block;
position: absolute;
width: 180px;
margin: 0 auto;
left: 0; right: 0; top: 0; bottom:0;
height: 40px;
top: 0px;
}
.day-night-cont .the-sun{
display: block;
position: absolute;
left: 10px;
top: 10px;
height: 20px;
width: 20px;
border-radius: 100%;
background: #FFE067;
box-shadow: 0px 0px 40px #FFC41D;
}
.day-night-cont .the-moon {
display: block;
position: absolute;
right: 8px;
top: 10px;
height: 20px;
width: 20px;
border-radius: 100%;
background: #DDD;
box-shadow: 0px 0px 20px #CCC;
}
.day-night-cont .the-moon .moon-inside{
display: block;
position: absolute;
left: 8px;
height: 20px;
width: 20px;
border-radius: 100%;
background: #48E8AA;
}
/* TOGGLE */
.switch .button {
transition: left 1s;
-webkit-transition: left 1s;
}
input[type=checkbox]:checked ~ .switch .button {
position: absolute;
left: 64px;
}
/* NIGHT ANIMATION */
input[type=checkbox]:checked ~ .c-window {
background: #444;
}
input[type=checkbox]:checked ~ .c-window .the-sun{ display: none; }
input[type=checkbox]:checked ~ .c-window .the-moon{
display: block;
position: absolute;
margin: 0 auto;
top: 40px;
left: 60px;
}
input[type=checkbox]:checked ~ .c-window .the-fox{
background: #C74628;
}
input[type=checkbox]:checked ~ .c-window .the-fox:before{
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 60px solid transparent;
border-bottom: 30px solid #C74628;
top: -30px;
left: 0;
position: absolute;
content: "";
}
input[type=checkbox]:checked ~ .c-window .the-fox:after{
width: 0;
height: 0;
border-right: 0px solid transparent;
border-left: 60px solid transparent;
border-bottom: 30px solid #C74628;
top: -30px;
right: 0;
position: absolute;
content: "";
}
input[type=checkbox]:checked ~ .c-window .the-fox .eyes{
height: 2px;
bottom: 90px;
}
input[type=checkbox]:checked ~ .c-window .the-fox:hover .eyes{
height: 15px;
bottom: 85px;
}
HTML
<div class="the-container">
<input type="checkbox" id="toggle" />
<label for="toggle"></label>
<div class="day-night-cont">
<span class="the-sun"></span>
<div class="the-moon"><span class="moon-inside"></span></div>
</div>
<div class="switch">
<div class="button">
<div class="b-inside"></div>
</div>
</div>
<div class="c-window">
<span class="the-sun"></span>
<span class="the-moon"></span>
<div class="the-fox">
<div class="fox-face">
<section class="eyes left"></section>
<section class="eyes right"></section>
<span class="nose"></span>
<div class="white-part"><span class="mouth"></span></div>
</div>
</div>
</div>
</div>
Comment With The Topic