css实现日出月落昼夜交替动画效果代码-html代码-BFW代码库

css实现日出月落昼夜交替动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现日出月落昼夜交替动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


  
  
<style>
@-webkit-keyframes sunrise {
        from {
                transform: rotate(-45deg);
        }

        to {
                transform: rotate(315deg);
        }
}

@keyframes sunrise {
        from {
                transform: rotate(-45deg);
        }

        to {
                transform: rotate(315deg);
        }
}

@-webkit-keyframes moonrise {
        from {
                transform: rotate(0deg);
        }

        to {
                transform: rotate(180deg);
        }
}

@keyframes moonrise {
        from {
                transform: rotate(0deg);
        }

        to {
                transform: rotate(180deg);
        }
}

@-webkit-keyframes dawn {
        0% {
                opacity: 0;
        }
        10% {
                opacity: 1;
        }
        60% {
                opacity: 0;
        }
}

@keyframes dawn {
        0% {
                opacity: 0;
        }
        10% {
                opacity: 1;
        }
        60% {
                opacity: 0;
        }
}

@-webkit-keyframes noon {
        0% {
                opacity: 0;
        }
        50% {
                opacity: 1;
        }
        75% {
                opacity: 0;
        }
}

@keyframes noon {
        0% {
                opacity: 0;
        }
        50% {
                opacity: 1;
        }
        75% {
                opacity: 0;
        }
}

@-webkit-keyframes dusk {
        0% {
                opacity: 0;
        }
        50% {
                opacity: 0;
        }
        70% {
                opacity: 1;
        }
        90% {
                opacity: 0;
        }
}

@keyframes dusk {
        0% {
                opacity: 0;
        }
        50% {
                opacity: 0;
        }
        70% {
                opacity: 1;
        }
        90% {
                opacity: 0;
        }
}

@-webkit-keyframes midnight {
        0% {
                opacity: 1;
        }
        25% {
                opacity: 0;
        }
        50% {
                opacity: 0;
        }
        80% {
                opacity: 1;
        }
}

@keyframes midnight {
        0% {
                opacity: 1;
        }
        25% {
                opacity: 0;
        }
        50% {
                opacity: 0;
        }
        80% {
                opacity: 1;
        }
}

body {
        --animation-speed: 24s;
        background-color: rgb(37, 29, 24);
}

body.pause {
        --animation-speed: 0;
}

.sky {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        max-height: 600px;
        overflow: hidden;
}

.sky__phase {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        transition: opacity 0.2s;
}

.sky__dawn {
        background: linear-gradient(
                0deg,
                rgba(254, 215, 102, 1) 0%,
                rgba(205, 237, 246, 1) 100%
        );
        -webkit-animation: linear dawn infinite var(--animation-speed);
                a.........完整代码请登录后点击上方下载按钮下载查看