新手朋友看这里：文件夹新建一个.html后缀的文件，然后代码复制进去保存，直接双击打开就可以看到效果了。
简单讲一下思路：
仔细分析下这个按钮的元素
可以发现除了星星，全都是圆形，云也是很多个圆组成的。那就直接用圆形去排版就好了，全部用absolute定位，调整好位置。
然后星星最简单的实现方法就是用svg，path > d里面用c可以实现三次贝塞尔画路径，这样星星形状也解决了。
最后布局定好之后就是动效，css>transition可以搞定所有动效。在这个基础上可以再优化，比如回弹效果，只要把ease-in-out改成自定义贝塞尔曲线就行。例如改成：transition: all 0.6s cubic-bezier(0.39, 0.06, 0.32, 1.34);
上代码：（原谅我点击事件用的jq，实在不想写了）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Day & Night 按钮示例</title>
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
</head>
<body>
<span class="button" id="button">
<span class="btnInner">
<span class="circle">
<span class="circleNight">
<span class="crater"></span>
<span class="crater crater2"></span>
<span class="crater crater3"></span>
</span>
</span>
<span class="haloBox">
<span class="halo"></span>
<span class="halo halo2"></span>
<span class="halo halo3"></span>
</span>
<span class="clouds">
<span class="cloud"></span>
<span class="cloud cloud2"></span>
<span class="cloud cloud3"></span>
<span class="cloud cloud4"></span>
<span class="cloud cloud5"></span>
<span class="cloud cloud6"></span>
<span class="cloud cloud7"></span>
</span>
<span class="clouds clouds2">
<span class="cloud"></span>
<span class="cloud cloud2"></span>
<span class="cloud cloud3"></span>
<span class="cloud cloud4"></span>
<span class="cloud cloud5"></span>
<span class="cloud cloud6"></span>
<span class="cloud cloud7"></span>
</span>
<span class="stars">
<span class="star">
<svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
</span>
<span class="star star2">
<svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
</span>
<span class="star star3">
<svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
</span>
<span class="star star4">
<svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
</span>
<span class="star star5">
<svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
</span>
<span class="star star6">
<svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
</span>
<span class="star star7">
<svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
</span>
<span class="star star8">
<svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
</span>
<span class="star star9">
<svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
</span>
<span class="star star10">
<svg version="1.1" viewBox="0 0 20 20" height="20" width="20" style="width: 100%; height: 100%;"><path d="M 0 10 c 5 0 10 -5 10 -10 c 0 5 5 10 10 10 c -5 0 -10 5 -10 10 c 0 -5 -5 -10 -10 -10" stroke="#fff" stroke-width="1" fill="#fff"></path></svg>
</span>
</span>
</span>
</span>
</body>
<script>
$(document).ready(function(e) {
$('#button').click(function() {
toggleClass()
})
function toggleClass() {
$('#button').toggleClass('night')
}
})
</script>
<style type="text/css">
.button {
display: inline-block;
line-height: 0;
cursor: pointer;
}
.btnInner {
transition: all 0.6s ease-in-out;
line-height: 0;
display: inline-block;
position: relative;
height: 66px;
width: 150px;
border-radius: 100px;
background: #1c80da;
box-shadow: inset 0 2px 6px #000, 0 0 3px rgba(0,0,0,0.6);
overflow: hidden;
}
.circle {
transition: all 0.6s ease-in-out;
position: absolute;
z-index: 2;
overflow: hidden;
width: 54px;
height: 54px;
top: 6px; left: 6px;
background: #ffdd08;
border-radius: 100px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.6), inset -0.5px -1px 3px rgba(0,0,0,0.6), inset 1px 1px 3px rgba(255,255,255,0.8);
}
.circle .circleNight {
transition: all 0.6s ease-in-out;
position: absolute;
top: 0;
left: 101%;
width: 100%;
height: 100%;
border-radius: 100px;
background: #c7d0da;
box-shadow: 0px 0px 5px rgba(0,0,0,0.6), inset -0.5px -1px 2px rgba(0,0,0,0.6), inset 1px 1px 2px rgba(255,255,255,0.8);
}
.circle .crater {
position: absolute;
width: 25%;
height: 25%;
top: 12%;
left: 44%;
border-radius: 100px;
background: #909baf;
}
.circle .crater2 {
width: 34%;
height: 34%;
top: 42%;
left: 16%;
}
.circle .crater3 {
width: 19%;
height: 19%;
top: 62%;
left: 63%;
}
.haloBox {
transition: all 0.6s ease-in-out;
position: absolute;
z-index: 1;
width: 0; height: 0;
left: 33px;
top: 33px;
}
.haloBox .halo {
transition: all 0.6s ease-in-out;
width: 92.4px;
height: 92.4px;
position: absolute;
background: #fff;
opacity: 0.1;
border-radius: 1000px;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
.haloBox .halo2 {
width: 117.4px;
height: 117.4px;
}
.haloBox .halo3 {
width: 142.4px;
height: 142.4px;
}
.clouds {
transition: all 0.6s ease-in-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.3;
transition-delay: 0s;
}
.clouds .cloud {
position: absolute;
background: #fff;
border-radius: 100px;
width: 59.4px;
height: 59.4px;
top: -17%;
left: 84%;
}
.clouds2 {
transition-delay: 0.3s;
top: 19%;
left: -5%;
opacity: 1;
transform: rotate(5deg);
}
.clouds2 .cloud {
top: 2%;
left: 92%;
}
.clouds2 .cloud2 {
top: 39%;
left: 69%;
}
.clouds .cloud2 {
width: 44.88px;
height: 44.88px;
top: 39%;
left: 69%;
}
.clouds .cloud3 {
width: 48.18px;
height: 48.18px;
top: 47%;
left: 54%;
}
.clouds .cloud4 {
width: 33px;
height: 33px;
top: 64%;
left: 49.7%;
}
.clouds .cloud5 {
width: 37.62px;
height: 37.62px;
top: 64%;
left: 32%;
}
.clouds .cloud6 {
width: 48.18px;
height: 48.18px;
top: 81%;
left: 13%;
}
.clouds .cloud7 {
width: 29.7px;
height: 29.7px;
top: 85%;
left: 7%;
}
.stars {
transition: all 0.6s ease-in-out;
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 100%;
}
.stars .star {
transition: all 0.6s ease-in-out;
transform: translateY(-20px);
display: inline-block;
position: absolute;
left: 20%;
top: 20%;
width: 10px;
}
.stars .star2 {
left: 10%;
top: 30%;
width: 4px;
transition-delay: 0.1s;
}
.stars .star3 {
left: 20%;
top: 48%;
width: 3px;
transition-delay: 0.15s;
}
.stars .star4 {
left: 11%;
top: 76%;
width: 4px;
transition-delay: 0.24s;
}
.stars .star5 {
left: 16%;
top: 71%;
width: 4px;
transition-delay: 0.20s;
}
.stars .star6 {
left: 23%;
top: 79%;
width: 5px;
transition-delay: 0.26s;
}
.stars .star7 {
left: 44%;
top: 26%;
width: 4px;
transition-delay: 0.04s;
}
.stars .star8 {
left: 37%;
top: 50%;
width: 4px;
transition-delay: 0.14s;
}
.stars .star9 {
left: 44%;
top: 68%;
width: 6px;
transition-delay: 0.12s;
}
.stars .star10 {
left: 52%;
top: 37%;
width: 8px;
transition-delay: 0.05s;
}
.night .btnInner {
background: #252525;
}
.night .circle {
left: 90px;
}
.night .circle .circleNight {
left: 0;
}
.night .haloBox {
left: 122px;
}
.night .haloBox .halo {
opacity: 0.13;
}
.night .clouds {
top: 100%;
transition-delay: 0.3s;
}
.night .clouds2 {
transition-delay: 0s;
}
.night .stars {
top: 0;
}
.night .stars .star {
transform: translateY(0);
}
.button:hover .circle {
transform: translateX(5px);
}
.button:hover .haloBox {
transform: translateX(5px);
}
.night:hover .circle {
transform: translateX(-5px);
}
.night:hover .haloBox {
transform: translateX(-5px);
}
</style>
</html>
