不错的切换黑白主题动画特效

这篇文章最后更新于05-22 16:29前,您需要注意相关的内容是否还可用,如有疑问请联系作者!

不错的切换黑白主题动画特效
火狐截图_2021-05-22T08-27-07.565Z.png
HTML代码:

<div class="toolbar-link" onclick="changeMode()">
    <label class="dark-mode ml-auto">
      <input type="checkbox" checked="false">
      <span></span>
    </label>
</div>

CSS样式:

 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;
}

JS代码:

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

function changeMode() {
    if (check.checked) {
        document.getElementsByTagName('body')[0].className = '';
    } else {
        document.getElementsByTagName('body')[0].className = 'is-dark';
    }
}
标签: 特效 主题 动画
评论 打赏
最后编辑于:2021 年 05 月 22 日

网友评论 0 评论

评论空空如也,快来评论吧!

作者资料

寻梦xunm

博主

邮箱:1340326824@qq.com

链接:http://huue.cc/index.php/archives/187.html

网友评论

  • 溜溜测试一下
    发表于:2周前
  • ggfhjghjfghjfgjgffghjfghjfgjfghjfghjfgh
    发表于:3周前
  • 寻梦xunm等有空了重新调整一下字体大小
    发表于:2个月前
  • 城南旧事字太小了,看的难受
    发表于:2个月前
  • 123456加油
    发表于:2个月前
  • 寻梦xunm2333333333
    发表于:2个月前

其它信息

  • 文章:603
  • 分类:28
  • 评论:46
  • 页面:4

订阅信息

返回顶部