HTMLCSS:酷炫的3D开关控件

embedded/2024/12/23 8:46:31/

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

相关文章

格式工厂,各类文件格式转换

今天给大家推荐一个老牌的软件格式工厂。这个软件早就能支持转换视频、音频、图片、文档等市面上主流格式的软件了&#xff0c;现在也很能打。 格式工厂 各类文件格式转换 软件无需安装&#xff0c;打开这个图标就能直接使用。 屏幕录像功能还是非常强大的&#xff0c;可以全屏…

解决vscode ssh远程连接服务器一直卡在下载 vscode server问题

目录 方法1&#xff1a;使用科学上网 方法2&#xff1a;手动下载 方法3 在使用vscode使用ssh远程连接服务器时&#xff0c;一直卡在下载"vscode 服务器"阶段&#xff0c;但MobaXterm可以正常连接服务器&#xff0c;大概率是网络问题&#xff0c;解决方法如下: 方…

Jmeter分布式测试的注意事项和常见问题

Jmeter是一款开源的性能测试工具&#xff0c;使用Jmeter进行分布式测试时&#xff0c;也需要注意一些细节和问题&#xff0c;否则可能会影响测试结果的准确性和可靠性。 Jmeter分布式测试时需要特别注意的几个方面 1. 参数化文件的位置和内容 如果使用csv文件进行参数化&…

Dash:数据可视化的未来之星

在当今这个数据驱动的时代&#xff0c;如何高效地分析和展示数据成为了各行各业共同面临的挑战。而Dash&#xff0c;作为一种强大的Python框架&#xff0c;正逐渐成为数据可视化领域的未来之星。它不仅能够将复杂的数据转化为直观、易于理解的图表和图像&#xff0c;还能够通过…

FFmpeg 4.3 音视频-多路H265监控录放C++开发二十一.3,RTCP协议, RTCP协议概述,RTCP协议详情

官方文档参考&#xff1a;RFC 3550 - RTP: A Transport Protocol for Real-Time Applications

git全教程(长期更新)

1. git安装 git下载 有Linux&#xff0c;Mac&#xff0c;Windows三种版本用于下载 我们这里以Windows为例 1.1 安装exe 安装目录最好别有中文 建议选择vim编辑器 后面直接无脑点next即可 1.2 检验安装是否完备 安装完毕之后&#xff0c;目前比较新的版本的git都会自动…

腾讯云云开发 Copilot 深度探索与实战分享

个人主页&#xff1a;♡喜欢做梦 欢迎 &#x1f44d;点赞 ➕关注 ❤️收藏 &#x1f4ac;评论 目录 一、引言 二、产品介绍 三、产品体验过程 四、整体总结 五、给开发者的复用建议 六、对 AI 辅助开发的前景展望 一、引言 在当今数字化转型加速的时代&#xff0c;…

Vscode运行GO文件

Go环境变量配置好之后 配置go mod go env -w GO111MODULEongo env -w GOPROXYhttps://goproxy.cn,directgo clean --modcache在vscode界面按键盘ctrlshiftp&#xff0c;输入Go: install/update tools&#xff0c;回车如下图&#xff0c;选择要安装的依赖&#xff08;这里全选&…