使用核心 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中文網其他相關文章！