Apple 2025 年度发布会 LOGO 以标志性的苹果图形被注入炽热的火焰质感，色彩从暖调橙黄向冷调湛蓝自然过渡，似高温灼烧下的金属表面，迸发出熔融的光泽；又若无形的能量在流动，勾勒出科技的脉搏与律动，将 “科技” 与 “力量” 的碰撞感具象化，光影的明暗交错削弱了平...

大家可能知道，不久前 twitter 换了一个新 logo，从蓝色小鸟变成了一个 “x”，如下不聊其他的，看看如何用 CSS 渐变来绘制这样一个图形一、 x 的绘制整个 logo 是一个镂空的“x”形状，先不考虑镂空部分，如何绘制实心的“x”呢渐变有 3 种，线性渐变、径向渐变和锥形渐变...

本文主要介绍 AI 绘图开源工具 Stable Diffusion WebUI 的 API 开启和基本调用方法，通过本文的阅读，你将了解到 stable-diffusion-webui 的基本介绍、安装及 API 环境配置；文生图、图生图、局部重绘、后期处理等 API 接口调用；图像处理开发中常用到一些方法如 Bas...

专栏上篇文章《Three.js 进阶之旅：页面平滑滚动-王国之泪》 讲解并实现了如何使用 R3F 进行页面图片平滑滚动，本文内容在上节的基础上，学习如何使用滚动控制 ScrollControls 来控制模型的的动画播放和相机动画，通过滚动鼠标滚轮或者上下移动触摸板，来控制模型的...

浏览网页时，常被一些基于鼠标滚轮控制的页面动画所惊艳到，比如greensock 官网这些 showcase 案例页面就非常优秀，它们大多数都是使用 Tween.js、gasp 及 greensock 提供的一些动画扩展库实现的。使用 Three.js 也能很容易实现丝滑的滚动效果，本文使用 React + Thr...

专栏上篇文章《Three.js 进阶之旅：全景漫游-初阶移动相机版》中通过创建多个球体全景场景并移动相机和控制器的方式实现了多个场景之间的穿梭漫游。这种方式的缺点也是显而易见的，随着全景场景的增加来创建对应数量的球体，使得空间关系计算难度提升，并且大幅降低...

之前写过这样一篇文章：CSS 实现多行文本“展开收起”，介绍了一些纯 CSS 实现多行文本展开收起的小技巧，特别是右下角的“展开收起”按钮，用到了浮动布局，非常巧妙，有兴趣的可以回顾一下。

3D 全景技术可以实现日常生活中的很多功能需求，比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的，当然了目前已经有很多相关内容的文章，我之前就写过一篇《Three.js 实现3D全...

本文在专栏上一篇内容《Three.js 进阶之旅：物理效果-碰撞和声音》的基础上，将使用新的技术栈 React Three Fiber 和 Cannon.js 来实现一个具有物理特性的小游戏，通过本文的阅读，你将学习到的知识点包括：了解什么是 React Three Fiber 及它的相关生态、使用 React...

本文内容主要汇总如何在 Three.js 创建的 3D 世界中添加物理效果，使其更加真实。所谓物理效果指的是对象会有重力，它们可以相互碰撞，施加力之后可以移动，而且通过铰链和滑块还可以在移动过程中在对象上施加约束。 通过本文的阅读，你将学习到如何使用 Cannon.js ...

欢迎关注我的公众号：前端侦探2022 全年共计发布了 41 篇关于 CSS 的原创文章。为了方便查阅学，花了一点时间分类整理了一下，按照时间倒序排序如下CSS 如何根据背景色自动切换黑白文字？CSS 如何实现羽化效果？万能的CSS 渐变！单标签绘制一个足球场CSS、SVG、Canva...

一些大公司，有很多产品线，产品线又分为很多部门，这些部门的技术选型一般来说并不统一，可能有些用 Vue、有些用 React、有些用 Svelte。即使同样用 Vue，也有人用 element-UI、有人用 ant-design-vue。

兔年到了，祝大家身体健康，万事顺利。本文内容作为兔年新春纪念页面，将使用 Three.js 及 其他前端开发知识，创建一个以兔子为主题的 3D 简单的趣味页面 Rabbit craft go。本文内容包括使用纯代码创建三维浮岛、小河、树木、兔子、胡萝卜以及兔子的运动交互、浮岛的...

欢迎关注我的公众号：前端侦探练习 CSS 有一个比较有趣的方式，就是发挥想象，绘制各式各样的图案，比如来绘制一只思否猫？思否猫，SegmentFault 思否的吉祥物，是一只独一无二、特立独行、热爱自由的(>^ω^<)独角猫，也是社区的首席摸鱼官你也可以提前查看完整...

不知不觉，掘金关注者人数已经超过 1000 人，因此特地做了这个页面纪念一下，感谢大家关注 🙇‍，希望思否的粉丝也涨涨。后续也将继续努力，持续输出一些有价值的文章。本文内容涉及的技术栈为 React + Three.js + Stulus，本文中主要包含的知识点包括：圆锥几何体 Con...

对于接触互联网地图的同学来说，最开始接触的恐怕就是坐标转换的过程了。由于地球是个近似椭球的形状，有各种各样的椭球模型来模拟地球，最著名的也就是GPS系统使用的WGS84椭球了。但是这些椭球体的坐标使用的是经纬度，单位是角度。目前我们的地图大多是二维平面上...

地球是一个椭球，Datum是一组用于描述这个椭球的数据集合。最常用的一个Datum是WGS84（World Geodetic System 1984），它的主要参数有：

欢迎关注我的公众号：前端侦探在某条 APP 中，如果长按点赞，会出现这样花里胡哨的动画，如下这个动画有两部分组成，其中这个随机表情的实现可以参考 coco 的这篇文章 巧用 transition 实现短视频 APP 点赞动画比较类似，这里就不重复了，我们这里要实现的是这个不断...

在插画中添加噪点肌理可以营造出一种自然的氛围。噪点肌理可以用于塑造阴影、高光、深度以及更多细节，并优化插画质感，应用噪点肌理的方式在扁平插画中广受欢迎。

当然，不使用 HTML + CSS 的主要原因在于，粒子动画通常需要较多的粒子，而如果使用 HTML + CSS 的话势必需要过多的 DOM 元素，这也就导致了使用 HTML + CSS 构建的粒子动画在性能上毫无优势。