【HTML】模拟插头连接断开动画

2024-08-23 13:04
文章标签 连接 模拟 html frontend 动画 插头 断开

本文主要是介绍【HTML】模拟插头连接断开动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

HTML结构

  • <!DOCTYPE html>: 声明文档类型为 HTML。
  • <html lang="en">: HTML 页面的根元素，lang="en"表示内容使用英语。
  • <head>: 包含元数据和页面的样式。
    • <meta charset="UTF-8">: 指定页面的字符编码为UTF-8。
    • <title>LightOnOff</title>: 设置页面的标题。
    • <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">: 优化移动设备的显示效果。
    • <style>: 包含页面的 CSS 样式。
  • <body>: 页面的主体内容。
    • <button class="plugs" type="button">...</button>: 创建一个按钮元素，包含一个SVG图像和文本“Power”，这个按钮将用于切换主题。
    • <script>: 包含 JavaScript 代码。

CSS样式

CSS 样式定义了页面的视觉效果，包括颜色、布局和动画。以下是主要样式点：

  • 使用 CSS 自定义属性（变量）来定义颜色，如--hue, --bg, --fg等。
  • 样式通过媒体查询和 CSS 变量来适配不同的屏幕尺寸。
  • 定义了按钮的默认状态、悬停状态和焦点状态的样式。
  • 使用:root伪类来定义全局 CSS 变量。
  • 使用@keyframes定义了多个动画，这些动画将用于SVG图像的动态效果。

JavaScript脚本

JavaScript脚本用于处理按钮点击事件，并切换页面的主题（亮色或暗色）。

  • window.addEventListener('DOMContentLoaded',()=>{...}): 当文档加载完成后，执行一个匿名函数。
  • const plugs=new Plugs('button'): 创建Plugs类的实例，并传递按钮的选择器。
  • Plugs类构造函数接受一个元素选择器，并为该元素添加点击事件监听器。
  • toggleTheme方法：当按钮被点击时，这个方法会被调用。
    • 它读取aria-pressed属性的当前值，并切换它（从true到false或相反）。
    • 它还切换data-dark属性，这会影响页面的颜色主题。

SVG图像

SVG 图像用于创建一个可交互的插头图标，它包含多个动画路径，这些路径在按钮状态改变时会有不同的动画效果。

  • plugs__img-left 和 plugs__img-right 分别代表插头的左右两侧。
  • plugs__img-spark-1-x, plugs__img-spark-2-x, plugs__img-spark-3-x 是代表电火花的三条小路径，它们在按钮按下时会有动画效果。

这段代码是一个 HTML 页面，其中包含了一些内联的 CSS 样式和 JavaScript 脚本。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>LightOnOff</title><metaname="viewport"content="width=device-width, initial-scale=1, viewport-fit=cover"/><style>*{border:0;box-sizing:border-box;margin:0;padding:0;}:root{--hue:223;--bg:hsl(var(--hue),10%,10%);--fg:hsl(var(--hue),10%,90%);--primary:hsl(var(--hue),90%,50%);--primary2:hsl(var(--hue),90%,70%);--primary2-t:hsla(var(--hue),90%,70%,0);--border:hsl(var(--hue),10%,30%);--border-hover:hsl(var(--hue),10%,50%);--trans-dur:0.3s;--trans-timing:cubic-bezier(0.65,0,0.35,1);font-size:calc(14px + (70 - 14) * (100vw - 280px) / (3840 - 280));}body,button{color:var(--fg);font:1em/1.5 sans-serif;transition:background-color calc(var(--trans-dur) * 0.5) steps(1,end),box-shadow var(--trans-dur) var(--trans-timing),color calc(var(--trans-dur) * 0.5) steps(1,end);}body{background-color:var(--bg);display:flex;height:100vh;}.plugs{background-color:transparent;border-radius:0.375em;box-shadow:0 0 0 0.0625em var(--border),0 0 0 0.25em var(--primary2-t);cursor:pointer;display:block;margin:auto;outline:transparent;position:relative;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;}.plugs:hover{box-shadow:0 0 0 0.0625em var(--border-hover),0 0 0 0.25em var(--primary2-t);}.plugs:focus-visible{box-shadow:0 0 0 0.0625em var(--primary),0 0 0 0.25em var(--primary2);}.plugs__img{display:block;position:relative;top:0;left:0;width:16em;height:auto;}.plugs__img-left,.plugs__img-left-seg,.plugs__img-left-head,.plugs__img-right,.plugs__img-right-seg,.plugs__img-right-head,.plugs__img-prong,.plugs__img-spark-1-x,.plugs__img-spark-1-y,.plugs__img-spark-2-x,.plugs__img-spark-2-y,.plugs__img-spark-3-x,.plugs__img-spark-3-y{animation-duration:calc(var(--trans-dur) * 3);animation-timing-function:var(--trans-timing);}.plugs__img-left-head,.plugs__img-right-head{transform-origin:2px 0;}.plugs__img-left{transform:translate(13px,10px) rotate(0);}.plugs__img-right{transform:translate(57px,10px) rotate(0);}.plugs__img-prong{stroke-dashoffset:0;}.plugs__img-spark-1-x,.plugs__img-spark-2-x,.plugs__img-spark-3-x{animation-timing-function:linear;}.plugs__img-spark-1-y,.plugs__img-spark-2-y,.plugs__img-spark-3-y{animation-timing-function:cubic-bezier(0.35,1,0.65,1);}.plugs[aria-pressed='false'] .plugs__img-left{animation-name:left-swing-tail-off;}.plugs[aria-pressed='false'] .plugs__img-left-seg{animation-name:left-swing-seg-off;}.plugs[aria-pressed='false'] .plugs__img-left-seg--flip{animation-name:left-swing-seg-off-2;}.plugs[aria-pressed='false'] .plugs__img-left-head{animation-name:left-swing-head-off;}.plugs[aria-pressed='false'] .plugs__img-right{animation-name:right-swing-tail-off;}.plugs[aria-pressed='false'] .plugs__img-right-seg{animation-name:right-swing-seg-off;}.plugs[aria-pressed='false'] .plugs__img-right-seg--flip{animation-name:right-swing-seg-off-2;}.plugs[aria-pressed='false'] .plugs__img-right-head{animation-name:right-swing-head-off;}.plugs[aria-pressed='false'] .plugs__img-prong{animation-name:prongs-off;animation-timing-function:cubic-bezier(0.35,0,0.65,0);}.plugs[aria-pressed='false'] .plugs__img-spark-1-x{animation-name:spark-1-x;}.plugs[aria-pressed='false'] .plugs__img-spark-1-y{animation-name:spark-1-y;}.plugs[aria-pressed='false'] .plugs__img-spark-2-x{animation-name:spark-2-x;}.plugs[aria-pressed='false'] .plugs__img-spark-2-y{animation-name:spark-2-y;}.plugs[aria-pressed='false'] .plugs__img-spark-3-x{animation-name:spark-3-x;}.plugs[aria-pressed='false'] .plugs__img-spark-3-y{animation-name:spark-3-y;}.plugs[aria-pressed='true'] .plugs__img-left{animation-name:left-swing-tail-on;transform:translate(13px,10px) rotate(-90deg);}.plugs[aria-pressed='true'] .plugs__img-left-seg{animation-name:left-swing-seg-on;}.plugs[aria-pressed='true'] .plugs__img-left-seg--flip{animation-name:right-swing-seg-on;}.plugs[aria-pressed='true'] .plugs__img-left-head{animation-name:left-swing-head-on;}.plugs[aria-pressed='true'] .plugs__img-right{animation-name:right-swing-tail-on;transform:translate(57px,10px) rotate(90deg);}.plugs[aria-pressed='true'] .plugs__img-right-seg{animation-name:right-swing-seg-on;}.plugs[aria-pressed='true'] .plugs__img-right-seg--flip{animation-name:left-swing-seg-on;}.plugs[aria-pressed='true'] .plugs__img-right-head{animation-name:right-swing-head-on;}.plugs[aria-pressed='true'] .plugs__img-prong{animation-name:prongs-on;animation-timing-function:cubic-bezier(0.35,1,0.65,1);stroke-dashoffset:2;}.plugs__label{overflow:hidden;position:absolute;width:0;height:0;}[data-dark='false']{--bg:hsl(var(--hue),10%,90%);--fg:hsl(var(--hue),10%,10%);--border:hsl(var(--hue),10%,70%);}[data-dark='false'] body,[data-dark='false'] button{transition-duration:calc(var(--trans-dur) * 2.25),var(--trans-dur),calc(var(--trans-dur) * 2.25);}@keyframes prongs-off{from{stroke-dashoffset:2;}17.5%,to{stroke-dashoffset:0;}}@keyframes left-swing-tail-off{from{transform:translate(13px,10px) rotate(-90deg);}25%{transform:translate(13px,10px) rotate(-32deg);}50%{transform:translate(13px,10px) rotate(2deg);}75%{transform:translate(13px,10px) rotate(-1deg);}to{transform:translate(13px,10px) rotate(0);}}@keyframes left-swing-seg-off{from{transform:translate(0,1px) rotate(0);}25%{transform:translate(0,1px) rotate(-10deg);}50%{transform:translate(0,1px) rotate(2deg);}75%{transform:translate(0,1px) rotate(-1deg);}to{transform:translate(0,1px) rotate(0);}}@keyframes left-swing-seg-off-2{from{transform:translate(0,1px) rotate(0);}25%{transform:translate(0,1px) rotate(10deg);}50%{transform:translate(0,1px) rotate(2deg);}75%{transform:translate(0,1px) rotate(-1deg);}to{transform:translate(0,1px) rotate(0);}}@keyframes left-swing-head-off{from{transform:translate(-2.5px,1px) rotate(0);}25%{transform:translate(-2.5px,1px) rotate(-10deg);}50%{transform:translate(-2.5px,1px) rotate(2deg);}75%{transform:translate(-2.5px,1px) rotate(-1deg);}to{transform:translate(-2.5px,1px) rotate(0);}}@keyframes right-swing-tail-off{from{transform:translate(57px,10px) rotate(90deg);}25%{transform:translate(57px,10px) rotate(32deg);}50%{transform:translate(57px,10px) rotate(-2deg);}75%{transform:translate(57px,10px) rotate(1deg);}to{transform:translate(57px,10px) rotate(0);}}@keyframes right-swing-seg-off{from{transform:translate(0,1px) rotate(0);}25%{transform:translate(0,1px) rotate(10deg);}50%{transform:translate(0,1px) rotate(-2deg);}75%{transform:translate(0,1px) rotate(1deg);}to{transform:translate(0,1px) rotate(0);}}@keyframes right-swing-seg-off-2{from{transform:translate(0,1px) rotate(0);}25%{transform:translate(0,1px) rotate(-10deg);}50%{transform:translate(0,1px) rotate(-2deg);}75%{transform:translate(0,1px) rotate(1deg);}to{transform:translate(0,1px) rotate(0);}}@keyframes right-swing-head-off{from{transform:translate(-2.5px,1px) rotate(0);}25%{transform:translate(-2.5px,1px) rotate(10deg);}50%{transform:translate(-2.5px,1px) rotate(-2deg);}75%{transform:translate(-2.5px,1px) rotate(1deg);}to{transform:translate(-2.5px,1px) rotate(0);}}@keyframes prongs-on{from,70%{stroke-dashoffset:0;}90%,to{stroke-dashoffset:2;}}@keyframes left-swing-tail-on{from{transform:translate(13px,10px) rotate(0);}50%{transform:translate(13px,10px) rotate(-32deg);}to{transform:translate(13px,10px) rotate(-90deg);}}@keyframes left-swing-seg-on{from{transform:translate(0,1px) rotate(0);}50%{transform:translate(0,1px) rotate(-10deg);}to{transform:translate(0,1px) rotate(0);}}@keyframes left-swing-head-on{from{transform:translate(-2.5px,1px) rotate(0);}50%{transform:translate(-2.5px,1px) rotate(-10deg);}to{transform:translate(-2.5px,1px) rotate(0);}}@keyframes right-swing-tail-on{from{transform:translate(57px,10px) rotate(0);}50%{transform:translate(57px,10px) rotate(32deg);}to{transform:translate(57px,10px) rotate(90deg);}}@keyframes right-swing-seg-on{from{transform:translate(0,1px) rotate(0);}50%{transform:translate(0,1px) rotate(10deg);}to{transform:translate(0,1px) rotate(0);}}@keyframes right-swing-head-on{from{transform:translate(-2.5px,1px) rotate(0);}50%{transform:translate(-2.5px,1px) rotate(10deg);}to{transform:translate(-2.5px,1px) rotate(0);}}@keyframes spark-1-x{from,12.5%{r:1px;transform:translate(0,0);}37.5%,to{r:0;transform:translate(-10px,0);}}@keyframes spark-1-y{from{animation-timing-function:steps(1,end);transform:translate(0,0);visibility:hidden;}12.5%{animation-timing-function:linear;transform:translate(0,0);visibility:visible;}37.5%,to{transform:translate(0,-9px);}}@keyframes spark-2-x{from,12.5%{r:1px;transform:translate(0,0);}37.5%,to{r:0;transform:translate(4px,0);}}@keyframes spark-2-y{from{animation-timing-function:steps(1,end);transform:translate(0,0);visibility:hidden;}12.5%{animation-timing-function:linear;transform:translate(0,0);visibility:visible;}37.5%,to{transform:translate(0,-8px);}}@keyframes spark-3-x{from,12.5%{r:1px;transform:translate(0,0);}37.5%,to{r:0;transform:translate(-1px,0);}}@keyframes spark-3-y{from{animation-timing-function:steps(1,end);transform:translate(0,0);visibility:hidden;}12.5%{animation-timing-function:linear;transform:translate(0,0);visibility:visible;}37.5%,to{transform:translate(0,8px);}}</style></head><body><button class="plugs"type="button"><svg class="plugs__img"viewBox="0 0 70 35"width="700px"height="350px"aria-hidden="true"><g fill="none"stroke="currentcolor"stroke-linecap="round"stroke-width="1"><g class="plugs__img-left"transform="translate(13,10)"><polyline points="0 0,0 1"/><g class="plugs__img-left-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-left-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-left-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-left-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-left-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-left-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-left-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-left-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-left-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-left-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-left-seg plugs__img-left-seg--flip"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-left-seg plugs__img-left-seg--flip"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-left-seg plugs__img-left-seg--flip"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-left-seg plugs__img-left-seg--flip"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-left-seg plugs__img-left-seg--flip"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-left-head"transform="translate(-2.5,1)"><rect rx="1"ry="1"x="0"y="0"width="5"height="6"/><polyline class="plugs__img-prong"points="1 6,1 8"stroke-dasharray="2 2"/><polyline class="plugs__img-prong"points="4 6,4 8"stroke-dasharray="2 2"/></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g><g class="plugs__img-right"transform="translate(57,10)"><polyline points="0 0,0 1"/><g class="plugs__img-right-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-right-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-right-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-right-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-right-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-right-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-right-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-right-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-right-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-right-seg"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-right-seg plugs__img-right-seg--flip"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-right-seg plugs__img-right-seg--flip"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-right-seg plugs__img-right-seg--flip"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-right-seg plugs__img-right-seg--flip"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-right-seg plugs__img-right-seg--flip"transform="translate(0,1)"><polyline points="0 0,0 1"/><g class="plugs__img-right-head"transform="translate(-2.5,1)"><rect rx="1"ry="1"x="0"y="0"width="5"height="6"/></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g></g><g fill="currentcolor"transform="translate(35,10)"><g class="plugs__img-spark-1-y"><circle class="plugs__img-spark-1-x"r="0"cy="-1"/></g><g class="plugs__img-spark-2-y"><circle class="plugs__img-spark-2-x"r="0"cy="0"/></g><g class="plugs__img-spark-3-y"><circle class="plugs__img-spark-3-x"r="0"cy="1"/></g></g></svg><span class="plugs__label">Power</span></button><script>'use strict';window.addEventListener('DOMContentLoaded',()=>{const plugs=new Plugs('button')});class Plugs{constructor(buttonEl){var _a;this.button=document.querySelector(buttonEl);(_a=this.button)===null||_a===void 0?void 0:_a.addEventListener('click',this.toggleTheme.bind(this))}toggleTheme(){var _a,_b;const pressed=((_a=this.button)===null||_a===void 0?void 0:_a.getAttribute('aria-pressed'))==='true';(_b=this.button)===null||_b===void 0?void 0:_b.setAttribute('aria-pressed',`${!pressed}`);document.documentElement.setAttribute('data-dark',`${pressed}`)}}</script></body>
</html>

整体来说，这个 HTML 页面实现了一个动态的开关按钮，用户可以通过点击按钮来在亮色和暗色主题之间切换。

这篇关于【HTML】模拟插头连接断开动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1099458。

相关文章

vue基于ElementUI动态设置表格高度的3种方法

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div，原理是将表格的高度设置成外层div的高度，所以外层的div需要
阅读更多...
VScode连接远程Linux服务器环境配置图文教程

VScode连接远程Linux服务器环境配置图文教程

《VScode连接远程Linux服务器环境配置图文教程》：本文主要介绍如何安装和配置VSCode,包括安装步骤、环境配置（如汉化包、远程SSH连接）、语言包安装（如C/C++插件）等,文中给出了详... 目录一、安装vscode二、环境配置1.中文汉化包2.安装remote-ssh，用于远程连接2.1安装2
阅读更多...
关于rpc长连接与短连接的思考记录

关于rpc长连接与短连接的思考记录

《关于rpc长连接与短连接的思考记录》文章总结了RPC项目中长连接和短连接的处理方式,包括RPC和HTTP的长连接与短连接的区别、TCP的保活机制、客户端与服务器的连接模式及其利弊分析,文章强调了在实... 目录rpc项目中的长连接与短连接的思考什么是rpc项目中的长连接和短连接与tcp和http的长连接短
阅读更多...
Vue项目中Element UI组件未注册的问题原因及解决方法

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element
阅读更多...
详解如何在React中执行条件渲染

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染？基础示例使用逻辑与运算符（&&）使用条件语句列表中的条件渲染总结引言在现代
阅读更多...
详解Vue如何使用xlsx库导出Excel文件

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件，使用第三
阅读更多...
Java实现Excel与HTML互转

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式，广泛用于数据处理和分析，而HTM则是一种用于创建网页的标记语言。虽然两
阅读更多...
vue解决子组件样式覆盖问题scoped deep

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器（/deep/）来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...
Xshell远程连接失败以及解决方案

Xshell远程连接失败以及解决方案

《Xshell远程连接失败以及解决方案》本文介绍了在Windows11家庭版和CentOS系统中解决Xshell无法连接远程服务器问题的步骤,在Windows11家庭版中,需要通过设置添加SSH功能并... 目录一.问题描述二.原因分析及解决办法2.1添加ssh功能2.2 在Windows中开启ssh服务2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2