【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。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
W外链微信推广短连接怎么做？

W外链微信推广短连接怎么做？

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时，首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值，还要能够激起人们的分享欲望。对于许多企业和个人来说，尤其是那些缺乏创意和写作能力的人来说，这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大，不同用户的需求和兴趣各异。因此，制作推广链接时需要精准定位目标受众，以便更有效地吸引他们点击并分享链接
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
usaco 1.2 Transformations（模拟）

usaco 1.2 Transformations（模拟）

我的做法就是一个一个情况枚举出来 注意计算公式： （ 变换后的矩阵记为C） 顺时针旋转90°：C[i] [j]=A[n-j-1] [i] （旋转180°和270° 可以多转几个九十度来推） 对称：C[i] [n-j-1]=A[i] [j] 代码有点长 。。。 /*ID: who jayLANG: C++TASK: transform*/#include<
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2