HTMLCSS:酷炫的3D开关控件

news/2024/12/21 17:08:21/

这段代码创建了一个具有 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/news/1556973.html

相关文章

React 工具和库面试题(一)

1. 如何在 React 项目中使用 Hooks 从服务端获取数据&#xff1f; 在 React 中&#xff0c;我们通常使用 useEffect Hook 来进行副作用操作&#xff0c;比如从服务端获取数据&#xff0c;结合 useState 来管理数据状态。 基本步骤&#xff1a; 使用 useEffect 来执行异步操作…

BERT模型入门(2)BERT的工作原理

文章目录 如名称所示&#xff0c;BERT&#xff08;来自Transformer的双向编码器表示&#xff09;是基于Transformer模型。我们可以将BERT视为只有编码器部分的Transformer。 在上一个主题《Transformer入门》中&#xff0c;我们了解到将句子作为输入喂给Transformer的编码器&a…

MLM: 掩码语言模型的预训练任务

MLM: 掩码语言模型的预训练任务 掩码语言模型&#xff08;Masked Language Model, MLM&#xff09;是一种用于训练语言模型的预训练任务&#xff0c;其核心目标是帮助模型理解和预测语言中的上下文关系。以下是对这一概念的详细说明&#xff1a; 基本定义&#xff1a; MLM是一…

JAVA进制转换-对不同位数的转换方法

JAVA进制转换-对不同位数的转换方法 实例结果代码补叙 实例 第一个输入参数设为被转换的数值&#xff0c;第二个输入参数设为源来的位数&#xff0c;第三个输入参数设为目标的位数。 /*** 位数转换* args[0] 被转换值* args[1] 源位数* args[2] 目标位数*/public static vo…

Python 助力 DBA:高效批量管理数据库服务器的多线程解决方案-多库查询汇总工具实现

批量数据库服务器连接测试与数据汇总&#xff1a;Python实现方案 作为数据库服务器运维人员&#xff0c;我们经常需要面对大量服务器的连接测试和数据汇总工作。本文将介绍一个使用Python实现的高效解决方案&#xff0c;可以帮助我们快速完成这些任务。 需求概述 从配置文件…

阻塞队列与线程池原理

1、阻塞队列 阻塞队列&#xff1a;当队列已满的时候&#xff0c;向队列中添加元素的操作会被阻塞&#xff1b;当队列为空的时候&#xff0c;从队列中取元素的操作会被阻塞。 Java 中用 BlockingQueue 接口表示阻塞队列。BlockingQueue 接口作为 Queue 的子接口&#xff0c;主…

SQLite 命令

SQLite 命令 SQLite 是一种轻量级的数据库管理系统&#xff0c;它是一个C库&#xff0c;提供了不需要独立服务器进程的零配置数据库。SQLite 是非常受欢迎的&#xff0c;因为它简单、快速、可靠&#xff0c;并且适用于各种大小的项目。本文将详细介绍 SQLite 的常用命令和操作…

AI 在游戏领域的革命性技术

2AGI.NET | 探索 AI 无限潜力&#xff0c;2AGI 为您带来最前沿资讯。 2AGI.NET&#xff1a;AI 游戏专题 本文介绍了AI技术在游戏领域的应用及其在其他行业的技术拓展。AI虚拟小镇通过1000多个智能体模拟真实人类行为&#xff0c;准确率高达85%。这种技术不仅改变了游戏行业&…