我们可以使用代码圈复杂度工具来统计代码的复杂度，并对复杂度较高的代码进行具体的场景分析。但不是说一定要将复杂度优化到某种程度，应该根据实际的业务情况做出优化决策。
本文翻译自 Randomness in CSS using trigonometry，作者：Kacper 略有删改 在过去，我已经介绍了CSS中使用模运算的伪随机性的主题，我使用素数创建了一个自动计数器，可以用来为每个对象生成不同的值。因此，我们可以独立地计算每个元素的伪随机值。 尽管这个解决方案很强大，但它几乎没有缺点： 模函数不是连续的 它过于复杂：需要3个变量和@property定义每
如图所示，这是一个杂志封面图的折叠效果，折叠前后的图片内容完全不违和，瞬间对这个图片内容的排版设计很是称赞，但这块不再本次文章的讨论范围，本次文章是要用纯CSS实现这个折叠效果。 按图片的效果进行代码还原很多方式都可以实现，以下是本次实现的主要几点： 纯CSS实现，不依赖JavaScript 使用单张图片，不需要在PS中切割成多单图片 可以通过样式属性中设置CSS变量来配置页面 实现过程 界
对于markdown相信大家都不陌生，日常写文档或日常记录都用到的比较多，书写的是markdown的格式，实时预览的是转换后的html样式。本次实现的需求是在uniapp中转换markdown文本展示在不同的平台，主要平台是浏览器使用和微信小程序使用。 对于这两个平台目前没有一个比较通用的解决方案，本次实现也是针对不同的平台单独实现，以下就是具体的实现过程。 浏览器实现 浏览器实现主要基于mark
基于上次翻译的 ??一个炫酷的头像悬停效果 收获了不少同学的喜欢，原作者近期进行了优化升级。本文将升级后的核心实现过程进行梳理讲解，如果没看过第一期的推荐先看看第一期的实现过程。升级后的效果如下图所示。 gif动画效果如下： 相对于上次的效果主要增加了背景的变化，增加了默认的旋转动画以及背景花瓣的效果。核心实现技术点如下： 不需要额外的元素，仅使用<img>标签 不使用伪元素 使
近期在开发AI对话产品的时候为了提升用户体验增强了对话输入框的相关能力，产品初期阶段对话框只是一个单行输入框，导致在文本内容很多的时候体验很不好，所以进行体验升级，类似还原了微信输入框的功能（只是其中的一点点哈?）。 初期认为这应该改动不大，就是把input换成textarea吧。但是实际开发过程发现并没有这么简单，本文仅作为开发过程的记录，因为是基于uniapp开发，相关实现代码都是基于uni
主要分享在浏览器和小程序中前端如何合成海拔图片并保存到本地，在不同的设备或DOM元素可能会存在一定的兼容性，本次主要分享核心实现的逻辑。
本文翻译自 How the CSS :is, :where and :has Pseudo-class Selectors Work，作者：Craig Buckler 略有删改 CSS 选择器允许我们按HTML文档中的类型、属性或位置选择元素。本教程介绍了三个新选项:is()、:where()和:has()。 选择器通常用于样式表中。以下示例选中所有<p>段落元素并将字体粗细更
CSS渐变通常用于创建花哨的图案，因此我选择了其中一些仅使用`radial-gradient()`制作的图案。通过构建它们，我们将了解有关这些渐变的一切。
在本文中，我们将介绍使用CSS Grid在水平和垂直方向上居中div的五种方法，当然这些技术可用于任何类型的元素。
对于不同的颜色格式，它们之间存在一些重要的区别。本文将带您深入了解这些选项，包括它们的工作原理、如何解析它们以及如何灵活应用
今天要实现的效果如图所示，鼠标悬停是图片卡片会有3D翻转的效果，且动画过程中还带有发光的效果。类似这种3D悬停效果日常看到的比较多，但是今天实现的这个效果有以下几个亮点： 核心CSS代码不超过10行 没有额外的元素（只有<img>标签） 没有伪元素 整个交互过程主要就两个功能点： 鼠标悬停时卡片3D翻转 鼠标悬停时发光的效果 卡片3D翻转 开启3D效果需要用到 perspec
这份文档列出了一些使我们的（Web）界面更好的细节处理方式，这个列表并不是完整全面的，但它会基于经验持续不断更新。其中有些实现可能是偏于主观性的，但大多数适用于所有网站。
CSS小技巧使用 font-variation 可变字体，我们可以实现更加智能、美观、易读的排版效果，让文字内容更加生动、丰富。
一个包含云朵，星星，太阳，月亮，小飞机，太空熊等元素的夜间模式切换开关效果，如此与众不同的交互设计效果你不来看看吗
基于伪元素设置锥形渐变 `repeating-conic-gradient`并配合`-webkit-mask-composite`实现自定义圆形虚线边框的效果。
本文介绍了一个有趣的图片加载效果，主要使用了 `image-rendering: pixelated` 配合 `background-position` 产生的过渡加载效果。
一个很有创意的小工具网站，将一个URL地址转换为都是 ooooooooo 的样子，通过转换后的地址访问可以转换回到原始地址，设计很巧妙的实现了这个功能。
本文翻译自 2022-in-web-performance，略有删改 我们衡量和优化网站速度的方式总是在变化。因为有新的Web标准被引入（并最终得到广泛支持），新的工具被开发，新的度量标准被提出。本文介绍了2022年Web性能格局发生变化的事项。 优先级提示 优先级提示是我今年见过的影响最大的浏览器功能，在优化LCP（Largest Contentful Paint）时只需将fetchprio
这是一个很不错且实用的功能，应用到的场景也挺多，但是目前还是在实验阶段，真正可以线上环境使用还需要一定的时间，但是可以提前了解一下发展的趋势。
刷抖音看到一个不错的使用方式，就是使用chatGPT自动回复你在抖音发布视频中的评论，对于有些网络不方便的朋友这个真的很不错啊，很值得试一试，以下是个人的体验后的使用教程，有兴趣的朋友可以自己试试。 以下是接入教程： 首先要用到集简云这个平台，使用这个平台将抖音和chatGPT数据打通。 集简云是一款超级软件连接器，无需开发&代码知识就能轻松打通数百款软件之间的数据连接，构建自动化与智能
Notion的AI功能可以帮助你更加高效地管理工作和生活。无论是团队合作还是个人使用，都能帮助你专注于任务本身，提升工作效率。如果你还没体验过Notion的话，快来试试看吧~
私有化部署chatGPT，从此告别网络困扰，一个基于GPT-3.5 Turbo的开源项目，界面简洁大气，反应速度快，快来试试看吧~
CSS`@import`可以用来加载其他CSS样式的便捷方式，但是使用它也会使网站的资源呈现变得更慢，导致网站呈现的时间更长。
VisBug支持诸如文本编辑、颜色调整、元素选择、边距和填充等常见的网页设计和开发任务。通过这个插件，开发人员可以更快速地创建和修改网页，提高工作效率。
你还在为开通Chat GPT账号苦恼吗 你还在为不能访问的问题苦恼吗 你还在为访问次数及速度苦恼吗 今天推荐的这个工具对于这些问题都不是问题，基于GPT-4（官网是这样介绍的，但是有人通过对话让它回答模型，它的回答却不是，运行中也有一定的错误率，实际大家需要自行判断），分分钟即可体验，不需要注册账号，没有Q的问题，没有访问次数的限制。专为开发者设计，针对你的代码逐行分析，优化代码，书写代码。以下是
如何实现一个有特色的按钮交互效果，按钮的背景色可以随着鼠标的移动变化且背景区域会随着鼠标的移动产生弹性变化效果，按钮的文字阴影会随着鼠标的变化而变化，快看看看吧~
在实际开发过程中，我们经常都会用到脚手架来构建前端工程项目，使用脚手架可以大幅提升项目的构建速度，通过命令行的交互，选择你所需要的配置与集成，可快速完成初始项目的创建。
微信小程序中很早就支持了蓝牙能力，本本缘于一个外包蓝牙项目解锁前端调试蓝牙开发的技能，顺道记录一下开发的过程及遇到的问题
你知道当一个人的头像从一个圆圈或洞里伸出来时的那种效果吗？本文将使用一种很简洁的方式实现该悬停效果，只用了一个img元素和不到20行的CSS技巧实现一个炫酷的头像悬停效果
Copyright © 2005-2023 51CTO.COM 版权所有 京ICP证060544号
