白昼夜晚温度切换动画-html代码-BFW代码库

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> - Sunset/Sunrise Animation with CSS Variables</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

    <style>
    body{
        background: linear-gradient(to bottom, #0846B0, #23B2EE);
    }
        #sunset:checked ~ * {
            --sunset: 1;
            --sunrise: 0;
            --color-building-dark: #00436F;
            --color-building: #0258C6;
            --color-building-light: #1771C5;
            --color-cloud: #9ED5F8;
        }

        #sunrise:checked ~ * {
            --sunrise: 1;
            --sunset: 0;
            --color-building-dark: #50A8E3;
            --color-building: #9BD9FE;
            --color-building-light: #E5F7FE;
            --color-cloud: white;
        }

:root {
            --color-window-dark: #3B98D8;
            --color-window-light: white;
        }

        #app {
            width: 800px;
            height: 370px;
            padding: 0 2rem;
            display: flex;
            flex-direction: row;
            z-index: 1;
            position: relative;
            font-family: Montserrat,sans-serif;
        }
        #app * {
            font-weight: 600;
            letter-spacing: 1px;
        }
        #app > .times {
            flex: 0 0 70%;
        }
        #app > .heavens {
            flex: 0 0 30%;
        }
        #app:before, #app:after {
            content: '';
            position: absolute;
            display: block;
            width: 100vw;
            height: 100vh;
            left: calc(50% - 50vw);
            top: calc(50% - 50vh);
            z-index: -10;
            transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
        }
        #app:before {
            background: linear-gradient(tobottom, #73DAF9, #E5F7FE);
            opacity: var(--sunrise);
        }
        #app:after {
            background: linear-gradient(tobottom, #0846B0, #23B2EE);
            opacity: var(--sunset);
        }

        .sky {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
        }
        .sky:before, .sky:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
            z-index: -1;
        }
        .sky:before {
            background: linear-gradient(tobottom, #2CA4F4, #C2E6FB);
            opacity: var(--sunrise);
        }
        .sky:after {
            background: linear-gradient(tobottom, #043385, #1797D7);
            opacity: var(--sunset);
        }

        .times {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding-top: 0.5rem;
            overflow: hidden;
        }

        .time {
            color: white;
        }
        .time:nth-child(1) {
            -webkit-animation-delay: 0s !important;
            animation-delay: 0s !important;
        }
        .time:nth-child(2) {
            -webkit-animation-delay: 0.05s !important;
            animation-delay: 0.05s !important;
        }
        .time:nth-child(3) {
            -webkit-animation-delay: 0.1s !important;
            animation-delay: 0.1s !important;
        }
        .time:nth-child(4) {
            -webkit-animation-delay: 0.15s !important;
            animation-delay: 0.15s !important;
        }
        .time:nth-child(5) {
            -webkit-animation-delay: 0.2s !important;
            animation-delay: 0.2s !important;
        }
        .time:first-child:after {
            font-size: 2.5rem;
        }
        .time:first-child ~ .time {
            opacity: 0.5;
        }
        .time:before {
            content: '';
            display: block;
            left: calc(50% - 0.8rem);
            margin-bottom: 0.5rem;
            width: 0;
            height: 0;
            border-width: 0.8rem;
            border-style: solid;
            border-color: transparent;
            border-bottom-color: white;
        }
        .time:after {
            font-size: 2rem;
        }

        .city {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .windows {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: repeating-linear-gradient(totop, #044DA8 0, #044DA8 6px, transparent 6px, transparent var(--window-space, 14px));
            overflow: hidden;
        }
        .windows, .windows:before, .windows:after {
            background-clip: content-box !important;
        }
        .windows:before, .windows:after {
            transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .windows:before {
            background: repeating-linear-gradient(totop, var(--window-color, var(--color-window-light)) 0, var(--window-color, var(--color-window-light)) 6px, transparent 6px, transparent var(--window-space, 14px));
            opacity: var(--sunrise);
        }
        .windows:after {
            background: repeating-linear-gradient(totop, gold 0, gold 6px, transparent 6px, transparent var(--window-space, 14px));
            opacity: var(--sunset);
            transition-delay: calc(var(--sunset,0) * 1.5s);
            transition-duration: 0.75s;
        }

        .ledge {
            width: 100%;
            height: 0;
            padding: 50% 0;
            overflow: hidden;
        }
        .ledge:before {
            transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            -webkit-transform-origin: right top;
            transform-origin: right top;
            background: linear-gradient(tobottom, rgba(0, 0, 0, 0.3), transparent);
        }
        .ledge:after {
            transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1.........完整代码请登录后点击上方下载按钮下载查看