语言-HTML
文章平均质量分 73
HTML
少莫千华
这个作者很懒,什么都没留下…
展开
-
【Html】交通灯问题
通过`getCurrentLight`将每个状态的持续时间设置为精确的值,并使用`requestAnimationFrame`来递归调用`getCurrentLight`函数,我们可以更准确地控制交通灯的状态。原创 2023-10-24 16:38:57 · 609 阅读 · 0 评论 -
【Html】用CSS定义咖啡 - 咖啡配料展示
script.jsstyle.css原始地址CodePen - For The Love Of Coffee原创 2023-09-20 16:59:02 · 867 阅读 · 0 评论 -
【JS】一道解构面试题
可迭代对象(Iterable)是指实现了迭代器协议的对象,它可以用于迭代(遍历)其中的元素。在许多编程语言中,可迭代对象是一种具有可循环访问元素的抽象概念。在 JavaScript 中,可迭代对象是指具有 Symbol.iterator 方法的对象。这个方法返回一个迭代器(Iterator)对象,它通过 next() 方法提供对可迭代对象中的每个元素的访问。原创 2023-08-07 19:32:30 · 1114 阅读 · 0 评论 -
[CSS] 图片九宫格
.img-item:nth-child(3n+1) 3n+1 选中第一列的元素 1 4 7 3n+2 选中第二列的元素 2 5 8 3n+0 选中第三列的元素 3 6 9 n+7 选中第三行的元素 7 8 9 -n + 6 选中第一、二行的元素 6 5 4 3 2 1* -n + 6 选中第一行的元素 3 2 1原创 2023-08-06 18:26:39 · 941 阅读 · 0 评论 -
【VUE】前端实现防篡改的水印
[Ant Design Vue](https://2x.antdv.com/docs/vue/introduce-cn) 和 [Element UI](https://element.eleme.io/#/zh-CN/component/installation) 暂时没有水印组件。所以需要自己开发,基本思路如下:1. 生成水印 :使用`canvas.toDataURL()`生成`base64`水印图片数据,将水印图片数据赋值到水印`div`上。2. 防止篡改 * 监控篡改原创 2023-08-06 17:54:43 · 1040 阅读 · 0 评论 -
【Vue】Parsing error: No Babel config file detected for ... vue
在 `Babel 7.x` 新版本中,`Babel` 有一个 `"root"` 目录的概念, 默认为当前的工作目录文件夹。 对于项目范围的配置,`Babel` 将在根目录中自动搜索 `"babel.config.json"` 文件, 或使用了 支持的扩展名 的等效文件。 另外,用户可以使用显式的 `"configFile"` 值覆盖默认的配置文件搜索行为。原创 2023-08-06 14:07:26 · 1716 阅读 · 0 评论 -
【JS】实现系统取色器
根据当前的信息,截至到 `2023 年 8 月`,以下是一些支持使用 `new EyeDropper()` 的主要浏览器(可能还有其他浏览器也提供了类似的功能):1. `Google Chrome`:从 `Chrome 94` 版本开始引入了 `new EyeDropper()` 构造函数,可以通过 `JavaScript API 来创建和使用 `EyeDropper` 工具。2. `Microsoft Edge`:从 `Edge 94` 版本开始,支持 `new EyeDropper()` 构造函原创 2023-08-05 16:23:20 · 1051 阅读 · 0 评论 -
【CSS】倾斜按钮
transform: skew(-20deg); 倾斜 transform: skew(20deg); 抵消倾斜 background: radial-gradient(circle at 100% 100%,transparent 0 20px,#000 5px);设置伪元素的径向背景颜色 button::before、button::after使用伪元素 border-radius: 15px 0;设置button元素 圆角左上和右下的圆角15px原创 2023-08-04 16:36:00 · 1004 阅读 · 0 评论 -
【JS】前端编程8个小技巧(一)
1.判断两个数是不是符号相同2.判断一个数n是不是2的整数次幂3.倒序遍历简写4.快速得到一个星级评分5.在程序抛出异常时快速切换搜索引擎stackoverflow的人机验证界面stackoverflow、知乎Quora、GitHub 6.让数字在1和0之间来回切换7.求一个数的整数部分的几种写法8.得到一个数乘以2的n次幂原创 2023-08-04 15:20:04 · 134 阅读 · 0 评论 -
【CSS】旋转中的视差效果
在源代码动画中使用变量`--r`,是的顺时针旋转父元素`.container`和逆时针旋转子元素`.item img`共用一个`rotation `动画。这里子元素采用与父元素的反向旋转以抵消整体旋转导致子元素内部图片旋转,改善视觉体验。原创 2023-08-04 12:02:30 · 1846 阅读 · 0 评论 -
【JS】浏览器不同窗口、标签页或 iframe之间的通讯 - 技术的尽头是魔术
roadcastChannel 是 JavaScript 中的一个接口,用于在不同的浏览上下文之间进行通信。它允许在相同域名下的不同窗口、标签页或 iframe 之间发送消息。在给 BroadcastChannel 构造函数传递一个字符串参数作为频道名称时,会创建一个新的 BroadcastChannel 实例,该实例与指定名称的频道相关联。这个频道可以被不同的窗口或标签页共享,让它们能够相互发送和接收消息。原创 2023-08-03 19:41:08 · 317 阅读 · 0 评论 -
【网络安全】网络安全威胁实时地图 - 2023
网络安全威胁实时地图是一种可视化工具,用于显示全球范围内的网络安全威胁活动。它主要基于收集和分析来自各个来源的实时网络威胁数据,并将其以地理位置、攻击类型、攻击源和受攻击目标等方式呈现在地图上。这种地图可以帮助用户更好地了解当前的网络安全态势,追踪网络攻击的发生地点、类型和目标,以及攻击事件的趋势和规模。通过可视化展示,用户可以直观地观察和分析全球范围内的网络威胁活动,并采取相应的安全措施来保护自己的网络和系统。网络安全威胁实时地图通常会显示各种类型的威胁事件,如恶意软件感染、网络攻击、僵尸网络活动原创 2023-08-03 16:41:51 · 7896 阅读 · 1 评论 -
【CSS】圆形放大的hover效果
/*设置鼠标移入时元素的裁剪路径,半径为50%,圆心为 50% 50%*/ clip-path: circle(50% at 50% 50%);原创 2023-08-02 18:21:26 · 910 阅读 · 0 评论 -
【CSS】3D卡片效果
/* perspective(500px) 设置平面和用户眼睛之间的距离*/ /* rotateX(25deg) 鼠标移入card元素时将其中的cover元素绕x轴旋转25°*/ transform: perspective(500px) rotateX(25deg); /* 设置一个下拉阴影,并设置阴影的颜色*/ /* translate3d 设置hero元素的xyz值*/原创 2023-08-02 16:45:48 · 1814 阅读 · 0 评论 -
【SCSS】网格布局中的动画
index.scss在 中使用自动编译文件。平滑过渡单元格的尺寸变化,解决鼠标移动画面切换的卡顿问题设置格子的间距使用自定义变量设置格子的列数和宽度使用自定义变量设置格子的行数和高度第一列的宽度第二列的宽度第三列的宽度第一行的宽度第二行的宽度第三行的宽度 sass变量行号 sass变量列号使用sass变量与色相环对每个格子设置不同的背景颜色此文件由文件自动编译生成原创 2023-08-01 17:53:40 · 1053 阅读 · 0 评论 -
【CSS】视频文字特效
视频文字特效等同于 `top: 0; right: 0; bottom: 0; left: 0;弹性盒绝对定位水平居中垂直居中混合模式-与上一层(视频层进行混合)fire.mp4下载下载原创 2023-08-01 16:40:01 · 863 阅读 · 0 评论 -
【字符集】emoji - ios
ios中emoji图标原创 2023-07-20 16:18:10 · 732 阅读 · 0 评论 -
【字符集】emoji字符集 - 旗帜、国旗、区旗等
emoji 字符集- 旗帜原创 2023-07-20 01:27:48 · 29260 阅读 · 0 评论 -
【CSS】CSS使用变量与变量定义
当使用CSS变量时,可以在任何属性的值中引用它们。:root {:root是CSS中的一个伪类,表示文档的根元素。在HTML文档中,根元素通常是元素。使用:root伪类来定义CSS变量时,可以确保变量在整个文档中都是有效的,并且可以被其他选择器引用和使用。在示例中的代码块中,:root伪类用于定义变量和。这意味着这些变量可在整个文档中被引用,并且可以适用于任何元素或选择器。在.header类选择器中,属性的值使用了,这意味着背景颜色将根据变量的值来渲染。.button。原创 2023-07-03 15:54:17 · 3204 阅读 · 1 评论 -
【CSS】鼠标(移入/移出)平滑(显示/隐藏)下划线
我们给内容添加一个黑色背景示例效果将黑色背景替换成彩色渐变背景示例效果宽度设置100个像素,高度设置10个像素(),此时背景是重复绘制的。示例效果样式添加一个取消背景的重复绘制。示例效果将背景的大小由10像素改为2像素()示例效果给背景样式设置既靠左又靠下的位置()示例效果将背景的宽度设置为0个像素示例效果在鼠标移入内容的事件中设置背景的宽度示例效果给背景大小变化事件添加一个平滑过渡。示例效果给背景样式设置靠右位置()示例效果鼠标移入事件触发时。添原创 2023-06-29 21:53:13 · 3314 阅读 · 1 评论 -
【Html】js+css实现平滑滚动
使用js或js+css实现平滑滚动原创 2023-06-28 19:51:21 · 925 阅读 · 0 评论 -
【Html】Html+Less实现一个简单的加载动画
这些并不能被浏览器识别,然后渲染。为什么会出现这种情况,是因为less编译器的版本、不同系统Windows、Mac等的语法兼容性导致的。原创 2023-06-25 02:21:21 · 988 阅读 · 0 评论 -
【Less】四则运算
对于两个不同单位值之间的运算,不要求你进行运算操作的几个值必须带单位,只要其中有一个有单位就可以了,运算结果的值会优先取第一个值的单位为准。40px如果两个值之间只有一个值有单位,则运算结果就取该单位。可以使用()小括号来添加一些更复杂的运算操作。在对颜色进行运算时,会忽略颜色值前面的#号。算术运算符在加、减或比较之前会进行单位换算。乘法和除法不作单位的转换。因为这两种运算在大多数情况下都没有意义,一个长度乘以一个长度就得到一个区域,而CSS是不支持指定区域的。如果单位换算无效或失去意义,则忽略单位。原创 2023-06-25 02:16:25 · 583 阅读 · 0 评论 -
【HTML应用程序hta】选择文件对话框
1、将选择的文件保存到注册表<html> <head> <title>Browse</title> </head> <body> <input type='file' id='f' /> <script type='text/javascript'> var f转载 2018-05-16 20:46:32 · 985 阅读 · 0 评论 -
【插件-ActiveX】Visual Studio 中调试ActiveX控件
创建Html的测试文件如下图所示创建测试的html文件,文件内容如下,注意CLSID为CMFCActiveXMathCtrl的uuidMFCActiveXMath 测试原创 2017-04-11 18:40:03 · 5776 阅读 · 5 评论 -
【HTML】在图标上绘制圆圈数字提示符
源码<!DOCTYPE html><html> <head> <title>图标上绘制圆圈数字</title> </head> <body> <div style="width:32px; height:32px; position:relat...原创 2020-02-19 18:04:15 · 3085 阅读 · 0 评论 -
【HTML】鼠标移动 - 絮状特效(蒲公英特效);鼠标点击文字特效
源码<!DOCTYPE html><html lang="zh-cn"> <head> <title>鼠标特效</title> </head><body> <script src="js/jquery-2.2.0.min.js"></script> ...原创 2019-10-23 17:08:54 · 9517 阅读 · 11 评论 -
【HTML】浪漫程序员 HTML5爱心表白动画
我们程序员在追求爱情方面也是非常浪漫的,下面是一位同学利用自己所学的HTML5知识自制的HTML5爱心表白动画,画面非常温馨甜蜜,这样的创意很容易打动女孩,如果你是单身的程序员,也赶紧来制作自己的爱心表白动画吧。结果源码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3....原创 2019-10-22 12:00:53 · 7570 阅读 · 14 评论 -
【HTML】image not loaded for security reasons
问题描述Uncaught Error: image not loaded for security reasons (serve this page over "http://" instead) at Function.Texture.fromImage (lightgl.js:1843) at new Renderer (renderer.js:106) at ...原创 2019-10-22 11:48:37 · 805 阅读 · 0 评论 -
【HTML】css3实现旋转的立方体相册
立体相册源码使用时请保存为*.html格式<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>少莫千华立体相册</title> <style> *{ margin: 0; padding: 0;...原创 2019-10-13 13:59:26 · 9818 阅读 · 3 评论 -
【HTML】HTML浏览器打印自定义页眉页脚
1、IE(Internet Explorer)浏览(V)注册表位置计算机\HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\PageSetup 代码 说明 示例 &w 标题 ...原创 2019-07-08 22:22:29 · 10591 阅读 · 1 评论