【日出日落】用按钮做前景，鼠标滑入后看日出，滑出看日落

前言

刚好最近开了一个新的css专栏，就想着用css做一个日出日落的效果吧。

来个按钮

😯 按钮就是最基础的那种，随手画一个就有了

<div class="button">
    <span>蜡笔小心_</span>
</div>

.button {
    width: 171px;
    height: 65px;
    background: #2c0055;
    box-shadow: 0px 0px 16px #c80de0;
    border-radius: 2px;
    z-index: 3;
    border: 2px solid;
    border-image: linear-gradient(#360154, #d442d5) 30;
}

• border-image 就是给按钮一个渐变的边框色

😯 给按钮加个 hover 伪元素，让阴影扩散

.button:hover {
    box-shadow: 0px 0px 36px #c80de0;
    transition: all 1s ease-in-out;
}

画个太阳

<div class="sun"></div>

🤓 太阳的样式同样是用渐变加阴影

.sun {
    width: 64px;
    height: 64px;
    left: 55px;
    bottom: 136px;
    background: linear-gradient(180deg, #ffdc2a 0%, #fb2182 41.54%);
    box-shadow: 0px 0px 36px #ffdc2a;
    z-index: 2;
    border-radius: 65px;
}

太阳和按钮样式中都给了一个 z-index 用于置于不同的层级，这样按钮就可以遮住太阳了。

日出

😏 为了更好的展示日出，我们可以把按钮和太阳包裹在一个 a 标签中

😏 这样就可以把上面按钮的效果一起放在 a 标签的 hover 伪元素中

a:hover .sun {
    bottom: 176px;
    transition: all 1s ease-in-out;
    box-shadow: 0px 0px 10px #ffdc2a;
}

a:hover .button {
    box-shadow: 0px 0px 36px #c80de0;
    transition: all 1s ease-in-out;
}

🤔 日出的效果已经出来了，但是鼠标移出的时候，日落的效果过于生硬了一点

🤔 我们可以在按钮和太阳的样式中同样添加一个 transition 的效果

.button, .sun {
    transition: all 1s ease-in-out;
}

😆 至此，日出日落的效果就实现啦。

总结

本篇文章就是用了css3中最基础的阴影和过渡动画效果实现出的日出日落。