Html
关注
分享
扫一扫
Html常用技术文章整理
卡尔特斯
联系方式：dengzemiao
GitHub: https://github.com/dengzemiao
掘金：https://juejin.im/user/4450440831840909
展开
-
JS 选色器 colorpicker.js 使用与下载
js 选色器源码，支持取得hexrgb色值。原创 2024-02-23 18:28:01 · 1730 阅读 · 0 评论 -
前端 CSS 3D 照片墙自动旋转案例（详细步骤）
前端 CSS 3D 照片墙自动旋转案例（详细步骤），案例 DEMO 源码地址 ，仅供参考。原创 2023-12-26 18:28:35 · 2254 阅读 · 0 评论 -
CSS perspective 与 preserve-3d 的区别（带GIF效果图）
该属性是可以给图像呈现立体感，但是，那仅仅只是一种。/* 反复执行动画，注释，免得影响主要效果 */效果，但是理论上来说，图片如果真的在。后面去了的，这里依然还是在父容器的。：这个属性是让元素处在了真实的。空间中了，图片穿模了父容器的。的视觉感受，并没有真正的在。，拷贝下面代码，换个图片即可。环境中，是会穿模到父容器。上面的效果代码，新建一个。原创 2023-12-22 16:15:16 · 2810 阅读 · 0 评论 -
CSS perspective、perspective-origin 效果
指的是： 平面距离用户之间的距离，浏览器通过该距离来计算用户的视角大小，从而制造出近大远小的 效果。当元素的 大于 或者元素在 轴正向移动后，元素的大小都会超过实际大小；同理，当元素的 小于 或者在 轴反向移动后，元素大小都会小于实际大小。随着 的值增大，页面元素变得更小：这个其实不难理解，相当于用户眼睛离屏幕更远了，元素当然也就显得更小了。 定义了观察者的视角相对于显示元素的位置。通常用该属性来定义视线灭点，也即视线消失的位置。上面的例子中，并未指定该属性，因为默认使用 ，所以每一个元素看原创 2023-12-22 15:38:42 · 2464 阅读 · 0 评论 -
前端使用多张图片生成 Gif 效果（支持循环、不循环、完成回调）
/ 如果不循环则暂停（如果需要播放完成回调，在这里面添加即可）// 切换图片间隔时间(毫秒)// 超过最后一张了则重新开始。/* 初始化样式 */// 设置 class。// 获取 imgs。// 有图片进行隐藏。原创 2023-02-15 11:22:22 · 4292 阅读 · 0 评论 -
前端原生 CSS 跑马灯效果，无限轮播（横竖版本，带渐变遮罩，简单实用）
公式：主图张数 * 单个图片宽度（每轮主图只有 4 张，4 张照片为一个周期，如果需要轮播的主图为 7、8、9...张，都一样） *//* 为什么设置 -600px？公式：主图张数 * 单个图片高度（每轮主图只有 4 张，4 张照片为一个周期，如果需要轮播的主图为 7、8、9...张，都一样） *//* 重点：单个图片宽度 200，相当于默认不动可见 3 个 *//* 重点：单个图片高度 150，相当于默认不动可见 1 个 *//* 重点：盒子宽度 600 *//* 重点：盒子宽度 150 */原创 2023-02-14 12:01:56 · 13041 阅读 · 3 评论 -
H5 video 自动播放（autoplay）不生效解决方案
有个h5需要加入播放器，发现在微信浏览器中无法自动播放，在移动端普通浏览器中也无法正常自动播放ios浏览器中（微信或者其他浏览器），每次刷新进入网页首次需要手动点击播放，下次会自动播放。安卓在微信浏览器中是随便怎么样都不会进入自动播放，在其他浏览器中会进入自动播放。ios平台可以通过微信官方的jweixin插件来解决，但是安卓就暂时无任何办法，限制太严重，只能通过诱导用户点击屏幕进行播放。原创 2022-12-13 16:12:13 · 11767 阅读 · 7 评论 -
完美解决 - 前端发版后浏览器缓存问题（发版后及时拉取最新版本代码）
完美解决 - 前端发版后浏览器缓存问题（发版后及时拉取最新版本代码）原创 2022-10-18 11:18:00 · 26790 阅读 · 0 评论 -
Input 标签监听内容输入(change、input 事件区别)
<template> <!-- input --> <input type="text" @change="onChange" @input="onInput"></template><script>export default { methods: { // 失去焦点时调用 onChange (e) { console.log(e.target.value) }, // 每次输入字符原创 2022-05-30 10:19:51 · 615 阅读 · 0 评论 -
CSS3 flex 布局在 wrap 换行模式下，让中间指定元素换行
在 display: flex; flex-wrap: wrap; 模式下，默认是自动换行，但是有时候需要在指定位置换行。只需要在换行元素后面，设置一个 div 元素设置样式 width: 100% 即可，就能达到 <br/> 的效果。<div style="width: 100%; background-color: red;">在 flex 布局中进行了强制换行</div>放到 flex 布局的元素中即可生效！...原创 2021-12-03 14:52:57 · 4280 阅读 · 0 评论 -
输入框贴贴去除样式并插入到指定光标位置（contenteditable=“true“ 实现的输入框也支持）
方式一 效果：方式二 效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti原创 2021-11-22 18:32:56 · 674 阅读 · 0 评论 -
使用 contenteditable=“true“ 实现的文本框全选内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2021-11-22 17:21:54 · 2073 阅读 · 1 评论 -
使用 div 实现 input、textarea 输入框，并支持 placeholder 属性（解决浏览器兼容问题）
解决这个问题的初衷：在做文本编辑器时，系统自带的 textarea 在 火狐 浏览器中回车不会进行换行，被显示成了空格，找了好几种方案没解决，试了下 div 实现 input、textarea 的方式，发现可以完美解决这个问题一、div 实现 textarea1、给 div 添加 contenteditable="true" 属性，使 div 元素变成用户可编辑。2、给 div 添加 resize: both; 样式，使 div 可以被用户调整尺寸，注意：同时需要设置 overf原创 2021-11-22 11:06:51 · 5993 阅读 · 0 评论 -
textarea 动态宽高（根据内容动态撑开宽高）
重点：计算的 span 标签属性需要与 输入框 的字体属性保持一致，这样才能算的精准。案例代码，标签虽然有默认属性，但是为了能够通过 JS 取到值，所以必须手动写一遍样式属性，html 一样带上 style 即可。<script> // 文本输入框(必备属性，主要是字体相关属性) // var inputEl = document.createElement('textarea') // inputEl.rows = 1 // inputEl.style.width...原创 2021-11-11 15:40:59 · 2953 阅读 · 0 评论 -
前端 SVG 与 Canvas 框架案例 (画线、矩形、箭头、文字 ....)
Svgsvg 教程文档Canvascanvas 教程文档、canvas 教程文档graffitiCanvas.jsAILabel - Demokscreenshot原创 2021-10-27 10:07:54 · 1182 阅读 · 0 评论 -
iOS Safari 浏览器 100vh 带有滚动条解决方案
问题场景在移动端 safari 或者 chrome 浏览器中，使用 100vh，会出现滚动条。根本原因在 safari 和 chrome 浏览器中，100vh 是指去掉地址栏的高度，所以会出现滚动条。解决方案移动端一般不考虑 chrome 浏览器，用户基数小，如果只考虑微信公众号开发也不用考虑这个问题。如果需要考虑 safari 浏览器的用户体验，建议使用 100% 替代 100vh，或者使用 js，而不是 100vh。...原创 2021-09-10 19:47:44 · 4206 阅读 · 0 评论 -
JS 解决移动端浏览器(Safari、Alook...)无法禁止缩放问题
移动端 web 缩放有两种：双击缩放、双指手势缩放。在 iOS 10 之前，iOS 和 Android 都可以通过一行 meta 标签来禁止页面缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">但 iOS 10 开始，meta 设置在 Safari 内无效了，在 iOS 的其..原创 2021-09-09 12:04:54 · 1745 阅读 · 3 评论 -
前端动画(动态)图标库收集
Titanic：Titanic 提供一系列的动画图标，以及以 JavaScript 的调用图标动画的方法后续在补充…原创 2021-09-06 10:33:33 · 1077 阅读 · 1 评论 -
前端(CSS3、JS)动画库收集
animate.styleBounce.jsEffeckt.csshover.cssmagic.css原创 2021-09-06 10:32:39 · 175 阅读 · 0 评论 -
Failed to read the ‘localStorage‘ property from ‘Window‘: Access is denied ...
报错: Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.原因是浏览器开启了 阻止第三方 Cookie 访问，一般 隐身模式 会默认开启阻止。Chrome 在 隐身模式 下手动开启一下 设置 -> 隐私设置和安全性 -> Cookie 及其他网站数据 -> 允许所有 Cookie...原创 2021-08-27 15:14:21 · 2487 阅读 · 0 评论 -
解决 Blocked a frame with origin “xxx“ from accessing a cross-origin frame
这是内嵌 iframe 页面使用 window.parent 或 top.xxxx 导致的，在 子页面，想传递给 父页面的参数，但是原因两个的域名不一样，所以会出现跨域问题。解决办法1、父页面监听 message，写法固定window.addEventListener('message', function (e) { console.log(e)})2、子页面发送 message 消息，并附带参数// window.parent 是 iframe 子页面获取父页面的 window..原创 2021-08-09 15:44:38 · 13483 阅读 · 0 评论 -
FaceApi 人脸识别技术点
FaceApi GitHubB站教程技术博客模型文件加载存放需要注意：方式一：模型文件放到服务器，通过 URL 进行加载，走代理方式二：如果直接加载本地文件，需要通过 服务器 进行访问！否则会报错： URL scheme must be "http" or "https" for CORS request小程序集成失败1、错误：TypeError: Cannot read property ‘mark’ of undefined，勾上 增强编译2、错误：getEnv..原创 2021-05-27 10:39:54 · 870 阅读 · 0 评论 -
HTML5 流星+星空背景网页端【年会/婚礼】抽奖源码，打开导入名单即可使用，效果酷炫，调色即可温馨！
Github 下载地址：DZMLuckyDraw。网盘下载：DZMLuckyDraw。下载项目后，通过浏览器打开 主入口，然后导入名单即可使用，也可以自定义奖项名称，内定中奖人员，不用担心误关窗口。自定义奖项设置人员名单配置，内定配置规则可导出中奖名单（如果不小心误关抽奖窗口、刷新网页都不会导致丢失用户名单、中奖名单、剩余未中奖用户名单、奖项配置等，所以误操作也没事，可以重新在同一个浏览器中打开，再次进入抽奖页，继续操作即可，流程保持不变）。这里有一个优化版本，是由 shatinGitHub 进行优原创 2021-05-19 13:00:09 · 58429 阅读 · 103 评论 -
CSS 修改滚动条样式
默认滚动条(Mac、Win)修改样式// 滚动条主视图.page-content::-webkit-scrollbar { width: 8px; background: red;}// 滚动条进度条视图.page-content::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: green;}..原创 2021-03-12 17:58:43 · 197 阅读 · 1 评论 -
CSS font-weight 值对应（Regular、Normal、Medium、Light）
经常在开发中，给出的 UI，会有 字重，它对应（Regular、Normal、Medium、Light …）这些值，并不能直接看到 font-weight 对应的数值。font-weight 属性执行字体中字形的重量，这取决于黑度等级或笔划粗细。取值范围：100 至 900，其大致符合下列通用重量名称：100 - Thin200 - Extra Light (Ultra Light)300 - Light400 - Regular (Normal、Book、Roman)500 -..原创 2021-03-10 14:55:41 · 17740 阅读 · 0 评论 -
Html Table 固定或自定义列宽度
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> td { white-space: nowrap; overflow: hidden; width: 200px; } table { table-lay原创 2021-02-01 18:16:22 · 7690 阅读 · 1 评论 -
CSS pointer-events 鼠标事件（让标签无法点击）
pointer-events 文档pointer-events 是CSS3的一个属性，支持的值非常多，其中大部分都是和SVG有关。对于前端日常开发，只要了解 none 这个值就够了。pointer-events: none; 意思就是让鼠标事件失效（链接、点击等事件）。指定标签例如 button a 之类的标签添加该属性之后，再按就没效果了，同时鼠标在按钮上也不会变成“一只手”了。除次之外，它还可以禁止标签的页面跳转。...原创 2021-04-27 15:09:56 · 1008 阅读 · 0 评论 -
CSS3 自定义字体的常识与使用
web字体开发人员可以为自己的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。支持程度比较好，甚至IE低版本浏览器也能支持。不同浏览器所支持的字体格式是不一样的，所以有必要去了解一下有关字体格式的知识。1、TureTpe(.ttf)格式 .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、S..原创 2021-04-27 15:10:30 · 267 阅读 · 0 评论 -
CSS3【display: flex；】与【flex-direction: 主轴方向；】的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; pad原创 2021-04-27 15:11:19 · 1173 阅读 · 0 评论 -
CSS3【display: flex；】与【justify-content: 主轴对齐方式；】的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; pad原创 2021-04-27 15:11:29 · 686 阅读 · 1 评论 -
CSS3【display: flex；】与【align-items: 侧轴对齐方式；】的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; pad原创 2021-04-27 15:11:38 · 910 阅读 · 0 评论 -
CSS3【display: flex；】与【flex: 占用比例；】的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; pad原创 2021-01-18 17:23:03 · 5995 阅读 · 2 评论 -
CSS3 【display: flex； 】与【flex-wrap: 换行模式；】的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; pad原创 2021-01-18 17:21:44 · 3755 阅读 · 0 评论 -
CSS3【display: flex；】与【align-content: (wrap 模式下堆栈排列)；】的使用
align-content 简介堆栈排列，可对应用 flex-wrap: wrap 后产生的换行进行控制，包括 flex-start、flex-end、center、space-between、space-around、stretchalign-content 使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ..原创 2021-01-18 17:20:10 · 343 阅读 · 0 评论 -
CSS3【display: flex；】自适应布局案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; pad原创 2021-01-18 17:10:58 · 838 阅读 · 0 评论 -
CSS3【display: flex；】与【order: 控制子元素的顺序；】的使用
order 简介：控制子元素的顺序，默认 order 值越小越在排在前面。order 使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&g..原创 2021-01-18 17:09:35 · 1522 阅读 · 1 评论 -
CSS3 【display: flex；】与【align-self: 可覆盖父元素设置algin-items；】的使用
align-self 简介：可覆盖父元素设置的 algin-items，包括 flex-start、flex-end、center、stretchalign-self 使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0..原创 2021-01-18 17:13:41 · 779 阅读 · 0 评论 -
CSS3 px、em、rem 的使用与区别
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html { font-size: 10px;原创 2021-01-18 17:06:04 · 192 阅读 · 0 评论 -
CSS3 浏览器适配（私有化前缀）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 浏览器私有前缀： -webkit- : 谷原创 2021-01-18 17:00:19 · 305 阅读 · 0 评论 -
CSS3 box-sizing 简单案例
盒子模型示例图盒子模型代码分析<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { ..原创 2021-01-18 16:59:05 · 206 阅读 · 0 评论