探索 HTML 和 CSS 实现的 3D 开关按钮

news2024/11/14 19:07:08

效果演示

这段代码是一个HTML和CSS的组合,用于创建一个3D风格的开关按钮(通常用于控制某些设置的开启或关闭)

HTML

<label class="switch">
  <input type="checkbox" checked="checked">
  <div class="button">
    <div class="light"></div>
    <div class="dots"></div>
    <div class="characters"></div>
    <div class="shine"></div>
    <div class="shadow"></div>
  </div>
</label>
  • switch:这是一个包裹整个开关的标签,使用switch类来应用CSS样式。
  • checkbox" checked="checked:这是一个复选框,用于控制开关的状态。checked="checked"属性表示复选框默认是选中状态。
  • button:这是开关的主要部分,包含了多个子div,每个div都有不同的类,用于创建开关的不同视觉效果。
  • light:用于创建开关点亮时的光效。
  • dots:用于创建开关上的点状纹理。
  • characters:用于创建开关上的字符或图案。
  • shine:用于创建开关上的高光效果。
  • shadow:用于创建开关上的阴影效果。

CSS

.switch {
  display: block;
  background-color: black;
  width: 150px;
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}

.switch input {
  display: none;
}

.switch input:checked + .button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;
}

.switch input:checked + .button .light {
  animation: flicker 0.2s infinite 0.3s;
}

.switch input:checked + .button .shine {
  opacity: 1;
}

.switch input:checked + .button .shadow {
  opacity: 0;
}

.switch .button {
  display: block;
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -20px;
  transform: translateZ(20px) rotateX(-25deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  height: 100%;
  position: relative;
  cursor: pointer;
  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
  background-repeat: no-repeat;
}

.switch .button::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
  background-repeat: no-repeat;
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;
}

.switch .button::after {
  content: "";
  background-image: linear-gradient(#650000, #320000);
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: translateY(50px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}

.switch .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}

.switch .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 10px 10px;
}

.switch .characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
  background-repeat: no-repeat;
}

.switch .shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
  background-repeat: no-repeat;
}

.switch .shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

@keyframes light-off {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0;
  }
}
  • .switch:定义了开关的整体样式,包括背景颜色、尺寸、阴影效果、边框圆角等。
  • .switch input:隐藏了复选框,因为我们只想要视觉样式,不想要默认的复选框样式。
  • .switch input:checked + .button:当复选框被选中时,改变按钮的3D变换和阴影效果,使其看起来像是被按下。
  • .switch .button:定义了按钮的基本样式,包括3D变换、背景渐变等。
  • .switch .button::before 和 .switch .button::after:使用伪元素来创建按钮顶部和底部的渐变效果。
  • .switch .light、.switch .dots、.switch .characters、.switch .shine、.switch .shadow:定义了按钮内部不同视觉效果的样式。
  • @keyframes flicker 和 @keyframes light-off:定义了动画效果,用于模拟灯光的闪烁和关闭。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2238387.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

车载诊断架构---NRC 78和NRC 21那些你不知道的事情!

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

【计算机基础——数据结构——红黑树】

1. 红黑树&#xff08;RBTree&#xff09; 为什么HashMap不直接使用AVL树&#xff0c;而是选择了红黑树呢&#xff1f; 由于AVL树必须保证左右子树平衡&#xff0c;Max(最大树高-最小树高) < 1&#xff0c;所以在插入的时候很容易出现不平衡的情况&#xff0c;一旦这样&…

linux物理内存管理:node,zone,page

一、总览 对于物理内存内存&#xff0c;linux对内存的组织逻辑从上到下依次是&#xff1a;node&#xff0c;zone&#xff0c;page&#xff0c;这些page是根据buddy分配算法组织的&#xff0c;看下面两张图&#xff1a; 上面的概念做下简单的介绍&#xff1a; Node&#xff1a…

CKA认证 | 使用kubeadm部署K8s集群(v1.26)

一、前置知识点 1.1 生产环境可部署Kubernetes集群的两种方式 目前生产部署Kubernetes集群主要有两种方式&#xff1a; ① kubeadm Kubeadm是一个K8s部署工具&#xff0c;提供kubeadm init和kubeadm join&#xff0c;用于快速部署Kubernetes集群。 ② 二进制包 从github下…

如何安装和配置JDK17

教程目录 零、引言1、新特性概览2、性能优化3、安全性增强4、其他改进5、总结 一、下载安装二、环境配置三、测试验证 零、引言 JDK 17&#xff08;Java Development Kit 17&#xff09;是Java平台的一个重要版本&#xff0c;它带来了许多新特性和改进&#xff0c;进一步提升了…

第2章2.3立项【硬件产品立项的核心内容】

硬件产品立项的核心内容 2.3 硬件产品立项的核心内容2.3.1 第一步&#xff1a;市场趋势判断2.3.2 第二步&#xff1a;竞争对手分析1.竞争对手识别2.根据竞争对手分析制定策略 2.3.3 第三步&#xff1a;客户分析2.3.4 第四步&#xff1a;产品定义2.3.5 第五步&#xff1a;开发执…

一款革命性的视频剪辑工具,AI剪辑新纪元:Clapper

如果说AI视频剪辑工具哪家强&#xff1f;还真想不出有什么让人眼前一亮的AI视频剪辑应用。 毕竟随着AI技术的发展越来越快&#xff0c;各种AI应用如雨后春笋般涌现&#xff0c;然而&#xff0c;真正能够在视频剪辑领域脱颖而出的工具却寥寥无几。 今天我要介绍的 Clapper 就是…

递归函数学习 part1

一&#xff0c;初始递归&#xff1a;阶乘 1&#xff0c;原理 n的阶乘等于n乘以n-1的阶乘&#xff0c;而0的阶乘等于1. 2&#xff0c;代码展示 #include <iostream> using namespace std;int fact(int); int main() {cout<<fact(5);return 0; }int fact(int n) …

解决程序因缺少xinput1_3.dll无法运行的有效方法,有效修复丢失xinput1_3.dll

如果你的电脑在运行某些应用程序或游戏时提示“xinput1_3.dll丢失”或“找不到xinput1_3.dll”的错误消息&#xff0c;那么很可能是因为你的系统中缺少这个重要的DLL文件而导致的问题。那么电脑出现xinput1_3.dll丢失的问题时有哪些方法进行修复呢&#xff1f; 如何确定电脑是否…

深入了解区块链:Web3的基础架构与发展

在数字时代的浪潮中&#xff0c;区块链技术正逐渐成为Web3的重要基础&#xff0c;重新定义互联网的结构和用户体验。Web3不仅是一个全新的网络阶段&#xff0c;更代表了一种去中心化的理念&#xff0c;强调用户主权和数据隐私。本文将深入探讨区块链在Web3中的基础架构、技术特…

内核tracepoint的注册回调及添加的方法

一、背景 内核开发时往往需要做一些内核态函数的监测或者内核状态的监测&#xff0c;就需要用一些调试手段来观测。常用的内核态的观测如kprobe和tracepoint&#xff0c;但是kprobe往往受制于一些系统的限制&#xff0c;很多系统并没有打开kprobe选项&#xff0c;这样我们不能…

React融合css

单纯使用tsx文件生成的页面比较单一&#xff0c;可以考虑结合css进行使用&#xff0c;需要说明的是&#xff0c;本人水平有限&#xff0c;仅对接触过的几种方式进行说明 内联样式 内联样式也有多种写法&#xff0c;此处仅列举两种比较简单的写法 写法一 import React from …

【大数据学习 | kafka高级部分】kafka中的选举机制

controller的选举 首先第一个选举就是借助于zookeeper的controller的选举 第一个就是controller的选举&#xff0c;这个选举是借助于zookeeper的独享锁实现的&#xff0c;先启动的broker会在zookeeper的/contoller节点上面增加一个broker信息&#xff0c;谁创建成功了谁就是主…

【基于PSINS工具箱】以速度为观测量的SINS/GNSS组合导航,UKF滤波

基于【PSINS工具箱】&#xff0c;提供一个MATLAB例程&#xff0c;仅以速度为观测量的SINS/GNSS组合导航&#xff08;滤波方式为UKF&#xff09; 文章目录 工具箱程序简述运行结果 代码程序讲解MATLAB 代码教程&#xff1a;使用UKF进行速度观测1. 引言与基本设置2. 初始设置3. U…

ThinkBook 14+ 2024 Ubuntu 触控板失效 驱动缺失问题解决

首先我的电脑是thinkbook14 2024&#xff0c;从ubuntu18到ubuntu24&#xff0c;笔者整个都试了一遍&#xff0c;触摸板都没反应&#xff0c;确认不是linux系统内核问题&#xff0c;原因为驱动缺失。 解决步骤&#xff1a; &#xff08;1&#xff09;下载驱动&#xff0c;网址如…

如何使用 Web Scraper API 高效采集 Facebook 用户帖子信息

目录 前言一、什么是Web Scraper API二、Web Scraper API 的优势&#xff1a;三、Web Scraper API 适用场景四、实践案例目标需求视频讲解1、选择Web Scraper API2、登录注册3、进入用户控制面板4、选择API5、触发数据收集 API6、获取爬虫结果7、分析爬虫结果&#xff08;1&…

Qt_day3_信号槽

目录 信号槽 1. 概念 2. 函数原型 3. 连接方式 3.1 自带信号 → 自带槽 3.2 自带信号 → 自定义槽 3.3 自定义信号 4. 信号槽传参 5. 对应关系 5.1 一对多 5.2 多对一 信号槽 1. 概念 之前的程序界面只能看&#xff0c;不能交互&#xff0c;信号槽可以让界面进行人机…

Elastic 通用分析:提高性能并降低成本

作者&#xff1a;来自 Elastic Luca Wintergerst•Tim Rhsen 在这篇博客中&#xff0c;我们将介绍我们的一位工程师的一项发现如何帮助我们在 QA 环境中节省数千美元的成本&#xff0c;并且一旦我们将这一变化部署到生产中&#xff0c;还可以节省更多的成本。 在当今的云服务和…

【WRF理论第十一期】检查WPS输出:geogrid和metgrid 的输出nc数据+ungrib输出WPS格式

【WRF理论第十一期】检查WPS输出&#xff1a;geogrid和metgrid输出nc数据ungrib输出WPS格式 检查WPS输出WPS 输出检查的重要性使用 NetCDF 格式查看 geogrid 和 metgrid 的输出检查和可视化数据的工具 ungrib 输出数据的格式使用 plotfmt 工具查看 ungrib 输出 参考 上一篇博客…

万字长文解读深度学习——卷积神经网络CNN

推荐阅读&#xff1a; 卷积神经网络&#xff08;CNN&#xff09;详细介绍及其原理详解 CNN笔记&#xff1a;通俗理解卷积神经网络 文章目录 &#x1f33a;深度学习面试八股汇总&#x1f33a;主要组件输入层卷积层 (Convolutional Layer)批归一化层&#xff08;Batch Normalizat…