不错的白天夜晚切换模式

源码分享 · 04-23 15:22

接上次分享的"有趣可调节的暗黑模式"文章,今天再给大家分享一个挺不错的白天夜晚模式自由切换的小组件。

老样子,如果喜欢可以直接拿去食用😎!

效果展示

yjvc0423.gif

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>不错的白天夜晚切换模式 刘郎阁</title>
</head>
<body>
    <div class="toolbar-link" onclick="changeMode()">
    <label class="dark-mode ml-auto">
      <input type="checkbox" checked="false">
      <span></span>
    </label>
</div>
<style>
 body {
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f0f0f0;
    transition:all 0.3s;
}
body.is-dark {
    background:#3b3b41;
}
.toolbar-link {
    display:flex;
    justify-content:center;
    align-items:center;
    height:64px;
    width:64px;
    border-radius:9999px;
    margin:0 4px;
    transition:all .3s;
    border: 1px solid #ffb62e;
}
.toolbar-link:hover {
    background:#fff;
    border-color:#ededed;
    box-shadow:-1px 3px 10px 0 rgba(0,0,0,.06);
}
body.is-dark .toolbar-link:hover {
    background:#28282b;
}
.dark-mode {
    cursor:pointer;
    transform:translate3d(0,0,0);
    transform:scale(0.55);
}
.dark-mode input {
    display:none;
}
.dark-mode input+span {
    display:block;
    border-radius:9999px;
    width:36px;
    height:36px;
    position:relative;
    box-shadow:inset 16px -16px 0 0 #ffd22e;
    transform:scale(1) rotate(-2deg);
    transition:box-shadow .5s ease 0s,transform .4s ease .1s;
}
.dark-mode input+span::before {
    content:"";
    width:inherit;
    height:inherit;
    border-radius:inherit;
    position:absolute;
    left:0;
    top:0;
    backface-visibility:hidden;
    transition:background-color .3s ease;
}
.dark-mode input+span::after {
    content:"";
    width:8px;
    height:8px;
    border-radius:9999px;
    margin:-4px 0 0 -4px;
    position:absolute;
    top:50%;
    left:50%;
    box-shadow:0 -23px 0 #ffb62e,0 23px 0 #ffb62e,23px 0 0 #ffb62e,-23px 0 0 #ffb62e,15px 15px 0 #ffb62e,-15px 15px 0 #ffb62e,15px -15px 0 #ffb62e,-15px -15px 0 #ffb62e;
    transform:scale(0);
    transition:all .3s ease;
}
.dark-mode input:checked+span {
    box-shadow:inset 32px -32px 0 0 #ffd22e;
    transform:scale(.5) rotate(0);
    transition:transform .3s ease .1s,box-shadow .2s ease 0s;
}
.dark-mode input:checked+span::before {
    background:#ffb62e;
    backface-visibility:hidden;
    transition:background-color .3s ease .1s;
}
.dark-mode input:checked+span::after {
    transform:scale(1.5);
    transition:transform .5s ease .15s;
}
</style>
<script>

var check = document.getElementsByTagName('input')[0];

function changeMode() {
    if (check.checked) {
        document.getElementsByTagName('body')[0].className = '';
    } else {
        document.getElementsByTagName('body')[0].className = 'is-dark';
    }
}
</script>
</body>
</html>

写在最后

根据你使用的平台/主题进行微调即可。

GIF图 组件 优化 源码分享

上一篇 : 给编辑器添加字符统计功能

下一篇 : 给文章添加预计阅读时长


  1. 游龙生   访客
    04-25 21:18 第10楼 中国广东省东莞市电信Windows 10 · QQ Browser

    来学习了

  2. 老罗   Lv1
    04-25 16:02 第8楼 中国广东省移动Android · Google Chrome

    😄终于去掉了这个验证。有时候确实得点几次

    1. 刘郎   博主
      04-25 16:09 第9楼 中国贵州省移动Windows 10 · QQ Browser
      @老罗

      现在没有了😎

  3. 肖寒武   Lv1
    04-25 13:59 第6楼 中国浙江省杭州市联通Windows 10 · Google Chrome

    确实啊,每次评论都要点4,5次,严重打击评论的热情

    1. 刘郎   博主
      04-25 14:06 第7楼 中国移动iPhone · Safari
      @肖寒武

      已经去掉验证码这项功能,友友们可以愉快的玩耍了😄

  4. obaby   Lv1
    04-23 16:55 第1个脚印 中国台湾省台北市iPhone · Google Chrome

    你这个验证码我点了半分钟,离谱。改改把,真受不了
    https://ufile.io/bic9xza0

    1. 04-23 19:03 第4楼 中国广西桂林市移动Windows 10 · Google Chrome
      @obaby

      9494。严重支持换验证方式。用老罗那种:极验证。

      1. 刘郎   博主
        04-23 20:35 第5楼 中国移动iPhone · Safari
        @蜡客小生

        待考察🫣

    2. 刘郎   博主
      04-23 17:22 第3楼 中国贵州省移动iPhone · Safari
      @obaby

      消消气😳

    3. 刘郎   博主
      04-23 17:08 第2楼 中国贵州省移动iPhone · Safari
      @obaby

      感谢你的提醒😂 之前的那些验证系统不太理想所以…
      这个验证码(pc端可能)有两个页面😂,找完第一个页面的图,过2秒左右会自动出现第二个页面,然后在提交😂😂😂😂

| 黔ICP备2024020400号-1 | 萌ICP备20246777号 | | 当前有 1 人在线 |
本站已加入BLOGS·CN
yjvc.cn
博友圈 星球穿梭
开往-友链接力