使用核心 html 和核心 Css 代码切换现实幻觉

  
  
  <title>交互式玻璃卡</title>
  
。转变 {
  位置：相对；
  宽度：210px；
  高度：50px；
  -webkit-box-sizing：边框框；
  框大小：边框框；
  内边距：3px；
  背景：#0d0d0d；
  边框半径：6px；
  -webkit-box-shadow：
    插图 0 1px 1px 1px rgba(0, 0, 0, 0.5),
    0 1px 0 0 rgba(255, 255, 255, 0.1);
  盒子阴影：
    插图 0 1px 1px 1px rgba(0, 0, 0, 0.5),
    0 1px 0 0 rgba(255, 255, 255, 0.1);
}
.switch 输入[类型=“复选框”] {
  位置：绝对；
  z 索引：1；
  宽度：100%；
  高度：100%；
  不透明度：0；
  光标：指针；
}
.switch input[type="checkbox"] 标签 {
  位置：相对；
  显示：块；
  左：0；
  宽度：50%；
  高度：100%；
  背景：#1b1c1c；
  边框半径：3px；
  -webkit-box-shadow: 插入 0 1px 0 0 rgba(255, 255, 255, 0.1);
  框阴影：插入 0 1px 0 0 rgba(255, 255, 255, 0.1);
  -webkit-transition：全部缓入缓出 0.5 秒；
  过渡：全部 0.5 秒缓入缓出；
}
.switch input[type="checkbox"] label:before {
  内容： ””;
  显示：内联块；
  宽度：5px；
  高度：5px；
  左边距：10px；
  背景：#fff；
  边界半径：50%；
  垂直对齐：居中；
  -webkit-box-shadow：
    0 0 5px 2px rgba(165, 15, 15, 0.9),
    0 0 3px 1px rgba(165, 15, 15, 0.9);
  盒子阴影：
    0 0 5px 2px rgba(165, 15, 15, 0.9),
    0 0 3px 1px rgba(165, 15, 15, 0.9);
  -webkit-transition：全部缓入缓出 0.5 秒；
  过渡：全部 0.5 秒缓入缓出；
}
.switch input[type="checkbox"] label:after {
  内容： ””;
  显示：内联块；
  宽度：0；
  高度：100%；
  垂直对齐：居中；
}
.switch input[type="checkbox"] 标签 i {
  显示：块；
  位置：绝对；
  顶部：50%；
  左：50%；
  宽度：3px；
  高度：24px；
  顶部边距：-12px；
  左边距：-1.5px；
  边框半径：2px；
  背景：#0d0d0d；
  -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
  框阴影: 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.switch input[type="checkbox"] 标签 i:之前，
.switch input[type="checkbox"] 标签 i:after {
  内容： ””;
  显示：块；
  位置：绝对；
  宽度：100%；
  高度：100%；
  边框半径：2px；
  背景：#0d0d0d；
  -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
  框阴影: 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.switch input[type="checkbox"] 标签 i:before {
  左：-7px；
}
.switch input[type="checkbox"] 标签 i:after {
  左：7 像素；
}
.switch input[type="checkbox"]:选中标签{
  左：50%；
}
.switch input[type="checkbox"]:选中标签:之前{
  -webkit-box-shadow：
    0 0 5px 2px rgba(15, 165, 70, 0.9),
    0 0 3px 1px rgba(15, 165, 70, 0.9);
  盒子阴影：
    0 0 5px 2px rgba(15, 165, 70, 0.9),
    0 0 3px 1px rgba(15, 165, 70, 0.9);
}风格>
头>

  <div>




          </div>

            
        

以上是使用核心 html 和核心 Css 代码切换现实幻觉的详细内容。更多信息请关注PHP中文网其他相关文章！