HTMLCSS:酷炫的3D开关控件

ops/2024/12/22 19:47:06/

这段代码创建了一个具有 3D 效果的开关控件,当用户点击滑块时,滑块会移动到开关的另一侧,同时改变背景颜色,模拟开关的开启和关闭状态。动画效果增加了页面的互动性和视觉吸引力。

演示效果

在这里插入图片描述

HTML&CSS

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>前端Hardy</title><style>css">body {background-color: #212121;display: flex;align-items: center;justify-content: center;width: 100%;height: 100vh;}.switch {font-size: 17px;position: relative;display: inline-block;width: 3.5em;height: 2em;transform-style: preserve-3d;perspective: 500px;animation: toggle__animation 3s infinite;}.switch::before {content: "";position: absolute;width: 100%;height: 100%;left: 0;top: 0;filter: blur(20px);z-index: -1;border-radius: 50px;background-color: #d8ff99;background-image: radial-gradient(at 21% 46%, hsla(183, 65%, 60%, 1) 0px, transparent 50%),radial-gradient(at 23% 25%, hsla(359, 74%, 70%, 1) 0px, transparent 50%),radial-gradient(at 20% 1%, hsla(267, 83%, 75%, 1) 0px, transparent 50%),radial-gradient(at 86% 87%, hsla(204, 69%, 68%, 1) 0px, transparent 50%),radial-gradient(at 99% 41%, hsla(171, 72%, 77%, 1) 0px, transparent 50%),radial-gradient(at 55% 24%, hsla(138, 60%, 62%, 1) 0px, transparent 50%);}.switch input {opacity: 0;width: 0;height: 0;}.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #fdfefedc;transition: .4s;border-radius: 30px;}.slider:before {position: absolute;content: "";height: 1.4em;width: 1.4em;left: 0.3em;bottom: 0.35em;transition: .4s;border-radius: 50%;box-shadow: rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset,rgba(0, 0, 0, 0.09) 0px -1px 15px -8px;background-color: #ff99fd;background-image: radial-gradient(at 81% 39%, hsla(327, 79%, 79%, 1) 0px, transparent 50%),radial-gradient(at 11% 72%, hsla(264, 64%, 79%, 1) 0px, transparent 50%),radial-gradient(at 23% 20%, hsla(75, 98%, 71%, 1) 0px, transparent 50%);}.input__check:checked+.slider {background-color: #17202A;}.input__check:checked+.slider:before {transform: translateX(1.5em);}@keyframes toggle__animation {0%,100% {transform: translateY(-10px) rotateX(15deg) rotateY(-20deg);}50% {transform: translateY(0px) rotateX(15deg) rotateY(-20deg);}}</style>
</head><body><label class="switch"><input type="checkbox" class="inputcheck"><span class="slider"></span></label></body></html>

HTML 结构

  • switch:定义了一个包含开关控件的标签元素,这个标签被赋予了一个类名 switch,用于应用 CSS 样式。
  • inputcheck:一个复选框输入元素,用于控制开关的状态。它被赋予了一个类名 inputcheck。
  • slider:一个 span 元素,用于作为开关的滑块(slider),它被赋予了一个类名 slider。

CSS 样式

  • .switch:定义了开关的基本样式,包括字体大小、位置、尺寸、3D 转换样式和动画。
  • .switch::before:使用伪元素为开关创建一个模糊的背景,增加了视觉效果。
  • .switch input:将复选框的透明度设置为 0,使其不可见,因为它的功能由开关的滑块控制。
  • .slider:定义了滑块的位置、光标样式、尺寸、背景颜色、过渡效果和圆角。
  • .slider:before:使用伪元素为滑块创建一个圆形的前置图形,用于显示滑块的位置。
  • .input__check:checked+.slider:当复选框被选中时,改变滑块的背景颜色。
  • .input__check:checked+.slider:before:当复选框被选中时,改变滑块前置图形的位置,使其移动到开关的另一侧。
  • @keyframes toggle__animation:定义了一个关键帧动画,用于在页面加载时给开关添加一个动态的 3D 效果。

http://www.ppmy.cn/ops/144108.html

相关文章

高效SQL优化技巧:解决常见性能问题的实战方案

目录 一. 问题&#xff1a;查询性能慢——全表扫描 二. 问题&#xff1a;查询过慢——不必要的排序 三. 问题&#xff1a;多表连接查询慢——连接条件不正确 四. 问题&#xff1a;查询包含 DISTINCT 时执行慢 五. 问题&#xff1a;查询中使用 LIKE 操作符性能差 六. 问题…

怎么在Windows上远程控制Mac电脑?

远程看看&#xff08;AnyViewer&#xff09;Mac版是一款免费的远程桌面软件&#xff0c;支持Windows、macOS、iOS和Android系统。通过远程看看&#xff0c;您可以轻松实现Windows远程控制Mac电脑。此软件采用了端到端的ECC非对称加密技术&#xff0c;保障了在远程连接过程中的隐…

【渗透测试】|brupsuit的使用

一、 1.1爆破模块&#xff1a; 1、将拦截发送到intruder模块 2、在intruder模块设置pyaload位置 3、选择攻击类型 4、 5、设置好攻击类型和payload集就可以点击开始攻击&#xff0c;点击后弹出具体攻击详情 6、【payloads】模块相关 6.1 payload集为【简单列表】 添加&…

【面试问题】JIT 是什么?和 JVM 什么关系?

JIT 是什么&#xff1a; JIT指即时编译器&#xff0c;是Java虚拟机&#xff08;JVM&#xff09;的一项核心技术。JIT编译器在程序运行时将字节码动态地编译成本地机器码&#xff0c;以提高Java应用程序的执行速度。JIT编译器会针对频繁执行的热点代码进行优化编译&#xff0c;…

后台管理系统权限功能菜单和按钮权限如何实现的

发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【宝藏入口】。 在后台管理系统中&#xff0c;权限控制是一个关键的组成部分&#xff0c;涉及功能菜单权限和按钮权限两个方面。通过合理的权限控…

在 Ubuntu 上安装 Muduo 网络库的详细指南

在 Ubuntu 上安装 Muduo 网络库的详细指南 首先一份好的安装教程是非常重要的 C muduo网络库知识分享01 - Linux平台下muduo网络库源码编译安装-CSDN博客 像这篇文章就和shit一样&#xff0c;安装到2%一定会卡住&#xff0c;如果你不幸用了这个那真是遭老罪了 环境&#xf…

时间序列异常值处理方法

文章目录 一、删除法二、替换法三、插值法四、滑动窗口五、基于模型的替换 时间序列相关参考文章&#xff1a; 时间序列预测算法—ARIMA 时间序列预测算法—Prophet 时间序列分类任务—tsfresh python时间序列处理 有季节效应的非平稳序列分析 时间序列异常值检测方法 时间序列…

前端图表与数据可视化 - 2024 年实战与面试重点

前端图表与数据可视化 - 2024 年实战与面试重点 目录 前言前端数据可视化概述常用数据可视化库对比 3.1 D3.js3.2 ECharts3.3 Chart.js3.4 AntV 数据可视化中的实战技巧 4.1 如何选择合适的图表类型4.2 数据清洗与格式化4.3 响应式图表布局与交互 实战&#xff1a;构建实时数据…