小丫么小牛马
小丫么小牛马

纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）


文章目录

  • 前言
  • 一、HTML(index.html)
    • 1. 加入元素
  • 二、CSS(style.css)
    • 2. 重置浏览器样式
    • 3.设置字体样式
    • 4.将我们的元素居中
    • 5.设置背景颜色
    • 6.设置动画显示的位置
    • 7.设置夜晚时的背景色
    • 8.将动画显示的区域设置为圆型
    • 9.绘制白天时天空的样子
    • 10.绘制夜晚时天空的样子
    • 11.创建昼夜交替动画
    • 12.绘制太阳
    • 13.绘制海洋
      • 13.1 海洋底层颜色
      • 13.2 绘制夜晚时的海洋
      • 13.3丰富海洋层次感并设置浮动动画
    • 14. 绘制小船
      • 14.1 绘制船身
      • 14.2 绘制船帆
      • 14.3 设置小船动画
    • 15. 绘制月亮
    • 16. 绘制飞鸟
      • 16.1 设置三只鸟儿的位置及样式
      • 16.2 设置鸟儿飞行的动画
    • 17. 绘制山峰
    • 18. 绘制云朵
      • 18.1 设置云朵图层的位置，定位云朵位置
      • 18.2 绘制云朵
        • 18.2.1
        • 18.2.2
        • 18.2.3
      • 18.3 添加云朵的浮动动画
    • 19. 绘制星星
    • 20. 绘制流星及动画
    • 21.设置字体的位置及样式
    • 完整CSS代码
  • 三、JS（index.js）
    • 22. 设置元素间属性转换
  • 总结

前言

今天分享一个唯美的日月交替的小动画，祝大家早安晚安，每日安好鸭！
仅需22步，带领大家，使用css+js绘制超好看的动画！大家可以跟着步骤一步一步编写，也可以直接复制完整代码至编译器，看效果！

ps:现在先贴代码啦，明天醒了更新具体的步骤，带领大家一步一步制作,感谢支持！

2022.5.13
今天更新具体步骤啦！
仅需22步，带领大家，使用css+js绘制超好看的动画！大家可以跟着步骤一步一步编写，也可以直接复制完整代码至编译器，看效果！

一、HTML(index.html)

1. 加入元素

分别加入我们需要的元素，天空，云彩，飞鸟，山川，太阳等，具体看代码中的注释


<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>早安、晚安动画title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" href="./style.css">

head>
<body>
<div class="container-wrapper">
    <h1>Good morning, and in case I don't see ya, good afternoon, good evening, and good night!h1>
    
    <p id="subtitle">点点小太阳鸭p>
    <div class="container">
        <div class="circle-container">
            
            <div class="sky">
                <div class="sky-night">
                    <div class="stars">
                        <div class="shooting-star">div>
                        <div class="star-group-1">div>
                        <div class="star-group-2">div>
                        <div class="star-group-3">div>
                        <div class="star-group-4">div>
                    div>
                div>

                
                <div class="cloud cloud-1">div>
                <div class="cloud cloud-2">div>
                <div class="cloud cloud-3">div>
                <div class="cloud cloud-4">div>
                <div class="cloud cloud-5">div>
                <div class="cloud cloud-6">div>
                <div class="bird bird-1">div>
                <div class="bird bird-2">div>
                <div class="bird bird-3">div>
            div>

            
            <div class="mountains">
                <div class="mountain-back">
                    <div class="mountain-back-1">div>
                    <div class="mountain-back-2">div>
                div>
                <div class="mountain-middle">
                    <div class="mountain-middle-1">div>
                    <div class="mountain-middle-2">div>
                div>
                <div class="mountain-top">
                    <div class="mountain-top-1">div>
                div>
            div>

            
            <div class="sun-container">
                <div class="sun">div>
            div>

            
            <div class="ocean">
                <div class="boat">div>
                <div class="ocean-night">
                    <div class="moon">div>

                    
                    <div class="mountains mountains-bottom">
                        <div class="mountain-back">
                            <div class="mountain-back-1">div>
                            <div class="mountain-back-2">div>
                        div>
                        <div class="mountain-middle">
                            <div class="mountain-middle-1">div>
                            <div class="mountain-middle-2">div>
                        div>
                        <div class="mountain-top">
                            <div class="mountain-top-1">div>
                        div>
                    div>
                div>
            div>
        div>
    div>
div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'>script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js">script><script src="./index.js">script>
body>
html>

运行效果：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第1张图片

二、CSS(style.css)

2. 重置浏览器样式

导入reset.min.css（已完成），重置浏览器标签的样式表,重新定义标签样式,覆盖浏览器的CSS默认属性,把浏览器提供的默认样式覆盖掉

@import url("https://fonts.googleapis.com/css?family=Sanchez");

* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*:before,
*:after {
    content: "";
    position: absolute;
}

运行效果：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第2张图片

3.设置字体样式

html {
    font-family: "Sanchez", serif;
}

运行效果：纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第3张图片

4.将我们的元素居中

.container-wrapper {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

运行效果：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第4张图片

5.设置背景颜色

html {
    -webkit-transition: background-color 3s ease;
    -o-transition: background-color 3s ease;
    transition: background-color 3s ease;
    -webkit-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
    background-color: #fff7f4;
}

运行效果：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第5张图片

6.设置动画显示的位置

子绝父相，这是父元素，设置为相对定位

.container {
    width: 450px;
    height: 450px;
    position: relative;
}

7.设置夜晚时的背景色

我们将会在js中使用它

.container-night {
    background-color: #e4ecff;
}

8.将动画显示的区域设置为圆型

根据最终效果，我们将动画显示的区域设置为原型

.circle-container {
    width: 450px;
    height: 450px;
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    position: absolute;
    overflow: hidden;
    z-index: 100;
}

9.绘制白天时天空的样子

.sky {
    position: absolute;
    width: 100%;
    height: 55%;
    top: 0;
    background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#feb8b0),
            to(#fef9db)
    );
    background: -webkit-linear-gradient(#feb8b0, #fef9db);
    background: -o-linear-gradient(#feb8b0, #fef9db);
    background: linear-gradient(#feb8b0, #fef9db);
    z-index: 1;
    overflow: hidden;
}

运行效果：纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第6张图片

10.绘制夜晚时天空的样子

绘制夜晚时天空的样子，我们使用opacity属性，将其设置为不可见，在js中使用toggleClass方法将该属性切换为1，使其可见，后头很多动画都是这么实现的。运行效果的图中将该属性设置为了1，方便大家先看到效果

.sky-night {
    position: absolute;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#4c3f6d),
            color-stop(#6c62bb),
            to(#93b1ed)
    );
    background: -webkit-linear-gradient(#4c3f6d, #6c62bb, #93b1ed);
    background: -o-linear-gradient(#4c3f6d, #6c62bb, #93b1ed);
    background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed);
    opacity: 0;
    -webkit-transition: opacity 3s;
    -o-transition: opacity 3s;
    transition: opacity 3s;
    -webkit-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
}
/*用于切换opacity属性*/
.sky-night-fade {
    opacity: 1;
}

运行效果：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第7张图片

11.创建昼夜交替动画

@-webkit-keyframes sky-night {
    0% {
        background: -webkit-gradient(
                linear,
                left top,
                left bottom,
                from(#feb8b0),
                to(#fef9db)
        );
        background: -webkit-linear-gradient(#feb8b0, #fef9db);
        background: linear-gradient(#feb8b0, #fef9db);
    }
    100% {
        background: -webkit-gradient(
                linear,
                left top,
                left bottom,
                from(#4c3f6d),
                to(#96b5ee)
        );
        background: -webkit-linear-gradient(#4c3f6d, #96b5ee);
        background: linear-gradient(#4c3f6d, #96b5ee);
    }
}

@keyframes sky-night {
    0% {
        background: -webkit-gradient(
                linear,
                left top,
                left bottom,
                from(#feb8b0),
                to(#fef9db)
        );
        background: -webkit-linear-gradient(#feb8b0, #fef9db);
        background: -o-linear-gradient(#feb8b0, #fef9db);
        background: linear-gradient(#feb8b0, #fef9db);
    }
    100% {
        background: -webkit-gradient(
                linear,
                left top,
                left bottom,
                from(#4c3f6d),
                to(#96b5ee)
        );
        background: -webkit-linear-gradient(#4c3f6d, #96b5ee);
        background: -o-linear-gradient(#4c3f6d, #96b5ee);
        background: linear-gradient(#4c3f6d, #96b5ee);
    }
}

12.绘制太阳

设置太阳的位置，并绘制太阳

.sun-container {
    z-index: 10;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    width: 290px;
    height: 290px;
    /*    background-color: rgba(255, 0, 255, 0.2);*/
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transition: all 5s ease-in-out;
    -o-transition: all 5s ease-in-out;
    transition: all 5s ease-in-out;
}

.sun {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#fefefe),
            to(#fffbe8)
    );
    background: -webkit-linear-gradient(#fefefe, #fffbe8);
    background: -o-linear-gradient(#fefefe, #fffbe8);
    background: linear-gradient(#fefefe, #fffbe8);
    cursor: pointer;
    z-index: 10;
}

纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第8张图片

13.绘制海洋

13.1 海洋底层颜色

绘制海洋部分，及其动画效果，同样使用toggleClass设置动画停止后，海洋的样式

.ocean {
    position: absolute;
    width: 100%;
    height: 45%;
    bottom: 0;
    background: #ceefe8;
    z-index: 200;
    -webkit-animation: ocean-top 3s infinite;
    animation: ocean-top 3s infinite;
    opacity: 1;
    -webkit-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;
    -webkit-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
}
.animation-stop {
    -webkit-animation: ocean-top 3s forwards;
    animation: ocean-top 3s forwards;
    height: 42%;
}

运行效果：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第9张图片

13.2 绘制夜晚时的海洋

与夜晚时的天空同理

.ocean-night {
    position: relative;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#8da6e6),
            to(#788cc9)
    );
    background: -webkit-linear-gradient(#8da6e6, #788cc9);
    background: -o-linear-gradient(#8da6e6, #788cc9);
    background: linear-gradient(#8da6e6, #788cc9);
    opacity: 0;
    -webkit-transition: opacity 3s;
    -o-transition: opacity 3s;
    transition: opacity 3s;
    -webkit-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
    z-index: 500;
}

.ocean-night-fade {
    opacity: 1;
}

运行效果（opacity设置为1后显示效果）：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第10张图片

13.3丰富海洋层次感并设置浮动动画

将海洋分为三层，显得更有层次感，并绘制海洋的动画效果，使海洋浮动起来

.ocean:before,
.ocean:after {
    width: 100%;
    bottom: 0;
    position: absolute;
    z-index: 200;
}

.ocean:before {
    height: 75%;
    background: #baeced;
    -webkit-animation: ocean-middle 3s infinite;
    animation: ocean-middle 3s infinite;
}

.ocean:after {
    height: 50%;
    background: #ace6f1;
    -webkit-animation: ocean-bottom 2s infinite;
    animation: ocean-bottom 2s infinite;
}

@-webkit-keyframes ocean-top {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    75% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes ocean-top {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    75% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@-webkit-keyframes ocean-middle {
    0% {
        height: 75%;
    }
    50% {
        height: 77%;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    100% {
        height: 75%;
    }
}

@keyframes ocean-middle {
    0% {
        height: 75%;
    }
    50% {
        height: 77%;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    100% {
        height: 75%;
    }
}

@-webkit-keyframes ocean-bottom {
    0% {
        height: 50%;
    }
    50% {
        height: 52%;
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    100% {
        height: 50%;
    }
}

@keyframes ocean-bottom {
    0% {
        height: 50%;
    }
    50% {
        height: 52%;
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    100% {
        height: 50%;
    }
}

运行效果：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第11张图片

14. 绘制小船

14.1 绘制船身

绘制船身，及切换夜晚时小船移出显示范围，同样是使用toggleClass

.boat {
    position: absolute;
    width: 50px;
    height: 0px;
    border-top: 7px solid #bb7074;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    left: 280px;
    /*    right: -50px;*/
    top: -5px;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation: boat 5s infinite;
    animation: boat 5s infinite;
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
    -webkit-transition: all 4s ease-in-out;
    -o-transition: all 4s ease-in-out;
    transition: all 4s ease-in-out;
}

.boat-sail {
    margin-left: -350px;
}

运行效果：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第12张图片

14.2 绘制船帆

.boat,
.boat:before,
.boat:after {
    position: absolute;
    z-index: 200;
}
.boat:before,
.boat:after {
    width: 0;
    height: 0;
    border: 0 solid transparent;
}

.boat:before {
    bottom: 8px;
    right: -6px;
    border-right-width: 15px;
    border-left-width: 0px;
    border-bottom: 30px solid #bb7074;
}

.boat:after {
    bottom: 8px;
    right: 11px;
    border-right-width: 0px;
    border-left-width: 20px;
    border-bottom: 48px solid #bb7074;
}

运行效果：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第13张图片

14.3 设置小船动画

设置小船在海洋上浮动的动画

@-webkit-keyframes boat {
    0% {
        -webkit-transform: rotate(1deg)translate(2px, 0px);
        transform: rotate(1deg)translate(2px, 0px);
    }
    25% {
        -webkit-transform: rotate(-1deg) translate(-2px, -2px);
        transform: rotate(-1deg) translate(-2px, -2px);
    }
    50% {
        -webkit-transform: rotate(1deg) translate(1px, 0px);
        transform: rotate(1deg) translate(1px, 0px);
    }
    75% {
        -webkit-transform: rotate(-1deg) translate(-1px, -2px);
        transform: rotate(-1deg) translate(-1px, -2px);
    }
    100% {
        -webkit-transform: rotate(1deg) translate(2px, 0px);
        transform: rotate(1deg) translate(2px, 0px);
    }
}

@keyframes boat {
    0% {
        -webkit-transform: rotate(1deg)translate(2px, 0px);
        transform: rotate(1deg)translate(2px, 0px);
    }
    25% {
        -webkit-transform: rotate(-1deg) translate(-2px, -2px);
        transform: rotate(-1deg) translate(-2px, -2px);
    }
    50% {
        -webkit-transform: rotate(1deg) translate(1px, 0px);
        transform: rotate(1deg) translate(1px, 0px);
    }
    75% {
        -webkit-transform: rotate(-1deg) translate(-1px, -2px);
        transform: rotate(-1deg) translate(-1px, -2px);
    }
    100% {
        -webkit-transform: rotate(1deg) translate(2px, 0px);
        transform: rotate(1deg) translate(2px, 0px);
    }
}

15. 绘制月亮

与太阳差不多

.moon {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#fefefe),
            to(#fffbe8)
    );
    background: -webkit-linear-gradient(#fefefe, #fffbe8);
    background: -o-linear-gradient(#fefefe, #fffbe8);
    background: linear-gradient(#fefefe, #fffbe8);
    opacity: 0;
    left: 80px;
    margin-top: 90px;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
}

.moon-fade {
    opacity: 0.3;
    -webkit-transition-delay: 4s;
    -o-transition-delay: 4s;
    transition-delay: 4s;
}

16. 绘制飞鸟

16.1 设置三只鸟儿的位置及样式

.bird:before,
.bird:after {
    border: 2px solid #bb7074;
    border-bottom: 0;
    width: 18px;
    height: 8px;
    z-index: 200;
}

.bird {
    position: absolute;
    -webkit-animation: bird 1s infinite;
    animation: bird 1s infinite;
    z-index: 200;
    -webkit-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}

.birds-fly {
    margin-left: 150px;
    margin-top: -100px;
}

.bird:after {
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-right: 0;
    -webkit-animation: wing-right 1s infinite;
    animation: wing-right 1s infinite;
    -webkit-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    transform-origin: bottom left;
}

.bird:before {
    left: -19px;
    border-top-right-radius: 18px;
    border-top-left-radius: 18px;
    border-left: 0;
    -webkit-animation: wing-left 1s infinite;
    animation: wing-left 1s infinite;
    -webkit-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    transform-origin: bottom right;
}

.bird-1 {
    left: 240px;
    top: 140px;
    -webkit-transform: scale(0.9)rotate(10deg);
    -ms-transform: scale(0.9)rotate(10deg);
    transform: scale(0.9)rotate(10deg);
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.bird-2 {
    left: 280px;
    top: 120px;
    -webkit-transform: scale(0.8)rotate(-5deg);
    -ms-transform: scale(0.8)rotate(-5deg);
    transform: scale(0.8)rotate(-5deg);
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.bird-3 {
    left: 250px;
    top: 100px;
    -webkit-transform: scale(1)rotate(8deg);
    -ms-transform: scale(1)rotate(8deg);
    transform: scale(1)rotate(8deg);
}

运行效果：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第14张图片

16.2 设置鸟儿飞行的动画

从小变大，展现从远处飞来的动画，以及翅膀的挥动（wing-left/wing-right），在步骤16.1中调用该动画

@-webkit-keyframes bird {
   0% {
       -webkit-transform: translate(0px, 0px);
       transform: translate(0px, 0px);
   }
   50% {
       -webkit-transform: translate(2px, -3px);
       transform: translate(2px, -3px);
   }
   100% {
       -webkit-transform: translate(0px, 0px);
       transform: translate(0px, 0px);
   }
}

@keyframes bird {
   0% {
       -webkit-transform: translate(0px, 0px);
       transform: translate(0px, 0px);
   }
   50% {
       -webkit-transform: translate(2px, -3px);
       transform: translate(2px, -3px);
   }
   100% {
       -webkit-transform: translate(0px, 0px);
       transform: translate(0px, 0px);
   }
}

@-webkit-keyframes wing-right {
   0% {
       -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
   }
   50% {
       -webkit-transform: rotate(10deg);
       transform: rotate(10deg);
   }
   100% {
       -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
   }
}

@keyframes wing-right {
   0% {
       -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
   }
   50% {
       -webkit-transform: rotate(10deg);
       transform: rotate(10deg);
   }
   100% {
       -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
   }
}

@-webkit-keyframes wing-left {
   0% {
       -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
   }
   50% {
       -webkit-transform: rotate(-10deg);
       transform: rotate(-10deg);
   }
   100% {
       -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
   }
}

@keyframes wing-left {
   0% {
       -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
   }
   50% {
       -webkit-transform: rotate(-10deg);
       transform: rotate(-10deg);
   }
   100% {
       -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
   }
}

运行效果：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第15张图片

17. 绘制山峰

首先设置山峰图层的位置，定位山峰的位置，然后绘制三个图层的山峰，黄色，粉色，红色依次对应top，middle，back三层山峰

.mountains {
    position: absolute;
    width: 100%;
    /*        background-color: #ccc;*/
    height: 20%;
    bottom: 35%;
    /*        overflow: hidden;*/
}

.mountains-bottom {
    opacity: 0.5;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
    top: 0;
    position: fixed;
    overflow: hidden;
    height: 31.5%;
}

.mountains div,
.mountains div:after,
.mountains div:before {
    border-radius: 50%;
    position: absolute;
    z-index: 200;
}

.mountains * {
    -webkit-transition: background 3s ease;
    -o-transition: background 3s ease;
    transition: background 3s ease;
    -webkit-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
}

.mountain-top,
.mountain-top * {
    background: #fffcdd;
}

.mountain-top {
    width: 200px;
    height: 90px;
    top: 18px;
    right: 0;
    margin-right: -50px;
}

.mountain-top-1 {
    position: absolute;
    width: 250px;
    height: 80px;
    top: 15px;
    right: 0;
    margin-right: 150px;
}
/*夜晚的山*/
.mountain-top-night {
    background: #614da2;
}

.mountain-middle,
.mountain-middle * {
    background: #fee1cb;
}

.mountain-middle {
    width: 180px;
    height: 120px;
    top: 12px;
    margin-left: 180px;
}

.mountain-middle-1 {
    width: 200px;
    height: 100px;
    top: 3px;
    margin-left: -110px;
}

.mountain-middle-2 {
    width: 220px;
    height: 150px;
    margin-left: -250px;
}

.mountain-middle-night {
    background: #6154a4;
}

.mountain-back,
.mountain-back * {
    background: #fec6b9;
}

.mountain-back {
    width: 180px;
    height: 120px;
    top: 0px;
}

.mountain-back-1 {
    width: 200px;
    height: 100px;
    top: 3px;
    margin-left: 80px;
}

.mountain-back-2 {
    width: 150px;
    height: 80px;
    margin-left: 250px;
}

.mountain-back-night {
    background: #7980c8;
}

运行效果：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第16张图片

18. 绘制云朵

18.1 设置云朵图层的位置，定位云朵位置

.cloud,
.cloud:after,
.cloud:before {
    background: #fff;
    position: absolute;
    z-index: 500;
}


.cloud-1 {
    left: 310px;
    top: 50px;
}

.cloud-2 {
    left: 280px;
    top: 150px;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.cloud-3 {
    left: 410px;
    top: 190px;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.cloud-4 {
    left: 160px;
    top: 120px;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.cloud-5 {
    left: 60px;
    top: 170px;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.cloud-6 {
    left: 0px;
    top: 100px;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

18.2 绘制云朵

18.2.1

.cloud {
    width: 65px;
    height: 12px;
    border-radius: 20px;
    -webkit-animation: cloud 4s infinite;
    animation: cloud 4s infinite;
}

运行效果：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第17张图片

18.2.2

.cloud:after {
    border-radius: 50%;
    height: 30px;
    left: 27px;
    top: -18px;
    width: 30px;
}

运行效果：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第18张图片

18.2.3

.cloud:before {
    border-radius: 50%;
    height: 20px;
    left: 12px;
    top: -11px;
    width: 20px;
}

运行效果：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第19张图片

18.3 添加云朵的浮动动画

@-webkit-keyframes cloud {
    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    25% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }
    50% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    75% {
        -webkit-transform: translate(-1px, -1px);
        transform: translate(-1px, -1px);
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}

@keyframes cloud {
    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    25% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }
    50% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    75% {
        -webkit-transform: translate(-1px, -1px);
        transform: translate(-1px, -1px);
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}

运行效果：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第20张图片

19. 绘制星星

加入小星星，并添加闪烁动画，步骤还是和之前一样

.stars *,
.stars *:before,
.stars *:after {
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
}

.stars {
    opacity: 0;
    -webkit-transition: opacity 2s ease;
    -o-transition: opacity 2s ease;
    transition: opacity 2s ease;
}

.stars-fade {
    opacity: 1;
    -webkit-transition-delay: 4s;
    -o-transition-delay: 4s;
    transition-delay: 4s;
}

.star-group-1 {
    width: 5px;
    height: 5px;
    left: 225px;
    top: 120px;
    animation: twinkle 2s infinite linear;
}

.star-group-1:before {
    width: 4px;
    height: 4px;
    left: 50px;
    top: 18px;
    opacity: 0.8;
}

.star-group-1:after {
    width: 3px;
    height: 3px;
    left: -35px;
    top: 35px;
    opacity: 1;
}

.star-group-2 {
    width: 5px;
    height: 5px;
    left: 25px;
    top: 175px;
    animation: twinkle 1s infinite linear;
}

.star-group-2:before {
    width: 4px;
    height: 4px;
    left: 40px;
    top: 14px;
    opacity: 0.8;
}

.star-group-2:after {
    width: 3px;
    height: 3px;
    left: 30px;
    top: -40px;
    opacity: 1;
}

.star-group-3 {
    width: 5px;
    height: 5px;
    left: 125px;
    top: 50px;
    animation: twinkle 0.8s infinite linear;
}

.star-group-3:before {
    width: 4px;
    height: 4px;
    left: 50px;
    top: 20px;
    opacity: 0.8;
}

.star-group-3:after {
    width: 3px;
    height: 3px;
    left: 90px;
    top: -20px;
    opacity: 1;
}

.star-group-4 {
    width: 5px;
    height: 5px;
    left: 300px;
    top: 100px;
    animation: twinkle 1.2s infinite linear;
}

.star-group-4:before {
    width: 3px;
    height: 3px;
    left: 80px;
    top: 60px;
    opacity: 0.8;
}

.star-group-4:after {
    width: 3px;
    height: 3px;
    left: 50px;
    top: -20px;
    opacity: 1;
}

运行效果（将夜晚的opacity设置为1时）：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第21张图片

20. 绘制流星及动画

@-webkit-keyframes twinkle {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.8;
    }
    75% {
        opacity: 0.5;
    }
    100% {
        opacity: 0.8;
    }
}

@keyframes twinkle {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.8;
    }
    75% {
        opacity: 0.5;
    }
    100% {
        opacity: 0.8;
    }
}

.shooting-star {
    position: absolute;
    background: -webkit-gradient(
            linear,
            left top,
            right top,
            from(rgba(255, 255, 255, 1)),
            to(rgba(255, 255, 255, 0))
    );
    background: -webkit-linear-gradient(
            left,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0) 100%
    );
    background: -o-linear-gradient(
            left,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0) 100%
    );
    background: linear-gradient(
            to right,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0) 100%
    );
    width: 35px;
    height: 3px;
    left: 310px;
    top: 10px;
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    -webkit-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    transform: rotate(-40deg);
}

.shooting {
    -webkit-animation: shooting-star 2s 2 ease-in-out;
    animation: shooting-star 2s 2 ease-in-out;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

@-webkit-keyframes shooting-star {
    100% {
        -webkit-transform: rotate(-40deg)translateX(-450px);
        transform: rotate(-40deg)translateX(-450px);
    }
}

@keyframes shooting-star {
    100% {
        -webkit-transform: rotate(-40deg)translateX(-450px);
        transform: rotate(-40deg)translateX(-450px);
    }
}

21.设置字体的位置及样式

p a:link,
p a:active,
p a:visited {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted;
    border-bottom-color: inherit;
    opacity: 0.6;
}

h1,
p {
    color: #bb7074;
    -webkit-transition: color 3s;
    -o-transition: color 3s;
    transition: color 3s;
    -webkit-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
    text-align: center;
}

h1 {
    margin: 60px 0 10px 0;
    font-size: 30px;
    position: relative;
}


p {
    font-size: 16px;
    line-height: 16px;
    margin: 40px;
    position: relative;
    opacity:0.6;
}


p#subtitle {
    margin-top: 10px;
}

.text-color {
    color: #7980c8;

运行效果：
纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）_第22张图片

完整CSS代码

/*2.导入reset.min.css，重置浏览器标签的样式表,重新定义标签样式,覆盖浏览器的CSS默认属性,把浏览器提供的默认样式覆盖掉*/
@import url("https://fonts.googleapis.com/css?family=Sanchez");

* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*:before,
*:after {
    content: "";
    position: absolute;
}
/*3.设置字体样式*/
html {
    font-family: "Sanchez", serif;
}
/*4.将我们的元素居中*/
.container-wrapper {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

/*5.设置背景颜色*/
html {
    -webkit-transition: background-color 3s ease;
    -o-transition: background-color 3s ease;
    transition: background-color 3s ease;
    -webkit-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
    background-color: #fff7f4;
}
/*6.设置动画显示的位置，子绝父相，这是父元素，设置为相对定位*/
.container {
    width: 450px;
    height: 450px;
    position: relative;
}
/*7.设置夜晚时的背景色，我们将会在js中使用它*/
.container-night {
    background-color: #e4ecff;
}
/*8.根据最终效果，我们将动画显示的区域设置为原型*/
.circle-container {
    width: 450px;
    height: 450px;
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    position: absolute;
    overflow: hidden;
    z-index: 100;
}
/*9.绘制白天时天空的样子*/
.sky {
    position: absolute;
    width: 100%;
    height: 55%;
    top: 0;
    background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#feb8b0),
            to(#fef9db)
    );
    background: -webkit-linear-gradient(#feb8b0, #fef9db);
    background: -o-linear-gradient(#feb8b0, #fef9db);
    background: linear-gradient(#feb8b0, #fef9db);
    z-index: 1;
    overflow: hidden;
}
/*10.绘制夜晚时天空的样子，我们使用opacity属性，将其设置为不可见，在js中使用toggleClass方法将该属性切换为1，使其可见。运行效果的图中将该属性设置为了1，方便大家先看到效果*/
.sky-night {
    position: absolute;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#4c3f6d),
            color-stop(#6c62bb),
            to(#93b1ed)
    );
    background: -webkit-linear-gradient(#4c3f6d, #6c62bb, #93b1ed);
    background: -o-linear-gradient(#4c3f6d, #6c62bb, #93b1ed);
    background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed);
    opacity: 0;
    -webkit-transition: opacity 3s;
    -o-transition: opacity 3s;
    transition: opacity 3s;
    -webkit-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
}
/*用于切换opacity属性*/
.sky-night-fade {
    opacity: 1;
}
/*11.@-webkit-keyframes 创建动画，设置昼夜交替时天空的变换过程0%为开头动画，100%为动画完成*/
@-webkit-keyframes sky-night {
    0% {
        background: -webkit-gradient(
                linear,
                left top,
                left bottom,
                from(#feb8b0),
                to(#fef9db)
        );
        background: -webkit-linear-gradient(#feb8b0, #fef9db);
        background: linear-gradient(#feb8b0, #fef9db);
    }
    100% {
        background: -webkit-gradient(
                linear,
                left top,
                left bottom,
                from(#4c3f6d),
                to(#96b5ee)
        );
        background: -webkit-linear-gradient(#4c3f6d, #96b5ee);
        background: linear-gradient(#4c3f6d, #96b5ee);
    }
}

@keyframes sky-night {
    0% {
        background: -webkit-gradient(
                linear,
                left top,
                left bottom,
                from(#feb8b0),
                to(#fef9db)
        );
        background: -webkit-linear-gradient(#feb8b0, #fef9db);
        background: -o-linear-gradient(#feb8b0, #fef9db);
        background: linear-gradient(#feb8b0, #fef9db);
    }
    100% {
        background: -webkit-gradient(
                linear,
                left top,
                left bottom,
                from(#4c3f6d),
                to(#96b5ee)
        );
        background: -webkit-linear-gradient(#4c3f6d, #96b5ee);
        background: -o-linear-gradient(#4c3f6d, #96b5ee);
        background: linear-gradient(#4c3f6d, #96b5ee);
    }
}
/*12.设置太阳的位置，并绘制太阳*/
.sun-container {
    z-index: 10;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    width: 290px;
    height: 290px;
    /*    background-color: rgba(255, 0, 255, 0.2);*/
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transition: all 5s ease-in-out;
    -o-transition: all 5s ease-in-out;
    transition: all 5s ease-in-out;
}

.sun {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#fefefe),
            to(#fffbe8)
    );
    background: -webkit-linear-gradient(#fefefe, #fffbe8);
    background: -o-linear-gradient(#fefefe, #fffbe8);
    background: linear-gradient(#fefefe, #fffbe8);
    cursor: pointer;
    z-index: 10;
}
/*13.绘制海洋部分，及其动画效果，同样使用toggleClass设置动画停止后，海洋的样式*/
.ocean {
    position: absolute;
    width: 100%;
    height: 45%;
    bottom: 0;
    background: #ceefe8;
    z-index: 200;
    -webkit-animation: ocean-top 3s infinite;
    animation: ocean-top 3s infinite;
    opacity: 1;
    -webkit-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;
    -webkit-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
}
.animation-stop {
    -webkit-animation: ocean-top 3s forwards;
    animation: ocean-top 3s forwards;
    height: 42%;
}
/*14.绘制夜晚时的海洋，与夜晚时的天空同理*/
.ocean-night {
    position: relative;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#8da6e6),
            to(#788cc9)
    );
    background: -webkit-linear-gradient(#8da6e6, #788cc9);
    background: -o-linear-gradient(#8da6e6, #788cc9);
    background: linear-gradient(#8da6e6, #788cc9);
    opacity: 0;
    -webkit-transition: opacity 3s;
    -o-transition: opacity 3s;
    transition: opacity 3s;
    -webkit-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
    z-index: 500;
}

.ocean-night-fade {
    opacity: 1;
}

/*15.将海洋分为三层，显得更有层次感，并绘制海洋的动画效果，使海洋浮动起来*/
.ocean:before,
.ocean:after {
    width: 100%;
    bottom: 0;
    position: absolute;
    z-index: 200;
}

.ocean:before {
    height: 75%;
    background: #baeced;
    -webkit-animation: ocean-middle 3s infinite;
    animation: ocean-middle 3s infinite;
}

.ocean:after {
    height: 50%;
    background: #ace6f1;
    -webkit-animation: ocean-bottom 2s infinite;
    animation: ocean-bottom 2s infinite;
}

@-webkit-keyframes ocean-top {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    75% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes ocean-top {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    75% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@-webkit-keyframes ocean-middle {
    0% {
        height: 75%;
    }
    50% {
        height: 77%;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    100% {
        height: 75%;
    }
}

@keyframes ocean-middle {
    0% {
        height: 75%;
    }
    50% {
        height: 77%;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    100% {
        height: 75%;
    }
}

@-webkit-keyframes ocean-bottom {
    0% {
        height: 50%;
    }
    50% {
        height: 52%;
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    100% {
        height: 50%;
    }
}

@keyframes ocean-bottom {
    0% {
        height: 50%;
    }
    50% {
        height: 52%;
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    100% {
        height: 50%;
    }
}
/*16.绘制小船，及切换夜晚时小船移出显示范围，同样是使用toggleClass*/
.boat {
    position: absolute;
    width: 50px;
    height: 0px;
    border-top: 7px solid #bb7074;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    left: 280px;
    /*    right: -50px;*/
    top: -5px;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation: boat 5s infinite;
    animation: boat 5s infinite;
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
    -webkit-transition: all 4s ease-in-out;
    -o-transition: all 4s ease-in-out;
    transition: all 4s ease-in-out;
}

.boat-sail {
    margin-left: -350px;
}
/*17.绘制船帆*/
.boat,
.boat:before,
.boat:after {
    position: absolute;
    z-index: 200;
}
.boat:before,
.boat:after {
    width: 0;
    height: 0;
    border: 0 solid transparent;
}

.boat:before {
    bottom: 8px;
    right: -6px;
    border-right-width: 15px;
    border-left-width: 0px;
    border-bottom: 30px solid #bb7074;
}

.boat:after {
    bottom: 8px;
    right: 11px;
    border-right-width: 0px;
    border-left-width: 20px;
    border-bottom: 48px solid #bb7074;
}

/*17.设置小船在海洋上浮动的动画*/
@-webkit-keyframes boat {
    0% {
        -webkit-transform: rotate(1deg)translate(2px, 0px);
        transform: rotate(1deg)translate(2px, 0px);
    }
    25% {
        -webkit-transform: rotate(-1deg) translate(-2px, -2px);
        transform: rotate(-1deg) translate(-2px, -2px);
    }
    50% {
        -webkit-transform: rotate(1deg) translate(1px, 0px);
        transform: rotate(1deg) translate(1px, 0px);
    }
    75% {
        -webkit-transform: rotate(-1deg) translate(-1px, -2px);
        transform: rotate(-1deg) translate(-1px, -2px);
    }
    100% {
        -webkit-transform: rotate(1deg) translate(2px, 0px);
        transform: rotate(1deg) translate(2px, 0px);
    }
}

@keyframes boat {
    0% {
        -webkit-transform: rotate(1deg)translate(2px, 0px);
        transform: rotate(1deg)translate(2px, 0px);
    }
    25% {
        -webkit-transform: rotate(-1deg) translate(-2px, -2px);
        transform: rotate(-1deg) translate(-2px, -2px);
    }
    50% {
        -webkit-transform: rotate(1deg) translate(1px, 0px);
        transform: rotate(1deg) translate(1px, 0px);
    }
    75% {
        -webkit-transform: rotate(-1deg) translate(-1px, -2px);
        transform: rotate(-1deg) translate(-1px, -2px);
    }
    100% {
        -webkit-transform: rotate(1deg) translate(2px, 0px);
        transform: rotate(1deg) translate(2px, 0px);
    }
}


/*18.绘制月亮，与太阳差不多*/
.moon {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#fefefe),
            to(#fffbe8)
    );
    background: -webkit-linear-gradient(#fefefe, #fffbe8);
    background: -o-linear-gradient(#fefefe, #fffbe8);
    background: linear-gradient(#fefefe, #fffbe8);
    opacity: 0;
    left: 80px;
    margin-top: 90px;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
}

.moon-fade {
    opacity: 0.3;
    -webkit-transition-delay: 4s;
    -o-transition-delay: 4s;
    transition-delay: 4s;
}


/*19.设置三只鸟儿的位置及样式*/
.bird:before,
.bird:after {
    border: 2px solid #bb7074;
    border-bottom: 0;
    width: 18px;
    height: 8px;
    z-index: 200;
}

.bird {
    position: absolute;
    -webkit-animation: bird 1s infinite;
    animation: bird 1s infinite;
    z-index: 200;
    -webkit-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}

.birds-fly {
    margin-left: 150px;
    margin-top: -100px;
}

.bird:after {
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-right: 0;
    -webkit-animation: wing-right 1s infinite;
    animation: wing-right 1s infinite;
    -webkit-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    transform-origin: bottom left;
}

.bird:before {
    left: -19px;
    border-top-right-radius: 18px;
    border-top-left-radius: 18px;
    border-left: 0;
    -webkit-animation: wing-left 1s infinite;
    animation: wing-left 1s infinite;
    -webkit-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    transform-origin: bottom right;
}

.bird-1 {
    left: 240px;
    top: 140px;
    -webkit-transform: scale(0.9)rotate(10deg);
    -ms-transform: scale(0.9)rotate(10deg);
    transform: scale(0.9)rotate(10deg);
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.bird-2 {
    left: 280px;
    top: 120px;
    -webkit-transform: scale(0.8)rotate(-5deg);
    -ms-transform: scale(0.8)rotate(-5deg);
    transform: scale(0.8)rotate(-5deg);
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.bird-3 {
    left: 250px;
    top: 100px;
    -webkit-transform: scale(1)rotate(8deg);
    -ms-transform: scale(1)rotate(8deg);
    transform: scale(1)rotate(8deg);
}
/*20.设置鸟儿飞行的动画，从小变大，展现从远处飞来的动画，以及翅膀的挥动（wing-left/wing-right），在步骤19中调用该动画*/
@-webkit-keyframes bird {
    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    50% {
        -webkit-transform: translate(2px, -3px);
        transform: translate(2px, -3px);
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}

@keyframes bird {
    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    50% {
        -webkit-transform: translate(2px, -3px);
        transform: translate(2px, -3px);
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}

@-webkit-keyframes wing-right {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes wing-right {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@-webkit-keyframes wing-left {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes wing-left {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
/*21.首先设置山峰图层的位置，定位山峰的位置，然后绘制三个图层的山峰，黄色，粉色，红色依次对应top，middle，back三层山峰*/
.mountains {
    position: absolute;
    width: 100%;
    /*        background-color: #ccc;*/
    height: 20%;
    bottom: 35%;
    /*        overflow: hidden;*/
}

.mountains-bottom {
    opacity: 0.5;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
    top: 0;
    position: fixed;
    overflow: hidden;
    height: 31.5%;
}

.mountains div,
.mountains div:after,
.mountains div:before {
    border-radius: 50%;
    position: absolute;
    z-index: 200;
}

.mountains * {
    -webkit-transition: background 3s ease;
    -o-transition: background 3s ease;
    transition: background 3s ease;
    -webkit-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
}

.mountain-top,
.mountain-top * {
    background: #fffcdd;
}

.mountain-top {
    width: 200px;
    height: 90px;
    top: 18px;
    right: 0;
    margin-right: -50px;
}

.mountain-top-1 {
    position: absolute;
    width: 250px;
    height: 80px;
    top: 15px;
    right: 0;
    margin-right: 150px;
}
/*夜晚的山*/
.mountain-top-night {
    background: #614da2;
}

.mountain-middle,
.mountain-middle * {
    background: #fee1cb;
}

.mountain-middle {
    width: 180px;
    height: 120px;
    top: 12px;
    margin-left: 180px;
}

.mountain-middle-1 {
    width: 200px;
    height: 100px;
    top: 3px;
    margin-left: -110px;
}

.mountain-middle-2 {
    width: 220px;
    height: 150px;
    margin-left: -250px;
}

.mountain-middle-night {
    background: #6154a4;
}

.mountain-back,
.mountain-back * {
    background: #fec6b9;
}

.mountain-back {
    width: 180px;
    height: 120px;
    top: 0px;
}

.mountain-back-1 {
    width: 200px;
    height: 100px;
    top: 3px;
    margin-left: 80px;
}

.mountain-back-2 {
    width: 150px;
    height: 80px;
    margin-left: 250px;
}

.mountain-back-night {
    background: #7980c8;
}
/*22.设置云朵图层的位置，定位云朵位置。*/
.cloud,
.cloud:after,
.cloud:before {
    background: #fff;
    position: absolute;
    z-index: 500;
}


.cloud-1 {
    left: 310px;
    top: 50px;
}

.cloud-2 {
    left: 280px;
    top: 150px;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.cloud-3 {
    left: 410px;
    top: 190px;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.cloud-4 {
    left: 160px;
    top: 120px;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.cloud-5 {
    left: 60px;
    top: 170px;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.cloud-6 {
    left: 0px;
    top: 100px;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
/*23.绘制云朵*/
.cloud {
    width: 65px;
    height: 12px;
    border-radius: 20px;
    -webkit-animation: cloud 4s infinite;
    animation: cloud 4s infinite;
}
/*24.*/
.cloud:after {
    border-radius: 50%;
    height: 30px;
    left: 27px;
    top: -18px;
    width: 30px;
}
/*25.*/
.cloud:before {
    border-radius: 50%;
    height: 20px;
    left: 12px;
    top: -11px;
    width: 20px;
}
/*26.添加云朵的浮动动画*/
@-webkit-keyframes cloud {
    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    25% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }
    50% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    75% {
        -webkit-transform: translate(-1px, -1px);
        transform: translate(-1px, -1px);
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}

@keyframes cloud {
    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    25% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }
    50% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    75% {
        -webkit-transform: translate(-1px, -1px);
        transform: translate(-1px, -1px);
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}


/*27.加入小星星，并添加闪烁动画，步骤还是和之前一样*/
.stars *,
.stars *:before,
.stars *:after {
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
}

.stars {
    opacity: 0;
    -webkit-transition: opacity 2s ease;
    -o-transition: opacity 2s ease;
    transition: opacity 2s ease;
}

.stars-fade {
    opacity: 1;
    -webkit-transition-delay: 4s;
    -o-transition-delay: 4s;
    transition-delay: 4s;
}

.star-group-1 {
    width: 5px;
    height: 5px;
    left: 225px;
    top: 120px;
    animation: twinkle 2s infinite linear;
}

.star-group-1:before {
    width: 4px;
    height: 4px;
    left: 50px;
    top: 18px;
    opacity: 0.8;
}

.star-group-1:after {
    width: 3px;
    height: 3px;
    left: -35px;
    top: 35px;
    opacity: 1;
}

.star-group-2 {
    width: 5px;
    height: 5px;
    left: 25px;
    top: 175px;
    animation: twinkle 1s infinite linear;
}

.star-group-2:before {
    width: 4px;
    height: 4px;
    left: 40px;
    top: 14px;
    opacity: 0.8;
}

.star-group-2:after {
    width: 3px;
    height: 3px;
    left: 30px;
    top: -40px;
    opacity: 1;
}

.star-group-3 {
    width: 5px;
    height: 5px;
    left: 125px;
    top: 50px;
    animation: twinkle 0.8s infinite linear;
}

.star-group-3:before {
    width: 4px;
    height: 4px;
    left: 50px;
    top: 20px;
    opacity: 0.8;
}

.star-group-3:after {
    width: 3px;
    height: 3px;
    left: 90px;
    top: -20px;
    opacity: 1;
}

.star-group-4 {
    width: 5px;
    height: 5px;
    left: 300px;
    top: 100px;
    animation: twinkle 1.2s infinite linear;
}

.star-group-4:before {
    width: 3px;
    height: 3px;
    left: 80px;
    top: 60px;
    opacity: 0.8;
}

.star-group-4:after {
    width: 3px;
    height: 3px;
    left: 50px;
    top: -20px;
    opacity: 1;
}
/*28.绘制流星及动画*/
@-webkit-keyframes twinkle {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.8;
    }
    75% {
        opacity: 0.5;
    }
    100% {
        opacity: 0.8;
    }
}

@keyframes twinkle {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.8;
    }
    75% {
        opacity: 0.5;
    }
    100% {
        opacity: 0.8;
    }
}

.shooting-star {
    position: absolute;
    background: -webkit-gradient(
            linear,
            left top,
            right top,
            from(rgba(255, 255, 255, 1)),
            to(rgba(255, 255, 255, 0))
    );
    background: -webkit-linear-gradient(
            left,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0) 100%
    );
    background: -o-linear-gradient(
            left,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0) 100%
    );
    background: linear-gradient(
            to right,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0) 100%
    );
    width: 35px;
    height: 3px;
    left: 310px;
    top: 10px;
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    -webkit-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    transform: rotate(-40deg);
}

.shooting {
    -webkit-animation: shooting-star 2s 2 ease-in-out;
    animation: shooting-star 2s 2 ease-in-out;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

@-webkit-keyframes shooting-star {
    100% {
        -webkit-transform: rotate(-40deg)translateX(-450px);
        transform: rotate(-40deg)translateX(-450px);
    }
}

@keyframes shooting-star {
    100% {
        -webkit-transform: rotate(-40deg)translateX(-450px);
        transform: rotate(-40deg)translateX(-450px);
    }
}
/*29.设置字体的位置及样式*/
p a:link,
p a:active,
p a:visited {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted;
    border-bottom-color: inherit;
    opacity: 0.6;
}

h1,
p {
    color: #bb7074;
    -webkit-transition: color 3s;
    -o-transition: color 3s;
    transition: color 3s;
    -webkit-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
    text-align: center;
}

h1 {
    margin: 60px 0 10px 0;
    font-size: 30px;
    position: relative;
}


p {
    font-size: 16px;
    line-height: 16px;
    margin: 40px;
    position: relative;
    opacity:0.6;
}


p#subtitle {
    margin-top: 10px;
}

.text-color {
    color: #7980c8;
}

三、JS（index.js）

22. 设置元素间属性转换

js部分主要是元素的变换，日夜交替时，显示或者隐藏某个元素，较为简单

$(function () {
    $('.sun').click(function (e) {
        e.stopPropagation();
        $("html").toggleClass('container-night');
        $(".sky-night").toggleClass('sky-night-fade');
        $("p, h1").toggleClass('text-color');
        $(".ocean-night").toggleClass('ocean-night-fade');
        $(".moon").toggleClass('moon-fade');
        $(".ocean").toggleClass('animation-stop');
        $(".bird").toggleClass('birds-fly');
        $(".boat").toggleClass('boat-sail');
        $(".mountain-top, .mountain-top >*").toggleClass('mountain-top-night');
        $(".mountain-middle, .mountain-middle >*").toggleClass('mountain-middle-night');
        $(".mountain-back, .mountain-back >*").toggleClass('mountain-back-night');
        $(".cloud").delay(2500).fadeToggle(2500);
        $(".stars").toggleClass('stars-fade');
        $(".shooting-star").toggleClass('shooting');

        var angle = ($('.sun-container').data('angle') + 360) || 360;
        $('.sun-container').css({
            'transform': 'rotate(' + angle + 'deg)'
        });
        $('.sun-container').data('angle', angle);

    });
});

至此，我们的纯代码绘制动画就完成啦！
运行效果：

总结

Good morning, and in case I don’t see ya, good afternoon, good evening, and good night!
感谢大家支持！再次祝大家早安晚安，每日安好鸭！

你可能感兴趣的:(前端基础练手小项目,前端,css,html,javascript,动画)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • Google earth studio 简介 陟彼高冈yu 旅游
    GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • 每日算法&面试题，大厂特训二十八天——第二十天（树） 肥学 ⚡算法题⚡面试题每日精进java算法数据结构
    目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题，最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧！！特别介绍小白练手专栏，适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 大雄的新恐龙：养育生命，的确不易 沧浪先生
    哆啦A梦这个动画片，我小时候没有看过，长大了之后似乎对这种充满童真童趣的动画片也没有太多的喜爱，所以结果很明显，我并没有看过哆啦A梦这个动画片。但是近年来大屏幕的兴起，让各家影视剧制作者发现了电影化的好处，没错，电影不仅影响力更大，钱赚得也多。《哆啦A梦·大雄的新恐龙》是最新的一部大屏幕电影，大雄和柯南一样，都永远长不大，而且他和他的小伙伴日复一日、年复一年地和机器猫哆啦A梦在一起玩耍，永远的神奇
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • 利用python实现图片格式之间的相互转换 难得北窗高卧 python开发语言
    一、概要图片一般有多种格式，常见的图片格式包括：JPEG（.jpg或.jpeg）：一种广泛使用的有损压缩格式，适用于摄影图像和网页上的图片。PNG（.png）：一种无损压缩格式，支持透明度和更好的图像质量，常用于图标、图形和需要透明背景的图片。该图片是4通道的，外加一个透明通道。如截屏GIF（.gif）：一种支持动画和透明度的格式，常用于简单的动画和图标。BMP（.bmp）：一种无损格式，存储图像
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
  • 详解：如何设计出健壮的秒杀系统？ 夜空_2cd3
    作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 斟一小组鸡血视频 和自己一起成长
    http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • Dockerfile命令详解之 FROM 清风怎不知意 容器化java前端javascript
    许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
  • 8 冰鈊夢
    transition动画transform.box{width:200px;height:200px;background-color:gold;margin:50pxauto0;transition:all1sease;}.box:hover{transform:translate(50px,50px);}.box2{width:200px;height:200px;background-col
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • jquery实现的jsonp掉java后台 知了ing javajsonpjquery
    什么是JSONP？ 先说说JSONP是怎么产生的： 其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里，对于很多刚接触的人来讲理解起来有些困难，小可不才，试着用自己的方式来阐释一下这个问题，看看是否有帮助。 1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准； 2、
  • Struts2学习笔记 caoyong struts2
    SSH : Spring + Struts2 + Hibernate 三层架构(表示层,业务逻辑层,数据访问层) MVC模式 (Model View Controller) 分层原则:单向依赖，接口耦合 1、Struts2  =  Struts  + Webwork 2、搭建struts2开发环境    a>、到www.apac
  • SpringMVC学习之后台往前台传值方法 满城风雨近重阳 springMVC
    springMVC控制器往前台传值的方法有以下几种： 1.ModelAndView    通过往ModelAndView中存放viewName：目标地址和attribute参数来实现传参：      ModelAndView mv=new ModelAndView();  mv.setViewName="success
  • WebService存在的必要性？ 一炮送你回车库 webservice
    做Java的经常在选择Webservice框架上徘徊很久，Axis  Xfire Axis2 CXF ，他们只有一个功能，发布HTTP服务然后用XML做数据传输。 是的，他们就做了两个功能，发布一个http服务让客户端或者浏览器连接，接收xml参数并发送xml结果。 当在不同的平台间传输数据时，就需要一个都能解析的数据格式。 但是为什么要使用xml呢？不能使json或者其他通用数据
  • js年份下拉框 3213213333332132 java web ee
    <div id="divValue">test...</div>测试 //年份 <select id="year"></select> <script type="text/javascript"> window.onload =
  • 简单链式调用的实现技术 归来朝歌 方法调用链式反应编程思想
    在编程中，我们可以经常遇到这样一种场景：一个实例不断调用它自身的方法，像一条链条一样进行调用 这样的调用你可能在Ajax中，在页面中添加标签： $("<p>").append($("<span>").text(list[i].name)).appendTo("#result");   也可能在HQ
  • JAVA调用.net 发布的webservice 接口 darkranger webservice
    /** * @Title: callInvoke * @Description: TODO(调用接口公共方法) * @param @param url 地址 * @param @param method 方法 * @param @param pama 参数 * @param @return * @param @throws BusinessException
  • Javascript模糊查找 | 第一章 循环不能不重视。 aijuans Way
    最近受我的朋友委托用js+HTML做一个像手册一样的程序，里面要有可展开的大纲，模糊查找等功能。我这个人说实在的懒，本来是不愿意的，但想起了父亲以前教我要给朋友搞好关系，再加上这也可以巩固自己的js技术，于是就开始开发这个程序，没想到却出了点小问题，我做的查找只能绝对查找。具体的js代码如下： function search(){ var arr=new Array("my
  • 狼和羊，该怎么抉择 atongyeye 工作
    狼和羊，该怎么抉择 在做一个链家的小项目，只有我和另外一个同事两个人负责，各负责一部分接口，我的接口写完，并全部测联调试通过。所以工作就剩下一下细枝末节的，工作就轻松很多。每天会帮另一个同事测试一些功能点，协助他完成一些业务型不强的工作。 今天早上到公司没多久，领导就在QQ上给我发信息，让我多协助同事测试，让我积极主动些，有点责任心等等，我听了这话，心里面立马凉半截，首先一个领导轻易说
  • 读取android系统的联系人拨号 百合不是茶 androidsqlite数据库内容提供者系统服务的使用
           联系人的姓名和号码是保存在不同的表中,不要一下子把号码查询来,我开始就是把姓名和电话同时查询出来的,导致系统非常的慢   关键代码:     1, 使用javabean操作存储读取到的数据 package com.example.bean; /** * * @author Admini
  • ORACLE自定义异常 bijian1013 数据库自定义异常
    实例： CREATE OR REPLACE PROCEDURE test_Exception ( ParameterA IN varchar2, ParameterB IN varchar2, ErrorCode OUT varchar2 --返回值,错误编码 ) AS /*以下是一些变量的定义*/ V1 NUMBER; V2 nvarc
  • 查看端号使用情况 征客丶 windows
    一、查看端口 在windows命令行窗口下执行： >netstat -aon|findstr "8080" 显示结果： TCP     127.0.0.1:80         0.0.0.0:0    &
  • 【Spark二十】运行Spark Streaming的NetworkWordCount实例 bit1129 wordcount
    Spark Streaming简介   NetworkWordCount代码   /* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with
  • Struts2 与 SpringMVC的比较 BlueSkator struts2spring mvc
    1. 机制：spring mvc的入口是servlet，而struts2是filter，这样就导致了二者的机制不同。 2. 性能：spring会稍微比struts快。spring mvc是基于方法的设计，而sturts是基于类，每次发一次请求都会实例一个action，每个action都会被注入属性，而spring基于方法，粒度更细，但要小心把握像在servlet控制数据一样。spring
  • Hibernate在更新时，是可以不用session的update方法的(转帖） BreakingBad Hibernateupdate
    地址：http://blog.csdn.net/plpblue/article/details/9304459 public void synDevNameWithItil() {Session session = null;Transaction tr = null;try{session = HibernateUtil.getSession();tr = session.beginTran
  • 读《研磨设计模式》-代码笔记-观察者模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; import java.util.Observable; import java.util.Observer; /** * “观
  • 重置MySQL密码 chenhbc mysql重置密码忘记密码
    如果你也像我这么健忘，把MySQL的密码搞忘记了，经过下面几个步骤就可以重置了（以Windows为例，Linux/Unix类似）： 1、关闭MySQL服务 2、打开CMD，进入MySQL安装目录的bin目录下，以跳过权限检查的方式启动MySQL mysqld --skip-grant-tables  3、新开一个CMD窗口，进入MySQL mysql -uroot  
  • 再谈系统论，控制论和信息论 comsci 设计模式生物能源企业应用领域模型
                               再谈系统论，控制论和信息论     偶然看
  • oracle moving window size与 AWR retention period关系 daizj oracle
    转自： http://tomszrp.itpub.net/post/11835/494147 晚上在做11gR1的一个awrrpt报告时,顺便想调整一下AWR snapshot的保留时间,结果遇到了ORA-13541这样的错误.下面是这个问题的发生和解决过程. SQL> select * from v$version; BANNER -------------------
  • Python版B树 dieslrae python
    话说以前的树都用java写的,最近发现python有点生疏了,于是用python写了个B树实现,B树在索引领域用得还是蛮多了,如果没记错mysql的默认索引好像就是B树... 首先是数据实体对象,很简单,只存放key,value class Entity(object): '''数据实体''' def __init__(self,key,value)
  • C语言冒泡排序 dcj3sjt126com 算法
    代码示例： # include <stdio.h> //冒泡排序 void sort(int * a, int len) { int i, j, t; for (i=0; i<len-1; i++) { for (j=0; j<len-1-i; j++) { if (a[j] > a[j+1]) // >表示升序
  • 自定义导航栏样式 dcj3sjt126com 自定义
    -(void)setupAppAppearance { [[UILabel appearance] setFont:[UIFont fontWithName:@"FZLTHK—GBK1-0" size:20]]; [UIButton appearance].titleLabel.font =[UIFont fontWithName:@"FZLTH
  • 11.性能优化-优化-JVM参数总结 frank1234 jvm参数性能优化
    1.堆 -Xms --初始堆大小 -Xmx --最大堆大小 -Xmn --新生代大小 -Xss --线程栈大小 -XX:PermSize  --永久代初始大小 -XX:MaxPermSize  --永久代最大值 -XX:SurvivorRatio --新生代和suvivor比例,默认为8 -XX:TargetSurvivorRatio --survivor可使用
  • nginx日志分割 for linux HarborChung nginxlinux脚本
    nginx日志分割 for linux 默认情况下，nginx是不分割访问日志的，久而久之，网站的日志文件将会越来越大，占用空间不说，如果有问题要查看网站的日志的话，庞大的文件也将很难打开，于是便有了下面的脚本   使用方法，先将以下脚本保存为 cutlog.sh，放在/root 目录下，然后给予此脚本执行的权限   复制代码代码如下: chmo
  • Spring4新特性——泛型限定式依赖注入 jinnianshilongnian springspring4泛型式依赖注入
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • centOS安装GCC和G++ liuxihope centosgcc
    Centos支持yum安装，安装软件一般格式为yum install .......，注意安装时要先成为root用户。 按照这个思路，我想安装过程如下： 安装gcc：yum install gcc 安装g++： yum install g++ 实际操作过程发现，只能有gcc安装成功，而g++安装失败，提示g++ command not found。上网查了一下，正确安装应该
  • 第13章 Ajax进阶（上） onestopweb Ajax
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • How to determine BusinessObjects service pack and fix pack blueoxygen BO
    http://bukhantsov.org/2011/08/how-to-determine-businessobjects-service-pack-and-fix-pack/   The table below is helpful. Reference   BOE XI 3.x 12.0.0. y BOE XI 3.0 12.0. x. y BO
  • Oracle里的自增字段设置 tomcat_oracle oracle
    　大家都知道吧，这很坑，尤其是用惯了mysql里的自增字段设置，结果oracle里面没有的。oh，no 　　我用的是12c版本的，它有一个新特性，可以这样设置自增序列，在创建表是，把id设置为自增序列 create table t ( id 　　 　　 number generated by default as identity (start with 1 increment b
  • Spring Security（01）——初体验 yang_winnie springSecurity
    Spring Security（01）——初体验     博客分类： spring Security Spring Security入门安全认证        首先我们为Spring Security专门建立一个Spring的配置文件，该文件就专门用来作为Spring Security的配置
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他