css3昼夜背景切换开关特效,使用纯CSS3实现的日夜场景切换开关

CSS

语言：

CSSSCSS

确定

/* Positioning the thing*/

#switch-container {

position: absolute;

bottom: 45%;

left: 0;

right: 0;

width: 100px;

height: 24px;

margin: auto;

/* Starts the switch */

}

input {

display: none;

}

label {

position: absolute;

z-index: 2;

padding: 1px;

height: 24px;

width: 50px;

border-radius: 20px;

background: #222;

border: 3px solid #666;

cursor: pointer;

transition: all 0.8s cubic-bezier(1, 0, 0.5, 0);

}

.switcher {

display: inline-block;

width: 20px;

height: 20px;

border-radius: 20px;

vertical-align: middle;

}

#on {

position: absolute;

z-index: 2;

background: #aea497;

border: 2px solid gold;

transition: all 500ms cubic-bezier(0.8, 0, 0.05, 1);

}

.toggle:checked ~ label {

background: #ddd;

border: 2px solid white;

}

.toggle:checked ~ label #on {

background: gold;

border: 2px solid #aea497;

transform: translateX(100%);

/* //

Then the switch ends, anything from here is just the cute background animation.

// */

/* The background */

}

#back {

background: #111;

width: 100%;

height: 100%;

position: fixed;

z-index: 1;

top: 0;

left: 0;