CSS 全新属性如何实现一个内凹圆角

11月11日 CSS 没有评论 CSS

写在开头学会shape()之后可以轻松完成如下各种不规则图形的效果！什么是 shape() shape() CSS 函数用于定义 clip-path 和 offset-path 属性的形状。它结合了一个初始起点和一系列定义形状路径的...

弃用 html2canvas！快 93 倍的截图神器

11月11日 HTML,前端没有评论 html2canvas,SnapDOM,前端

在前端开发中，网页截图是个常用功能。从前，html2canvas 是大家的常客，但随着网页越来越复杂，它的性能问题也逐渐暴露，速度慢、占资源，用户体验不尽如人意。好在，现在有了 SnapDOM，一款性能...

11月11日 HTML,JavaScript,前端没有评论 HTML,JavaScript,popover,前端

上周二，我在改一个“远古”管理后台的时候，被自己气笑了。为了维护几个弹窗，我居然堆了 500 多行 JavaScript：管理焦点的 focus trap 监听 Esc 关闭点击遮罩关闭一堆 ARIA 无障碍属性...

11月05日 Canvas 没有评论 Canvas,HTML

在现代前端开发中，HTML 与 DOM 提供了声明式、对象化的界面构建方式。浏览器自动管理布局、样式和事件。然而，<canvas> 完全不同——它是一个基于命令的绘图表面，没有内置的“元素”概念。 Canvas ...

11月05日 CSS 没有评论 CSS,前端,进度条

基础版本「绘制基础图形 (HTML/SVG)」我们先用 <svg> 标签画出两个叠在一起的圆环（<circle>）：一个作为灰色的背景，另一个作为亮黄色的进度条。通过 CSS 的 stroke-dasharray 和 strok...

05月05日 JavaScript 没有评论 JavaScript,对象,对象字符串

javaScript 如何判断字符串是类似对象字符串在 JavaScript 中，判断一个字符串是否是类似对象的字符串（例如 JSON 格式的字符串，如 "{ name: 'John', age: 30 }"），可以通过以下几种方法实...

05月05日 HTML 没有评论 3D时间轴

效果展示完整源码 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>3D旋转时间轴</title> <link re...

05月05日 CSS 没有评论 CSS,css特性

1. clip-path：自由裁剪元素形状通过定义多边形、圆形或 SVG 路径，实现非矩形元素的切割效果。动态多边形裁剪 .element { clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); /* 梯形效...

05月05日 CSS 没有评论动态模糊,毛玻璃

提到网页毛玻璃效果，总结下来有以下2种： 1. 模糊元素本身 2. 模糊元素后面的内容早在之前，1就已经可以通过 CSS3 filter 属性实现，而2一直没有一个好的解决方案。对1的运用，也可以达...

02月18日 Vue 没有评论 Vue3

本文来分享 25 个 Vue 开发必备的实用技巧！使用 defineModel() 实现双向数据绑定在 Vue 3.4 中，推荐使用 defineModel() 宏来实现双向数据绑定，这大大简化了代码。 <!-- 使用 defineModel 之前 ...