分享一个霓虹灯拨动开关

先看效果：
在这里插入图片描述
再看代码（查看更多）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title> 霓虹灯拨动开关</title><style>* {border: 0;box-sizing: border-box;margin: 0;padding: 0;}:root {--hue: 223;--off-hue: 3;--on-hue1: 123;--on-hue2: 168;--fg: hsl(var(--hue),10%,90%);--primary: hsl(var(--hue),90%,50%);--trans-dur: 0.6s;--trans-timing: cubic-bezier(0.65,0,0.35,1);font-size: calc(40px + (60 - 40) * (100vw - 320px) / (2560 - 320));}body,input {font: 1em/1.5 sans-serif;}body {background-image: linear-gradient(45deg,hsl(var(--hue),10%,20%), hsl(var(--hue),10%,10%));color: var(--fg);display: flex;height: 100vh;transition:background-color var(--trans-dur),color var(--trans-dur);}.switch,.switch__input {-webkit-tap-highlight-color: #0000;}.switch {display: block;margin: auto;position: relative;width: 5em;height: 3em;}.switch__base-outer,.switch__base-inner {display: block;position: absolute;}.switch__base-outer {border-radius: 1.25em;box-shadow:-0.125em -0.125em 0.25em hsl(var(--hue),10%,30%),0.125em 0.125em 0.125em hsl(var(--hue),10%,30%) inset,0.125em 0.125em 0.25em hsl(0,0%,0%),-0.125em -0.125em 0.125em hsl(var(--hue),10%,5%) inset;top: 0.125em;left: 0.125em;width: 4.75em;height: 2.75em;}.switch__base-inner {border-radius: 1.125em;box-shadow:-0.25em -0.25em 0.25em hsl(var(--hue),10%,30%) inset,0.0625em 0.0625em 0.125em hsla(var(--hue),10%,30%),0.125em 0.25em 0.25em hsl(var(--hue),10%,5%) inset,-0.0625em -0.0625em 0.125em hsla(var(--hue),10%,5%);top: 0.375em;left: 0.375em;width: 4.25em;height: 2.25em;}.switch__base-neon {display: block;overflow: visible;position: absolute;top: 0;left: 0;width: 100%;height: auto;}.switch__base-neon path {stroke-dasharray: 0 104.26 0;transition: stroke-dasharray var(--trans-dur) var(--trans-timing);}.switch__input {outline: transparent;position: relative;width: 100%;height: 100%;-webkit-appearance: none;appearance: none;}.switch__input:before {border-radius: 0.125em;box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,0);content: "";display: block;position: absolute;inset: -0.125em;transition: box-shadow 0.15s linear;}.switch__input:focus-visible:before {box-shadow: 0 0 0 0.125em var(--primary);}.switch__knob,.switch__knob-container {border-radius: 1em;display: block;position: absolute;}.switch__knob {background-color: hsl(var(--hue),10%,15%);background-image:radial-gradient(88% 88% at 50% 50%,hsl(var(--hue),10%,20%) 47%,hsla(var(--hue),10%,20%,0) 50%),radial-gradient(88% 88% at 47% 47%,hsl(var(--hue),10%,85%) 45%,hsla(var(--hue),10%,85%,0) 50%),radial-gradient(65% 70% at 40% 60%,hsl(var(--hue),10%,20%) 46%,hsla(var(--hue),10%,20%,0) 50%);box-shadow:-0.0625em -0.0625em 0.0625em hsl(var(--hue),10%,15%) inset,-0.125em -0.125em 0.0625em hsl(var(--hue),10%,5%) inset,0.75em 0.25em 0.125em hsla(0,0%,0%,0.8);width: 2em;height: 2em;transition: transform var(--trans-dur) var(--trans-timing);}.switch__knob-container {overflow: hidden;top: 0.5em;left: 0.5em;width: 4em;height: 2em;}.switch__knob-neon {display: block;width: 2em;height: auto;}.switch__knob-neon circle {opacity: 0;stroke-dasharray: 0 90.32 0 54.19;transition:opacity var(--trans-dur) steps(1,end),stroke-dasharray var(--trans-dur) var(--trans-timing);}.switch__knob-shadow {border-radius: 50%;box-shadow: 0.125em 0.125em 0.125em hsla(0,0%,0%,0.9);display: block;position: absolute;top: 0.5em;left: 0.5em;width: 2em;height: 2em;transition: transform var(--trans-dur) var(--trans-timing);}.switch__led {background-color: hsl(var(--off-hue),90%,70%);border-radius: 50%;box-shadow:0 -0.0625em 0.0625em hsl(var(--off-hue),90%,40%) inset,0 0 0.125em hsla(var(--off-hue),90%,70%,0.3),0 0 0.125em hsla(var(--off-hue),90%,70%,0.3),0.125em 0.125em 0.125em hsla(0,0%,0%,0.5);display: block;position: absolute;top: 0;left: 0;width: 0.25em;height: 0.25em;transition:background-color var(--trans-dur) var(--trans-timing),box-shadow var(--trans-dur) var(--trans-timing);}.switch__text {overflow: hidden;position: absolute;width: 1px;height: 1px;}.switch__input:checked ~ .switch__led {background-color: hsl(var(--on-hue1),90%,70%);box-shadow:0 -0.0625em 0.0625em hsl(var(--on-hue1),90%,40%) inset,0 -0.125em 0.125em hsla(var(--on-hue1),90%,70%,0.3),0 0.125em 0.125em hsla(var(--on-hue1),90%,70%,0.3),0.125em 0.125em 0.125em hsla(0,0%,0%,0.5);}.switch__input:checked ~ .switch__base-neon path {stroke-dasharray: 52.13 0 52.13;}.switch__input:checked ~ .switch__knob-shadow,.switch__input:checked ~ .switch__knob-container .switch__knob {transform: translateX(100%);}.switch__input:checked ~ .switch__knob-container .switch__knob-neon circle {opacity: 1;stroke-dasharray: 45.16 0 45.16 54.19;transition-timing-function: steps(1,start), var(--trans-timing);}</style>
</head>
<body>
<label class="switch"><input class="switch__input" type="checkbox" role="switch"><span class="switch__base-outer"></span><span class="switch__base-inner"></span><svg class="switch__base-neon" viewBox="0 0 40 24" width="40px" height="24px"><defs><filter id="switch-glow"><feGaussianBlur result="coloredBlur" stddeviation="1"></feGaussianBlur><feMerge><feMergeNode in="coloredBlur"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><linearGradient id="switch-gradient1" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="hsl(var(--on-hue1),90%,70%)" /><stop offset="100%" stop-color="hsl(var(--on-hue2),90%,70%)" /></linearGradient><linearGradient id="switch-gradient2" x1="0.7" y1="0" x2="0.3" y2="1"><stop offset="25%" stop-color="hsla(var(--on-hue1),90%,70%,0)" /><stop offset="50%" stop-color="hsla(var(--on-hue1),90%,70%,0.3)" /><stop offset="100%" stop-color="hsla(var(--on-hue2),90%,70%,0.3)" /></linearGradient></defs><path fill="none" filter="url(#switch-glow)" stroke="url(#switch-gradient1)" stroke-width="1" stroke-dasharray="0 104.26 0" stroke-dashoffset="0.01" stroke-linecap="round" d="m.5,12C.5,5.649,5.649.5,12,.5h16c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5H12C5.649,23.5.5,18.351.5,12Z"/></svg><span class="switch__knob-shadow"></span><span class="switch__knob-container"><span class="switch__knob"><svg class="switch__knob-neon" viewBox="0 0 48 48" width="48px" height="48px"><circle fill="none" stroke="url(#switch-gradient2)" stroke-dasharray="0 90.32 0 54.19" stroke-linecap="round" stroke-width="1" r="23" cx="24" cy="24" transform="rotate(-112.5,24,24)" /></svg></span></span><span class="switch__led"></span><span class="switch__text">Power</span>
</label>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

WSL安装

WSL安装

WSL安装 1.Microsoft store 安装 1.1 启动WSL功能 在【程序和功能 -> 启用或关闭 Windows 功能】中勾选【适用于 Linux 的 Windows 子系统】 1.2 Store中下载安装 在 Microsoft Store 中下载并安装需要的 Linux 发行版 2.不使用Store安装WSL 注&#xff1a;1.1也要…
阅读更多...
激活函数总结（一）：ReLU及其变体

激活函数总结（一）：ReLU及其变体

激活函数介绍&#xff08;一&#xff09; 1 引言2 常用激活函数介绍2.1 Sigmoid激活函数2.2 Tanh激活函数2.3 ReLU激活函数2.4 Leaky ReLU激活函数2.5 Parametric ReLU&#xff08;PReLU&#xff09;激活函数2.6 Swish激活函数 3. 总结 介绍的激活函数都在目录中有所展示&#…
阅读更多...
SQL运维-读写分离

SQL运维-读写分离

阅读更多...
Flutter编译一直显示Running Gradle task ‘assembleDebug‘

Flutter编译一直显示Running Gradle task ‘assembleDebug‘

&#x1f525; 目前开发的Android Studio版本 &#x1f525; &#x1f525; 当前Flutter SDK 版本 &#x1f525; Flutter 3.10.6 • channel stable • https://github.com/flutter/flutter.git Framework • revision f468f3366c (3 周前) • 2023-07-12 15:19:05 -0700 Eng…
阅读更多...
用户权限提升Sudo

用户权限提升Sudo

目录 前言 一、su的用法 二、sudo提权 总结 前言 sudo是linux系统管理指令&#xff0c;是允许系统管理员让普通用户执行一些或者全部的root命令的一个工具&#xff0c;如halt&#xff0c;reboot&#xff0c;su等等。换句话说通过此命令可以让非root的用户运行只有root才有权限…
阅读更多...
XML（eXtensible Markup Language）

XML（eXtensible Markup Language）

目录 为什么需要XML? 一 XML语法 1.文档声明 2.元素 语法: 3.属性 4.注释 5.CDATA节 二 树结构 三 转义字符 四 DOM4J 1.XML解析技术 2.dom4j介绍 3.dom4j基本使用 XML 指可扩展标记语言&#xff08;eXtensible Markup Language&#xff09;。 XML 被设计用来传…
阅读更多...
Killing LeetCode [83] 删除排序链表中的重复元素

Killing LeetCode [83] 删除排序链表中的重复元素

Description 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 Intro Ref Link&#xff1a;https://leetcode.cn/problems/remove-duplicates-from-sorted-list/ Difficulty&#xff1a;Easy Tag&am…
阅读更多...
全面讲解最小二乘法

全面讲解最小二乘法

常见的最小二乘法我们就不多说了&#xff0c;下面主要介绍一下最小二乘法的一些先进方法。 正则化的最小二乘法 在使用常见的最小二乘法进行回归分析时&#xff0c;常常会遇到过拟合的问题&#xff0c;也就是在训练数据集上表现的很好&#xff0c;但是在测试数据集上表现的很…
阅读更多...
64位交叉编译器版本切换

64位交叉编译器版本切换

操作系统版本 lkmaoubuntu:~$ cat /proc/version Linux version 5.6.18 (lkmaoubuntu) (gcc version 7.5.0 (Ubuntu 7.5.0-3ubuntu1~18.04)) #1 SMP Tue Jul 25 23:11:17 PDT 2023 lkmaoubuntu:~$ 64位 安装默认版本和gcc5版本。 sudo apt-get install gcc-aarch64-linux-g…
阅读更多...
无涯教程-Perl - if...elsif...else语句函数

无涯教程-Perl - if...elsif...else语句函数

if 语句后可以跟可选的 elsif ... else 语句&#xff0c;这对于使用单个if ... elsif语句测试各种条件非常有用。 if...elsif...else - 语法 Perl编程语言中的 if ... elsif...else语句的语法是- if(boolean_expression 1) {# Executes when the boolean expression 1 is tr…
阅读更多...
JavaScript 一段代码快速入门

JavaScript 一段代码快速入门

仅记录了和c有所不同之处&#xff0c;其余类似。 一段简单代码 // 关注点分离&#xff0c;指html页面设计和javascript页面行为分离// 对象&#xff0c;键值对形式 const user {name: "gyf",age: 20,jobs: ["front-end", "engineer", 2, true…
阅读更多...
智能卡通用安全检测指南 思度文库

智能卡通用安全检测指南 思度文库

范围 本标准规定了智能卡类产品进行安全性检测的一般性过程和方法。 本标准适用于智能卡安全性检测评估和认证。 规范性引用文件 下列文件对于本文件的应用是必不可少的。凡是注日期的引用文件&#xff0c;仅注日期的版本适用于本文件。凡是不注日期的引用文件&#xff0c;…
阅读更多...
STM32 CubeMX USB_CDC(USB_转串口)

STM32 CubeMX USB_CDC(USB_转串口)

STM32 CubeMX STM32 CubeMX 定时器&#xff08;普通模式和PWM模式&#xff09; STM32 CubeMX一、STM32 CubeMX 设置USB时钟设置USB使能UBS功能选择 二、代码部分添加代码实验效果 ![请添加图片描述](https://img-blog.csdnimg.cn/a7333bba478441ab950a66fc63f204fb.png)printf发…
阅读更多...
Python自动化实战之使用Pytest进行API测试详解

Python自动化实战之使用Pytest进行API测试详解

概要 每次手动测试API都需要重复输入相同的数据&#xff0c;而且还需要跑多个测试用例&#xff0c;十分繁琐和无聊。那么&#xff0c;有没有一种方法可以让你更高效地测试API呢&#xff1f;Pytest自动化测试&#xff01;今天&#xff0c;小编将向你介绍如何使用Pytest进行API自…
阅读更多...
【二】SPI IP核的使用

【二】SPI IP核的使用

【一】SPI IP核使用&#xff1a;传送门 基于qsys通过spi外部总线协议对sd卡进行读写操作 一、实验平台与实验的目的&#xff1a; ​ 正点原子开拓者、芯片型号&#xff1a;EP4CE10F17C8&#xff1b;还需要一张sd卡。 ​ 该实验主要是利用SPI IP核驱动SD卡来实现读写实验&am…
阅读更多...
一文学透设计模式

一文学透设计模式

设计模式是什么&#xff1f; 设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案&#xff0c;代表了解决一些问题的最佳实践。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。 说白了&#xff0c;设计模式对于软件开发人员来说就…
阅读更多...
K8S系列文章 之 容器网络基础 Docker0

K8S系列文章 之 容器网络基础 Docker0

什么是Docker0 使用ip addr命令看一下网卡&#xff1a; rootKitDevVps:~# ip addr 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00inet 127.0.0.1/8 scope host…
阅读更多...
优维低代码实践：对接数据

优维低代码实践：对接数据

优维低代码技术专栏&#xff0c;是一个全新的、技术为主的专栏&#xff0c;由优维技术委员会成员执笔&#xff0c;基于优维7年低代码技术研发及运维成果&#xff0c;主要介绍低代码相关的技术原理及架构逻辑&#xff0c;目的是给广大运维人提供一个技术交流与学习的平台。 优维…
阅读更多...
数据结构--单链表OJ题

数据结构--单链表OJ题

上文回顾---单链表 这章将来做一些链表的相关题目。 目录 1.移除链表元素 2.反转链表 3.链表的中间结点 4.链表中的倒数第k个结点 5.合并两个有序链表 6.链表分割 7.链表的回文结构 8.相交链表 9.环形链表 ​编辑 10.环形链表II ​编辑 ​编辑 1.移除链表元素 思…
阅读更多...
windows永久暂停更新

windows永久暂停更新

目录 1.winr,输入regedit打开注册表 2.打开注册表的这个路径: 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsUpdate\UX\Settings 右键空白地方新建QWORD值命名为:FlightSettingsMaxPauseDays 3.双击FlightSettingsMaxPauseDays,修改里面的值为100000,右边基数设置…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023