首页 >web前端 >js教程 >使用核心 html 和核心 Css 代码切换现实幻觉

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

Patricia Arquette原创: 2024-12-05 19:12:10757浏览

Toggle Switch Realistic illusion using the core html and core Css Code

<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中文网其他相关文章！

css html webkit switch checkbox using pointer display position margin padding border viewport background transition input

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How Effective is a Simple JavaScript Function for Preloading Images in Modern Browsers?下一篇：Why Is My JavaScript Form Submission Not Working?

查看更多