HTMLCSS:酷炫的3D开关控件

devtools/2024/12/22 13:20:47/

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

相关文章

html中实用标签dl dt dd(有些小众的标签 但是很好用)

背景描述 html <dl> <dt> <dd>是一组合标签&#xff0c;他们与ol li、ul li标签很相似 但是他却是没有默认前缀并且有缩进的标签 使用方式与table表格的标签一致 使用方式 dt和dd是放于dl标签内&#xff0c;dt与dd处于dl下相同级。就是dt不能放入dd内&am…

AI的进阶之路:从机器学习到深度学习的演变(三)

&#xff08;承接上集&#xff1a;AI的进阶之路&#xff1a;从机器学习到深度学习的演变&#xff08;二&#xff09;&#xff09; 四、深度学习&#xff08;DL&#xff09;&#xff1a;机器学习的革命性突破 深度学习&#xff08;DL&#xff09;作为机器学习的一个重要分支&am…

k8s,理解容器中namespace和cgroups的原理

一旦“程序”被执行起来&#xff0c;它就从磁盘上的二进制文件&#xff0c;变成了计算机内存中的数据、寄存器里的值、堆栈中的指令、被打开的文件&#xff0c;以及各种设备的状态信息的一个集合。像这样一个程序运行起来后的计算机执行环境的总和&#xff0c;就是我们今天的主…

如何在电脑上控制手机?

在现代生活中&#xff0c;通过电脑控制手机已经成为一种高效的工作和娱乐方式。Total Control 是一款实用的电脑端软件&#xff0c;通过USB或Wi-Fi连接&#xff0c;用户可以在电脑上直接操作多台手机,通过电脑键盘输入文字&#xff0c;提高操作效率。特别适合需要大屏操作的用户…

数据结构—图

目录 一、图的定义 二、图的基本概念和术语 2.1有向图 2.2无向图 2.3简单图 2.4多重图 2.5完全图 2.6子图 2.7连通、连通图和连通分量 2.8强连通图、强联通分量 2.9生成树&#xff0c;生成森林 2.10顶点的度、入度和出度 2.11边的权和网 2.12稠密图、稀疏图 2.1…

.net core在linux导出excel,System.Drawing.Common is not supported on this platform

使用框架 .NET7 导出组件 Aspose.Cells for .NET 5.3.1 asp.net core mvc 如果使用Aspose.Cells导出excel时&#xff0c;报错 &#xff1a; System.Drawing.Common is not supported on this platform 平台特定实现&#xff1a; 对于Windows平台&#xff0c;System.Drawing.C…

【mac 终端美化】oh my zsh

快捷的mac终端美化方法。 以下是效果图&#xff0c;比较朴素&#xff0c;但是相比默认方案会好看一些&#xff0c;也能明显查看输入的命令&#xff0c;不会和输出混在一起。 下载主题 访问网址&#xff1a;https://iterm2colorschemes.com/&#xff0c;下载网页的压缩包并解…

Qt调用adb对嵌入式设备的配置文件进行修改,写入多行内容

之前文章写过Qt调用adb命令来处理嵌入式设备的文件。 Qt开发技巧&#xff08;二十五&#xff09;列表窗体的纵向对齐&#xff0c;标签的伙伴部件设置&#xff0c;标签上的超链接操作&#xff0c;子窗体弹出时的坐标问题&#xff0c;Qt在PC端操作设备的方式&#xff0c;Qt用ADB操…