一种新的骨架屏方案
动机 最近遇到了一个实现骨架屏的需求，我大致调研了一下市面上使用得比较多的骨架屏方案，发现这些方案很多都不能满足我的需求，比如 或者 从第一幅图可以看到，骨架屏中的元素有着各自独立的动画效果，也就是说其中的“波浪”并不是从左边的元素跑到右边的元素，而是分别从每个元素的左边跑到每个元素的右边，这看起来 ... »
React数字滚动组件 numbers-scroll
数字滚动组件，也可以叫数字轮播组件，这个名字一听就是非常普通常见的组件，第一反应就是想找找网上大佬的东西顶礼膜拜一下，这一搜，还真是没找到趁手的╮(╯▽╰)╭。 最近接了大屏的需求，数字滚动肯定是免不了的，所以开始撸袖子，造轮子了（ numbers-scroll ）。 首先给大家看下轮子的效果吧： ... »
巧用 CSS 变量，实现动画函数复用，制作高级感拉满的网格动画
本文将介绍一种基于 CSS 变量技巧，通过合理使用 CSS 变量，实现 CSS 动画 @keyframes 的复用。 CSS 变量 CSS 变量大家应该都比较熟悉了，已经不能算是新知识了，快速过一遍。 CSS 变量（CSS Variable），在之前也叫做 CSS 自定义属性，其使用方式如下： // ... »
Unocss(原子化css) 使用及vue3 + vite + ts讲解
目录 Unocss 简单使用 下载Unocss依赖 在vite.config.ts中引入 最后在main.ts中引入uno.css 然后就是使用 最后附带样式查询地址 想使用图标 图标库具体使用 Unocss 简单使用 首先初始化一个vite项目 使用pnpm安装 pnpm cr »
vue使用css-rcurlyexpected等less报错问题
目录 使用css-rcurlyexpected等less报错 vue中使用less报错问题 1、使用less 2、main.js使用less报错 使用css-rcurlyexpected等less报错 之前使用webstorm进vue的开发，今天刚换成VScode发现一个问题，百度上的 »
CSS 数学函数与容器查询实现不定宽文本溢出跑马灯效果
在许久之前，曾经写过这样一篇文章 -- 不定宽溢出文本适配滚动。我们实现了这样一种效果： 文本内容不超过容器宽度，正常展示 文本内容超过容器的情况，内容可以进行跑马灯来回滚动展示 像是这样： 但是，之前的方案，有一个很明显的缺点，如果我们事先知道了容器的宽度，那么没问题，但是如果没法确定容器的宽度， ... »
html+css+js实现简易版ChatGPT聊天机器人
OpenAI的一款聊天机器人模型ChatGPT爆火，本篇文章用一百行html+css+js代码给大家制作一款简易的聊天机器人。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 »
Three.js 进阶之旅：物理效果-碰撞和声音 ?
本文内容主要汇总如何在 Three.js 创建的 3D 世界中添加物理效果，使其更加真实。所谓物理效果指的是对象会有重力，它们可以相互碰撞，施加力之后可以移动，而且通过铰链和滑块还可以在移动过程中在对象上施加约束。 通过本文的阅读，你将学习到如何使用 Cannon.js 在 Three.js 中创建... ... »
Jest + React 单元测试最佳实践
我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 前言 单元测试是一种用于测试“单元”的软件测试方法，其中“单元”的意思是指软件中各个独立的组件或模块。开发者需要为他们的代码编写测试用例以确保这些代码可以正常使用。 »
CSS 3 所有的选择器整理（2023.2）
你知道的和你不知道的所有选择器。不包含尚未广泛实现的，也不包含已弃用的。 基本的选择器规则（Selector） 类型（Type）选择器 直接用标签匹配特定的元素 span { ... } p { ... } 类（Class）选择器 以.开头，匹配含有这个 class 的元素 .info { ... ... »
Web 页面如何实现动画效果
Web 页面可以使用多种方式实现动画效果，其中最常用的有两种： CSS 动画：通过 CSS 中的 transition 和 animation 属性来实现动画效果。CSS 动画实现起来简单，性能消耗小，支持广泛。 JavaScript 动画：通过 JavaScript 代码来实现动画效果。JavaS ... »
CSS-@规则(At-rules)常用语法使用总结
At-rules规则是目前CSS中一种常见的语法规则，它使用一个"@"符号加一个关键词定义，后面跟上语法区块，如果没有则以分号结束即可。 这种规则一般用于标识文档、引入外部样式、条件判断等等，本文是对该规则的使用总结。 常用规则 @import @import 主要用于从其他样式表导入新的样式规则， »
css3如何实现倾斜效果
这篇文章主要介绍“css3如何实现倾斜效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“css3如何实现倾斜效果”文章能帮助大家解决问题。 css3实现倾斜效果的方法：1、使用“skew(x,y)”函数可以使元素在水平和垂直方 »
CSS中的各种格式化上下文-FC（BFC）、IFC、GFC、FFC）
什么是FC？ FC是Formatting Context的缩写，中文名：格式化上下文。是 W3C在CSS2.1 规范中的一个概念。 FC是指页面中一篇渲染区域，渲染区域内使用的格式化上下文的渲染规则，决定了该区域以及其子元素如何定位。当然，使用同的渲染规则，也会对其他元素的起到相互关系的作用。 主要 ... »
css如何实现滚动条不占用高度
这篇文章主要讲解了“css如何实现滚动条不占用高度”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css如何实现滚动条不占用高度”吧！ css实现滚动条不占用高度的方法：1、打开相应的HTML文件；2、查找原始代码“ov »
html/css中tt指的是什么
这篇“html/css中tt指的是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“html/css中tt指的是什么”文章吧。 在html/css中，t »
千姿百态,瞬息万变,Win11系统NeoVim打造全能/全栈编辑器(前端/Css/Js/Vue/Golang/Ruby/ChatGpt)
我曾经多次向人推荐Vim，其热情程度有些类似现在卖保险的，有的时候，人们会因为一些弥足珍贵的美好暗暗渴望一个巨大的负面，比如因为想重温手动挡的快乐而渴望买下一辆二十万公里的老爷车，比如因为所谓完美的音质而舍不得一个老旧的有线耳机，比如因为一个铜炉火锅而期待北京那漫长而寒冷的冬天。 我曾经 »
antd 3.x升4.x踩坑之路～
我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 兼容性问题 第三方依赖兼容问题 React - 最低 v16.9，部分组件使用 hooks 重构 react升级相关文档 Less - 最低 v3.1.0，建议升级到 ... »
前端使用JavaScript结合CSS实现3D旋转跟随鼠标变化
目录 纯CSS实现元素的3D旋转 控制 Y 方向的移动 结合 X&Y 方向的移动 设置平滑出入 简单分析一下，这个交互效果主要有两个核心： 借助了 CSS 3D 的能力 元素的旋转需要和鼠标的移动相结合 本人简单的说一下如何使用纯 CSS 实现类似的交互效果，以及，借助 Java »
css如何去除倾斜属性
今天小编给大家分享一下css如何去除倾斜属性的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。 css去除倾斜属性的方法：1、打开相应的HTML文件，并找到 »