听书人

在鸡零狗碎操蛋的生活中找到闪闪发光的太阳

日月切换按钮

听书人 · 沦陷于 · 2021/09/23 · 阅:45

无意间发现一个有意思的日月切换按。废话也懒得多说,直接看代码

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css">
<div class="wrapper">
<input type="checkbox" name="checkbox" class="switch">
</div>
body{
padding: 0px;
margin:0px;
width:100%;
height:100vh;
background: radial-gradient(#74b9ff,#0984e3);
}
.wrapper{
width: 130px;
height:100px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
.switch{
position: relative;
width: 130px;
height: 50px;
margin: 0px;
appearance: none;
-webkit-appearance: none;
 
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAA6CAMAAABlAVBFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkVDMUE5RUREQ0YzMjExRTk4MkI1RjMxRjFDRjg0RkUxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkVDMUE5RURFQ0YzMjExRTk4MkI1RjMxRjFDRjg0RkUxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RUMxQTlFREJDRjMyMTFFOTgyQjVGMzFGMUNGODRGRTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RUMxQTlFRENDRjMyMTFFOTgyQjVGMzFGMUNGODRGRTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4lY1BJAAAAYFBMVEVKdLgXOZNFcbg7YrI6bbgWM4oyWq5FaLRCZrMhQ5w2XrA1bLkRLYVNd7lpjsYNJn0nSaEuU6hCcLgOKIAcP5lRe7w5arZIbLZIcrg+brhbg8FHesAfO5AzaLVJb7c8c73OELbmAAAFJklEQVR42syWiXqzKhCGQaMiB6NGccmf2Pu/yzPDouBWbZI+/Z4mEhyYdxa05N/XH9Q/8t+fFPn6i1RfJLj8QQWkW8z1zbM/uLx/alN7dfV8AasjpJ+rkddnf0zP+/3pXiddbtfbpf+pyBpWJpuDyxupTe3V0e1+m1vfmuZ2FCu7LXRpbkfVNP51Ut/0C2OAP7Zttoa1o/72gnp5v3wGi3QvYAV9ExzGCk6oud774FPqb+PwJFbQdR+jCiRxsGR3Rgj2GQXBNRs3lyexjogE0II/UB+YZYQAFnm3uuze/WidXf4hLHntXliedWV4/wAWPEReocriosz2sTLy28qysIzLgchsU0Re4QHyu5JJGccx28MCo+y3qQiPOeffYL0tVyQ4aBjyEJSQu5Tz3MhpAEOsN173Uwfneu/u/bq83y2nJAuVWiKHDh2rfhuSpG2TdhgI5gmO6jC0ScKSZICpdpAW3X5JI/R7X82s1CECFrFx2eg6s0TamOE6hExpQBQFM9dsiiVg3AJfC+rgMwAzRgRPZgItcb0Ga1AEIkS/JEDnA+zaEsMaXK+duoVpkToNjGlvMJV8KyRkyLVt0A2BlFLOD4wKre0USDfG2cL5Rx7oa2Kib9Xf6GGYsNptLma1Z9QSpyv1qRrvQWIT5qZ+wCTrSq24gSKSEXHT7WTO/OK2CQu9FA5jN2FDTSTM+fbnvM0crMEO8QSs1ckcDiPmmqhFvqtWdYpqq7ljMGZ7veI4agnnITy/tEON5huHCzHrz+wzzyyUE+rTrns1UU2IjK1E35KyKMsCPqA4NEu3UuUmzbnH/IowdTwWibfW09jsz5bRJ4A1qYxV3kZPW1Br8lpwRU6yk5UoF1hpWngqOcM3ANuF4pBkf2KfK2HcM/4uRlKkM64UwFQEi10wlVyVG61SMONxzLUB3+dKJhTOl1TzKcSq09RHA7CSg0clf0WZpqM1fqUmCI7O2A6YsjgsRopaKy1ST+NPfRzwvyDI0gjlmcZcJ8H0+stUDladbqleGc0MCtVpUGCeYGMyAznpHBVPSEqN6m2cuRbWEFXBeYE5j8fym6evSlZ8BiqMy22sGudWk4h36EoQteLTJ8F2Zmiwjovzsi4crJks7Fjk2ow1Vr2pYjovGixk/DhUyAvqYk2uqMtlZ2k9DSmNdrAgkx5YeDhZWMEyha0L8ogmaV/T1Zmldkj1cAcLwQqPix+tXoEdUq9iWa/UnbU/MFF2dgdunrAjacI82YL4WBG1/ulE5SE6pnQvZ1SBHWWK1QPRadhNLOrNRiJak4hquqPiCBePi3SxS0oeYhS6QWdCKJd2UlAqllJ2dBcr+p4LXhxrW3hYArHEGUX2sG6ApTFfJAffZPiKh79yc90Mi57DEjYv42iWr7qYYRWqr+FtlUKioq08P3wsIapTVFWkmWDZRh0jSJh6z2MPYRcpFAgf23ez+hHx0lOdpFJVrFBi00Wd4ruiKGr7hFmxmZIu9EOIRNULUvsJPdQul57HY715NMw+sFNuNn28hqVOqhnmld5Y0JOK8irXXMIm/kWsKs+nIYaJE9FhHp1fXKzaTYzRvlhEH1FhVVW0j+EULxeYK1iS4+OxysdY34ol6kglzeujaRzlpp9tI+VYd91POcrp2XdiVZH1ISi+JkxKnIZW6THdJ1SWRL56lN6IBU4MXq7CBy5VmVzYzrZVw5ebTlOer59wUn1EyqWIdGUQMFIE2H548NS9vfX+fxDv1cPZ2wwf6SF/j/8FGAABeW08PYr0bgAAAABJRU5ErkJggg==');
background-size: cover;
background-repeat: no-repeat;
border-radius: 25px;
box-shadow: inset 0px 0px 2px rgba(255,255,255,.7);
transition: background-image .7s ease-in-out;
outline: none;
cursor: pointer;
overflow: hidden;
}
.switch:checked{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAA6CAMAAABlAVBFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY3OUY1MUE3Q0YzMjExRTlBQUJDRkRFOTI3MkRGNkU2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY3OUY1MUE4Q0YzMjExRTlBQUJDRkRFOTI3MkRGNkU2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Rjc5RjUxQTVDRjMyMTFFOUFBQkNGREU5MjcyREY2RTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Rjc5RjUxQTZDRjMyMTFFOUFBQkNGREU5MjcyREY2RTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4h2tk8AAAAYFBMVEVJSnC1sNeVjLDp4/Lo0enTx+bV3fPJ2/T67fb16fR2dJnjzeb98vnAut7LwuNoapHw5vO92fVlZIqGf6Q/QGhhXoM5O2JXVXp1bpPf4PJxaYx8eJ7u2e5ub5bdzury3/CZPgbIAAAE/0lEQVR42syWi3asKgyG0WqP4vWAyHS8vf9b7iSgIjrWWe3ey3+1FSEkHwlg2f+3FLsp1n+31F2xPu9I9ck+byn2dUeqL/Z1S90V6+OOVB/s45a6K1Z9R6qa1fdTmtYsvR1VAlwsvZnq/CMo89thJXkQBh8suRtVHATByJJbKc2joCiC8mZYeVqQ9li5/w76Z1R5XJQolvtK/Pc0SdaRJHf+vB/1fIl5PpYxiaXTBIFzOptTFPV91E9TiixpMk1TH2VZFkEj7ac98rv6bv4Uj0YsIvWRFTDQr+2hJjXAdkLkHoR/pnpC2DSd6vSEY3IGE5jf97413p60c9KktlBjxBagE4GNsX413gPfERTkGkZrqn69ROpX1rrvnbSMK9YFKsf8jH3Zg7PSOdMRbYbVFDpgx8AmidzeNQwUsR/HbCnTYbxsnCse7wycLqz3lGyosnUsc3cE0WRbJg9radEJOAAzA7NGx7cZ2qwgWsuZZtnO0Wm63SgsgIuiKKh9SBbvNGY2oAXecKF62MTbqtGQ631FtLXy4rCQFKCKGAOVLtgYlzusEk3Amb1jytgrR2blJwPNyzKe2zQP/JcjzvbiWCwrTB1OQDIMFpcvREabtxXnWIt1vLpdXIxeIA/LoKENLOUQyiasgP8+YrPCJdoZVxRvlvSdDrAAjGbOW31rX1C5rRnQBUuUOLuIdUUslFKG0geDaiIAfszLBQ9+g/AouxSzKM+4yuI9LGm1CSW3jIt2/MY2IKyihIvvJdVbAqzOyANbAVbuFX5rLC0ZlhTOpy3rpqhvUsUzFuedn4WF1M+n5Jx7XDBaFGFHfKtzkD2G71EVAeseRhBIugpxAJO4E43wfTfN7ySeBCcEMMXv1bAMpGT8afSQHoIZWDo7uTB20M/lK3V4+y0x4EBkcfZWqjDp7PGcuWYG/jD+bfeDersHvGMTfsBSvMaSHXcqabiK4CIS2Et0zZ5ikXpgRjp4YmI626koj0+F7ScwyYciU4zfzQfGFfaHGMAKrufgW5kl4I7mCMGeahVhCdMyTxTazS+CC9vk2Me7Y/FHGKxc15ggT7BljUfJhIMFYbjQ8NRCPp3Ojmvbnp9KV4PWmNYXGrgMiqtM9NmQfFgTzpR2NHTcvAvu9D6k0DspNFRwsbxSVYXFJSYkqqphcOZ2WyyBlVmCzqq4fqHqBIsPwFUcoiwt/HB0FTB5U7dYTHSKmRbTF8QEHwZcZgd/hr3Enst02JMXwiTMky/AAoJVutq8fi/iqgYo8nAkwZ1CmrOGBePmWxsK4UOZxVVii8XepGoU+FHYOMYahDA73+whYEKSqsKbBxZTbWCQB5DhVb8N4kmBK9ZQnjk6tb4dqS4cKvzecrpgqr2GSplJA7LgGRc/g2oUFBCwGviBPUp5UMrjEsACv4dEhgpybVqsbUAAKcD3D4Srsx7AJeRKQ6O6LFoA123T4lpogeipGtTPsJq2dV7EIJoWH2cUzqtW+NB2aiX07Ahvgua31GpYb4tFqMQhjN6OwBogMQJX1lLS22Wt7FexuDJrxesCwiLDAB+yefNDcGxrC9kCkBh0a1HcxP8mFpTC7Nm21fi1EnS+IAd0CCiTlB5zmVBimxfhfxfL+LJoDRMDVaZldCdhWqDO8GwZnkvC2uxNF6v5a4LopjIt00KZLjj8qiVU1Z4u8Gc31+mtptXcgv3WmK8Iv/R5038EGAAw16U7aBao4wAAAABJRU5ErkJggg==');
background-size: cover;
transition: background-image 1s ease-in-out;
}
.switch:after{
content: '';
width: 46px;
height:46px;
border-radius: 50%;
background-color: #fff;
position: absolute;
left: 2px;
top: 2px;
transform: translateX(0px);
animation: off .7s forwards cubic-bezier(.8, .5, .2, 1.4);
box-shadow: inset 5px -5px 4px rgba(53, 53, 53, 0.3);
}

@keyframes off{
0%{
    transform: translateX(80px);
    width: 46px;
}
50%{
    width: 75px;  
    border-radius: 25px;   
}
100%{
    transform: translateX(0px); 
    width: 46px;
}
}
.switch:checked:after{
animation: on .7s forwards cubic-bezier(.8, .5, .2, 1.4);
box-shadow: inset -5px -5px 4px rgba(53, 53, 53, 0.3);
}

@keyframes on{
0%{
    transform: translateX(0px);
    width: 46px;
}
50%{
    width: 75px;  
    border-radius: 25px;   
}
100%{
    transform: translateX(80px); 
    width: 46px;
}
}
.switch:checked:before{
content: '';
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
left: 15px;
top: 5px;
transform-origin: 53px 10px;
background-color: transparent;
box-shadow: 5px -1px 0px #fff;
filter: blur(0px);
animation: sun .7s forwards ease;
}
@keyframes sun{
0%{
    transform: rotate(170deg);
    background-color: transparent;
    box-shadow: 5px -1px 0px #fff;
    filter: blur(0px);
}
50%{
    background-color: transparent;
    box-shadow: 5px -1px 0px #fff;
    filter: blur(0px);
}
90%{
    background-color: #f5daaa;
    box-shadow: 0px 0px 10px #f5deb4,
    0px 0px 20px #f5deb4,
    0px 0px 30px #f5deb4,
     inset 0px 0px 2px #efd3a3;
     filter: blur(1px);
}
100%{
    transform: rotate(0deg);
    background-color: #f5daaa;
    box-shadow: 0px 0px 10px #f5deb4,
    0px 0px 20px #f5deb4,
    0px 0px 30px #f5deb4,
     inset 0px 0px 2px #efd3a3;
     filter: blur(1px);
}
}
.switch:before{
content: '';
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
left: 15px;
top: 5px;
filter: blur(1px);
background-color: #f5daaa;
box-shadow: 0px 0px 10px #f5deb4,
0px 0px 20px #f5deb4,
0px 0px 30px #f5deb4,
 inset 0px 0px 2px #efd3a3;
 transform-origin: 53px 10px;
 animation: moon .7s forwards ease;
}
@keyframes moon{
0%{
    transform: rotate(0deg);
    filter: blur(1px);
}
50%{
    filter: blur(1px);
}
90%{
    background-color: transparent;
    box-shadow: 5px -1px 0px #fff;
    filter: blur(0px);

}
100%{
    transform: rotate(170deg);
    background-color: transparent;
    box-shadow: 5px -1px 0px #fff;
    filter: blur(0px);
}
}

夜间.png
夜间.png

白日.png
白日.png

最后更新:9小时前
文章分享
切换按钮
折叠评论
评论 暂无评论

评论列表暂无评论