<html lang="zh-cn">
<头>
<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中文网其他相关文章！
