![](https://img-blog.csdnimg.cn/20201012112610925.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Html
Html常用技术文章整理
卡尔特斯
大前端交流群:dengzemiao
GitHub: https://github.com/dengzemiao
掘金:https://juejin.im/user/4450440831840909
展开
-
JS 选色器 colorpicker.js 使用与下载
JS 选色器 colorpicker.js 使用与源码,支持取得 hex、rgb 色值。原创 2024-02-23 18:28:01 · 1233 阅读 · 0 评论 -
前端 CSS 3D 照片墙自动旋转案例(详细步骤)
前端 CSS 3D 照片墙自动旋转案例(详细步骤),案例 DEMO 源码地址 ,仅供参考。原创 2023-12-26 18:28:35 · 1740 阅读 · 0 评论 -
CSS perspective 与 preserve-3d 的区别(带GIF效果图)
该属性是可以给图像呈现立体感,但是,那仅仅只是一种。/* 反复执行动画,注释,免得影响主要效果 */效果,但是理论上来说,图片如果真的在。后面去了的,这里依然还是在父容器的。:这个属性是让元素处在了真实的。空间中了,图片穿模了父容器的。的视觉感受,并没有真正的在。,拷贝下面代码,换个图片即可。环境中,是会穿模到父容器。上面的效果代码,新建一个。原创 2023-12-22 16:15:16 · 2531 阅读 · 0 评论 -
CSS perspective、perspective-origin 效果
指的是: 平面距离用户之间的距离,浏览器通过该距离来计算用户的视角大小,从而制造出近大远小的 效果。当元素的 大于 或者元素在 轴正向移动后,元素的大小都会超过实际大小;同理,当元素的 小于 或者在 轴反向移动后,元素大小都会小于实际大小。随着 的值增大,页面元素变得更小:这个其实不难理解,相当于用户眼睛离屏幕更远了,元素当然也就显得更小了。 定义了观察者的视角相对于显示元素的位置。通常用该属性来定义视线灭点,也即视线消失的位置。上面的例子中,并未指定该属性,因为默认使用 ,所以每一个元素看原创 2023-12-22 15:38:42 · 2310 阅读 · 0 评论 -
前端使用多张图片生成 Gif 效果(支持循环、不循环、完成回调)
/ 如果不循环则暂停(如果需要播放完成回调,在这里面添加即可)// 切换图片间隔时间(毫秒)// 超过最后一张了则重新开始。/* 初始化样式 */// 设置 class。// 获取 imgs。// 有图片进行隐藏。原创 2023-02-15 11:22:22 · 4022 阅读 · 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 · 12155 阅读 · 3 评论 -
H5 video 自动播放(autoplay)不生效解决方案
有个h5需要加入播放器,发现在微信浏览器中无法自动播放,在移动端普通浏览器中也无法正常自动播放ios浏览器中(微信或者其他浏览器),每次刷新进入网页首次需要手动点击播放,下次会自动播放。安卓在微信浏览器中是随便怎么样都不会进入自动播放,在其他浏览器中会进入自动播放。ios平台可以通过微信官方的jweixin插件来解决,但是安卓就暂时无任何办法,限制太严重,只能通过诱导用户点击屏幕进行播放。原创 2022-12-13 16:12:13 · 11330 阅读 · 7 评论 -
完美解决 - 前端发版后浏览器缓存问题(发版后及时拉取最新版本代码)
完美解决 - 前端发版后浏览器缓存问题(发版后及时拉取最新版本代码)原创 2022-10-18 11:18:00 · 19861 阅读 · 9 评论 -
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 · 554 阅读 · 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 · 3652 阅读 · 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 · 619 阅读 · 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 · 1988 阅读 · 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 · 5144 阅读 · 0 评论 -
textarea 动态宽高(根据内容动态撑开宽高)
重点:计算的 span 标签属性需要与 输入框 的字体属性保持一致,这样才能算的精准。案例代码,标签虽然有默认属性,但是为了能够通过 JS 取到值,所以必须手动写一遍样式属性,html 一样带上 style 即可。<script> // 文本输入框(必备属性,主要是字体相关属性) // var inputEl = document.createElement('textarea') // inputEl.rows = 1 // inputEl.style.width...原创 2021-11-11 15:40:59 · 2839 阅读 · 0 评论 -
前端 SVG 与 Canvas 框架案例 (画线、矩形、箭头、文字 ....)
Svgsvg 教程文档Canvascanvas 教程文档、canvas 教程文档graffitiCanvas.jsAILabel - Demokscreenshot原创 2021-10-27 10:07:54 · 1077 阅读 · 0 评论 -
iOS Safari 浏览器 100vh 带有滚动条解决方案
问题场景在移动端 safari 或者 chrome 浏览器中,使用 100vh,会出现滚动条。根本原因在 safari 和 chrome 浏览器中,100vh 是指去掉地址栏的高度,所以会出现滚动条。解决方案移动端一般不考虑 chrome 浏览器,用户基数小,如果只考虑微信公众号开发也不用考虑这个问题。如果需要考虑 safari 浏览器的用户体验,建议使用 100% 替代 100vh,或者使用 js,而不是 100vh。...原创 2021-09-10 19:47:44 · 3942 阅读 · 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 · 1568 阅读 · 3 评论 -
前端动画(动态)图标库收集
Titanic:Titanic 提供一系列的动画图标,以及以 JavaScript 的调用图标动画的方法后续在补充…原创 2021-09-06 10:33:33 · 911 阅读 · 1 评论 -
前端(CSS3、JS)动画库收集
animate.styleBounce.jsEffeckt.csshover.cssmagic.css原创 2021-09-06 10:32:39 · 150 阅读 · 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 · 2259 阅读 · 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 · 12475 阅读 · 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 · 740 阅读 · 0 评论 -
HTML5 流星+星空背景网页端【年会/婚礼】抽奖源码,打开导入名单即可使用,效果酷炫,调色即可温馨!
Github 下载地址:DZMLuckyDraw。网盘下载:DZMLuckyDraw。下载项目后,通过浏览器打开 主入口,然后导入名单即可使用,也可以自定义奖项名称,内定中奖人员,不用担心误关窗口。自定义奖项设置人员名单配置,内定配置规则可导出中奖名单(如果不小心误关抽奖窗口、刷新网页都不会导致丢失用户名单、中奖名单、剩余未中奖用户名单、奖项配置等,所以误操作也没事,可以重新在同一个浏览器中打开,再次进入抽奖页,继续操作即可,流程保持不变)。这里有一个优化版本,是由 shatinGitHub 进行优原创 2021-05-19 13:00:09 · 53191 阅读 · 93 评论 -
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 · 171 阅读 · 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 · 14808 阅读 · 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 · 7333 阅读 · 1 评论 -
CSS pointer-events 鼠标事件(让标签无法点击)
pointer-events 文档pointer-events 是CSS3的一个属性,支持的值非常多,其中大部分都是和SVG有关。对于前端日常开发,只要了解 none 这个值就够了。pointer-events: none; 意思就是让鼠标事件失效(链接、点击等事件)。指定标签例如 button a 之类的标签添加该属性之后,再按就没效果了,同时鼠标在按钮上也不会变成“一只手”了。除次之外,它还可以禁止标签的页面跳转。...原创 2021-04-27 15:09:56 · 876 阅读 · 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 · 241 阅读 · 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 · 1119 阅读 · 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 · 631 阅读 · 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 · 857 阅读 · 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 · 5147 阅读 · 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 · 3714 阅读 · 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 · 316 阅读 · 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 · 791 阅读 · 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 · 1439 阅读 · 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 · 720 阅读 · 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 · 161 阅读 · 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 · 271 阅读 · 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 · 177 阅读 · 0 评论