前言

手把手教你做

素材展示

我们先来看看制作这个动画需要用到的素材，哈哈估计有很多掘友以为我这些都是用css做的。当然除了1.png之外，其他的完全可以用css做到一个一模一样的元素效果出来，但今天的主题是动画所以我并不打算用很多的篇幅去讲解怎么用css来做这些元素（要是有人想看的话可以考虑做下🧐）。 很多掘友看到这里估计就想退了：“什么嘛原来都是图片呀，就这就这？🤣👉🤡”。诶~，先别急，你们可以发现上面的效果图里并没有关于在阳光下的山水 1.png，这里就是我今天要重点讲到的一个css属性filter。

页面元素基本搭建

做动画之前得先把基础的页面所需元素搭建好：

1. 太阳/月亮
2. 云彩
3. 图片背景
4. 两个按钮

HTML代码：

<!-- 云朵 -->
<img src="images/4.png" class="cld1" alt="123123">
<img src="images/4.png" class="cld2" alt="123123">
<img src="images/4.png" class="cld3" alt="123123">

<!-- 白昼黑夜切换的按钮 -->
<input type="radio" name="sun" id="day">
<input type="radio" id="night" name="sun">
<label for="day" class="day">Day</label>
<label for="night" class="night">Night</label>

<!-- 纯色天空背景 -->
<div class="bgc"></div>

<!-- 山水的背景图片 -->
<img src="images/1.png" class="bgi" alt="123">

<!-- 太阳和月亮的 -->
<div class="dayOrNight">
    <img src="images/3.png" alt="123" class="n">
    <img src="images/2.png" alt="123" class="d">
</div>

CSS代码：

*{
    margin: 0;
    padding: 0;
}

input{
    visibility: hidden;
}

/*底板背景默认为黑色*/
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #080818;
}

/*图片背景*/
.bgi{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    transition: all 1s linear;
}

/*纯色天空背景*/
.bgc{
    width: 100%;
    height: 100%;
    background-color: #080818;
    transition: all 1s linear;
    position: absolute;
    top: 0;
    left: 0;
}

/*放置太阳月亮的大盒子*/
.dayOrNight{
    width: 100vh;
    height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    transition: all 1s linear;
}

/*太阳月亮的通用样式*/
.dayOrNight>div{
    width: 300px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/*月亮*/
.n{
    top: 20px;
}

/*太阳*/
.d{
    bottom: 20px;
}

/*按钮的通用样式*/
label{
    width: 120px;
    height: 50px;
    position: absolute;
    bottom: 20px;
    transition: all 0.5s linear;
    line-height: 50px;
    cursor: pointer;
    text-align: center;
    z-index: 6;
}

/*白昼按钮*/
.day{
    left: 20px;
    color: #080818;
    background-color: #FFDA7E;
}

/*黑夜按钮*/
.night{
    right: 20px;
    color: #FFDA7E;
    background-color: #080818;
}

搭建完成之后就是下面这个样子啦。

可以看到我上面的代码里我的 dayOrNight 类名的盒子是用来装太阳月亮的，这种写法也很好理解 ，是为了后面能够做日落日出的切换，下面可以直观的给展示原理图一下：

云朵动画

基本的页面元素是已经搭建完成了的，在做交互动画之前，我们先把不需要交互的云朵让它动起来。

为了让整体动画有更好的效果，我在页面里面放置了三片云彩，我给每朵云朵的大小、透明度、飞行速度、初始距离都进行了分开设置。

1. 大云朵： 大小：170px，透明度：0.5，动画时间：14s，初始距离：right -200px

2. 中云朵： 大小：150px，透明度：0.65，动画时间：17s，初始距离：right -600px

3. 小云朵： 大小：100px，透明度：0.8，动画时间：20s，初始距离：right -1600px

动画设置就很简单了，只需要animation动画设置他的right值，线性动画linear，无限循环infinite就行了，下面直接放代码：

/*大云朵*/
.cld1{
    width: 170px;
    position: absolute;
    top: 50px;
    z-index: 1;
    opacity: 0.5;
    animation: cld1 14s linear infinite;
}

/*小云朵*/
.cld2{
    width: 100px;
    position: absolute;
    top: 150px;
    z-index: 1;
    opacity: 0.8;
    animation: cld2 20s linear infinite;
}

/*中云朵*/
.cld3{
    width: 150px;
    position: absolute;
    top: 100px;
    z-index: 1;
    opacity: 0.65;
    animation: cld3 17s linear infinite;
}

/*云朵对应的动画*/
@keyframes cld1 {
    0%{
        right: -200px;
    }
    100%{
        right: 2000px;
    }
}
@keyframes cld2 {
    0%{
        right: -600px;
    }
    100%{
        right: 2000px;
    }
}
@keyframes cld3 {
    0%{
        right: -1600px;
    }
    100%{
        right: 2000px;
    }
}

效果的话直接参考最一开始的效果图里的云朵就好啦，这里就不另外放出来了。

交互：昼夜切换动画

现在终于来到最终阶段：按钮交互昼夜切换效果。

昼夜切换一共有3个需要做改变的地方：

1. 日月切换（上面有提到过）
2. 纯色天空切换
3. 山水图的颜色切换

得先好好聊聊这个按钮的问题，我作为切换的按钮用的不是button，a，div等标签，而是用 input 标签的 radio类型 原因当然也很简单，这是一个单选框的类型，只有这个input的这个类型可以完美符合我的 “黑夜的时候变成白昼，白昼的时候变成黑夜” 的要求。不能理解的话自己用别的标签试一下你就知道了嘛~

那么至于这个纯色的天空背景，我为什么不直接加在html,body的样式属性里呢，答案也很简单：因为按钮是包在这html,body两个标签里的嘛，你用CSS怎么可能好操作父级元素呢？

纯色天空切换CSS

/*白昼按钮点击*/
#day:checked~.bgc{
    background-color: #FFDA7E;
}
/*黑夜按钮点击*/
#night:checked~.bgc{
    background-color: #080818;
}

山水图的颜色切换CSS

这里就要用到我最一开始提到的filter属性啦。filter属性 是我平常做一些页面设计的时候比较喜欢用到的一个属性，比如设置模糊程度 filter：blur(); ，设置图像变灰 filter：grayscale(); 等等方法。

而关于这个山水图变色效果，起初我打算用他的色彩反转 flilter: invert() 方法来完成这个效果，但是结果嘛....有点一言难尽。特别是他翻转过程中的过渡，我测直接变成轮廓了。

过渡中：

过渡后：

这种效果不用说，肯定是要被pass掉的。于是我就慢慢的尝试了其他的属性，直到用到调整暖色 filter：sepia() 。他的效果也就是我最一开始给大家展示的效果图的样子啦，过渡给人一种由黑夜变成白昼的感觉。转换之后的色彩也非常符合在阳光下的景物的样子。

/*白昼按钮点击*/
#day:checked~.bgi{
    filter: sepia(100%);
}
/*黑夜按钮点击*/
#night:checked~.bgi{
    filter: sepia(0%);
}

日落日出CSS

/*白昼按钮点击*/
#day:checked~.dayOrNight{
    transform: translate(-50%, -50%) rotateZ(180deg);
}
/*黑夜按钮点击*/
#night:checked~.dayOrNight{
    transform: translate(-50%, -50%) rotateZ(0deg);
}

后语

上述这些代码，我们的昼夜切换就已经全部做完啦！下面我也会把完整的在线代码demo放出来供大家体验！如果您对此有更好的意见和建议欢迎大家在评论区留言，当然喜欢的话别忘了点赞加关注哦，么么么么么么么么么么~🥰