使用纯CSS3实现的日夜场景切换开关

CSS3 Switch between day and night Refer to: http://www.albertohartzet.com

CSS3,开关

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2617
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* 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;
    transition: all 0.25s cubic-bezier(1, 0, 0.5, 1);
    transition-delay: 0.5s;
}
.toggle:checked ~ #back {
    background: #b0e3ff;
    /* Elements "Night" */
}
#moon,
#css-moon,
.star,
#sun,
.clouds {
    transition: all 0.5s cubic-bezier(1, 0.005, 0, 1.2);
}
#moon,
#css-moon {
    position: absolute;
    top: 25%;
    left: 10%;
}
@media all and (max-height: 400px) {
    #moon,
    #css-moon {
        top: -35%;
    }
}
#css-moon {
    display: block;
    transform: translate(5px, 5px);
    width: 186px;
    height: 186px;
    border-radius: 100%;
    background: #bdbdbd;
    border: 12px solid #aeaeae;
    box-shadow: 0px 0px 240px rgba(255, 255, 255, 0.3);
}
.toggle:checked ~ #back #moon,
.toggle:checked ~ #back #css-moon {
    transform: translateY(-400%);
    opacity: 0;
}
.star {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 100%;
}
#star-1 {
    transform: scale(0.5);
    top: 25%;
    left: 50%;
    transition-delay: 0.5s;
}
#star-2 {
    transform: scale(1.5);
    top: 38%;
    left: 40%;
    transition-delay: 0.8s;
}
#star-3 {
    transform: scale(0.7);
    top: 42%;
    left: 35%;
    transition-delay: 0.45s;
}
#star-4 {
    transform: scale(0.3);
    top: 45%;
    left: 30%;
    transition-delay: 0.7s;
}
#star-5 {
    transform: scale(0.8);
    top: 45%;
    left: 80%;
    transition-delay: 1s;
}
#star-6 {
    transform: scale(0.4);
    top: 50%;
    left: 60%;
    transition-delay: 0.5s;
}
#star-7 {
    transform: scale(0.8);
    top: 37%;
    left: 55%;
    transition-delay: 1.1s;
}
#star-8 {
    transform: scale(1);
    top: 52%;
    left: 72%;
    transition-delay: 1.4s;
}
#stars {
    display: block;
    width: 100%;
    height: 100%;
    background: url(http://dl.dropboxusercontent.com/u/12646264/assets/stars_03.svg) no-repeat center 20%;
    transition: all 0.25s ease-out;
    transition-delay: 0.5s;
}
.toggle:checked ~ #back #stars {
    transform: translateY(-100%);
    transition: all 0.25s ease-in;
}
.toggle:checked ~ #back .star {
    opacity: 0;
}
.toggle:checked ~ #back ul li:nth-child(1) {
    transform: translateY(-2000%);
    transition-delay: 0s;
}
.toggle:checked ~ #back ul li:nth-child(2) {
    transform: translateY(-2000%);
    transition-delay: 0s;
}
.toggle:checked ~ #back ul li:nth-child(3) {
    transform: translateY(-2000%);
    transition-delay: 0s;
}
.toggle:checked ~ #back ul li:nth-child(4) {
    transform: translateY(-2000%);
    transition-delay: 0s;
}
.toggle:checked ~ #back ul li:nth-child(5) {
    transform: translateY(-2000%);
    transition-delay: 0s;
}
.toggle:checked ~ #back ul li:nth-child(6) {
    transform: translateY(-2000%);
    transition-delay: 0s;
}
.toggle:checked ~ #back ul li:nth-child(7) {
    transform: translateY(-2000%);
    transition-delay: 0s;
}
.toggle:checked ~ #back ul li:nth-child(8) {
    transform: translateY(-2000%) scale(1.2);
    transition-delay: 0s;
    /* Elements "Day" */
}
#sun {
    position: absolute;
    top: 20%;
    right: 25%;
    z-index: 4;
    display: block;
    width: 200px;
    height: 200px;
    background: gold;
    border-radius: 100%;
    transform: translateY(1000%);
}
.toggle:checked ~ #back #sun {
    transform: translateY(0);
    transition-delay: 0.5s;
}
.cloud {
    position: absolute;
    z-index: 29;
    bottom: 60%;
    transform: translateX(-50%);
    transform-origin: top;
    opacity: 0;
    transition: all 0.25s cubic-bezier(1, 0.005, 0, 1.2);
}
#cloud-1 {
    transform: translateX(-600%) scale(1.5);
    right: 35%;
}
#cloud-2 {
    transform: translateX(-400%) scale(0.8);
    right: 55%;
}
@media all and (max-width: 800px) {
    #cloud-2 {
        display: none;
    }
}
#cloud-3 {
    transform: translateX(-300%) scale(2.5);
    right: 70%;
}
.toggle:checked ~ #back .cloud {
    opacity: 1;
    transition: all 1s cubic-bezier(1, -0.11, 0, 0.935);
    transition-delay: 0.5s;
}
.toggle:checked ~ #back #cloud-1 {
    transform: translateX(0) scale(1.5);
}
.toggle:checked ~ #back #cloud-2 {
    transform: translateX(0) scale(0.8);
}
.toggle:checked ~ #back #cloud-3 {
    transform: translateX(0) scale(2.5);
    /* Title */
}
#title {
    position: fixed;
    bottom: 16%;
    left: 0;
    width: 100%;
    z-index: 2;
    font-family: 'open sans', 'lato', 'helvetica', sans-serif;
    font-weight: 100;
    text-align: center;
    color: #888;
}
#night {
    text-shadow: 0px 0px 20px #fff;
    color: rgba(255, 255, 255, 0.8);
}
.toggle:checked ~ #title {
    color: #888;
}
.toggle:checked ~ #title #day {
    color: gold;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
}
.toggle:checked ~ #title #night {
    color: #888;
}
#by {
    font-size: 12px;
}
a {
    color: #fff;
    text-decoration: none;
    opacity: 0.7;
    transition: all 0.25s linear;
}
a:hover {
    opacity: 1;
}
.toggle:checked ~ h3 a {
    color: #000;
    /* No vendor prefixes, add them amualy */
}

HTML

<div id="switch-container">
    <input type="checkbox" class="toggle" id="switch">
    <h3 id="title">Switch between <span id="day">day</span> and <span id="night">night</span></h3>
    <label for="switch">
        <div class="switcher" id="on"></div>
    </label>
    <div id="back">
        <div id="css-moon"></div>
        <img id="moon" src="/uploads/150401/luna.svg">
        <div id="stars"></div>
        <ul>
            <li class="star" id="star-1"></li>
            <li class="star" id="star-2"></li>
            <li class="star" id="star-3"></li>
            <li class="star" id="star-4"></li>
            <li class="star" id="star-5"></li>
            <li class="star" id="star-6"></li>
            <li class="star" id="star-7"></li>
            <li class="star" id="star-8"></li>
        </ul>
        <div id="sun"></div>
        <img class="cloud" id="cloud-1" src="/uploads/150401/nube.svg">
        <img class="cloud" id="cloud-2" src="/uploads/150401/nube.svg">
        <img class="cloud" id="cloud-3" src="/uploads/150401/nube.svg">
    </div>
</div>

CSS3 Switch between day and night Refer to: http://www.albertohartzet.com

CSS3,开关

编辑器支持Emmet

快捷键

CSS3 Switch between day and night Refer to: http://www.albertohartzet.com

CSS3,开关

纯CSS实现披萨形状的切换开关按钮

使用CSS3背景裁剪（background-clip）特性实现的文本标题透视特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：