JavaScript网页背景暗色和亮色开关切换

JavaScript网页背景暗色和亮色开关切换源码下载

看看谁在用

查看文件结构

文件大小:0.00M

资源分类: 插件-背景和布局

更新时间: 2020-11-30

js实现网页背景暗色和亮色开关切换。
开关按钮是checkbox,用css样式美化
input[type=checkbox]{
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  width: 52px;
  height: 27px;
  background: grey;
  float: right;
  border-radius: 100px;
  position: relative;
}

label::after{
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 90px;
  transition: 0.3s;
}

input:checked + label {
  background-color: var(--color-headings);
}

input:checked + label::after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

label:active:after {
  width: 45px;
}

JavaScript网页背景暗色和亮色开关切换

正在加载文件目录...

也许你还喜欢

  1. CSS3样式iOS开关切换按钮
  2. reactjs开关切换白天夜晚背景
  3. css3炫酷3d表单分步填写
  4. js根据小图切换背景样式
  5. jQuery改变网页背景颜色切换
  6. jQuery改变网页背景颜色切换的方法
js轻量级的弹出层插件jPopup
  • 标签查找|关于我们|格式化工具|bootstrapmb.com 版权所有 苏ICP备17077179号-2