前端开发 Html/Css
刷新
宇宙画布：纯 CSS+JS 实现交互式深空艺术

博主头像 ‍ 写在开头 点赞 + 收藏 学会 大家好，我是前端开发者。在前端技术不断发展的今天，CSS 早已不只是用来布局和美化页面的工具，它还能成为我们创作视觉艺术的画笔。今天给大家带来一个纯 CSS + 原生 JS 实现的交互式深空场景，无需任何图形库，就能在浏览器里呈现出繁星闪烁、星 ...

CSS终于支持渐变色的过渡了

博主头像 ‍ 写在开头 点赞 + 收藏 学会 背景 在做项目时，总会遇到UI给出渐变色的卡片或者按钮，但在做高亮的时候，由于没有过渡，显得尤为生硬。 过去的解决方案 在过去，我们如果要实现渐变色的过渡，通常会使用如下几种方法： 添加遮罩层，通过改变遮罩层的透明度做出淡入淡出的效果，实现过渡 ...

用 Intersection Observer 打造丝滑的级联滚动动画

博主头像 ‍ 写在开头 点赞 + 收藏 学会 无需任何动画库，仅用原生 Web API 实现滚动时丝滑的淡入滑入效果，兼顾性能与体验。 你是否见过这样的交互动效： 用户滚动页面时，一组卡片像被“唤醒”一样，依次从下方滑入并淡入； 如果这些元素在页面加载时已在视口内，它们也会自动按顺序浮现。 ...

前端大屏适配方案：rem、vw/vh、scale 到底选哪个？

博主头像 ‍ 写在开头 点赞 + 收藏 学会 上周帮朋友救火一个数据大屏项目，甲方临时说要从 1920×1080 的投影换成 3840×1080 的超宽拼接屏。朋友用的是 transform: scale 方案，结果两边各留了一大片黑边，甲方当场黑脸。 这事儿让我决定把大屏适配这个"老生常 ...

前端实现进度条

博主头像 ‍ 写在开头 点赞 + 收藏 学会 后端处理数据处理逻辑特别多的时候，并不会很及时返回数据，一般情况后端给前端返回进度，这个目前是前端自己返回进度到90，等到接口返回完成再到100% 1、设置全局样式 <div class="loading-overlay" v-show="Pa ...

二、HTML文档结构详解

博主头像 目录2.1 html基础入门2.1.1 标签、元素与属性2.1.2 基础语法2.1.3 文档模式2.2 文档核心骨架2.2.1 DOCTYPE声明与作用2.2.2 <html>根元素与lang属性2.2.3 <head>头部2.2.4 <body>主体2.2.5 注释与代码可读性2.2 头部head ...

从快照到时间序列：一次实时行情系统的结构演进与架构取舍

博主头像 从快照到时间序列：一次实时行情系统的结构演进与架构取舍 在多数前端行情系统中，Ticker 快照接口足以支撑列表展示：最新价、涨跌幅、成交量定时刷新即可。 但当系统开始引入 K 线图表后，前端架构会发生一次实质性的结构变化。 这篇文章不讨论某个具体 API 如何调用，而是围绕一次真实的结构升级过程， ...

为什么 SVG 能在现代前端中胜出？

博主头像 ‍ 写在开头 点赞 + 收藏 学会 如果你关注前端图标的发展，会发现一个现象： 过去前端图标主要有三种方案： PNG 小图（配合雪碧图） Iconfont SVG 到了今天，大部分中大型项目都把图标系统全面迁移到 SVG。 无论 React/Vue 项目、新框架（Next/Rem ...

一个月，Vue四件套，专为移动端深度优化的第三方网易云 WebApp

博主头像 这年代真的很魔幻：物价在涨、黄金在涨，人都在悄悄发福，更别说内存条蒸蒸日上。结果回头一看，音乐软件也跟着 “发福” 到离谱。 就拿网易云来说，十年间安装包膨胀十几倍，从一个纯粹的播放器，硬生生塞成了集直播、K 歌、社区、短视频、商城于一体的 “全能平台”。权限越要越多，体积越更越大，对于性能不怎么好 ...

前端实现速度线

博主头像 功能 前端实现速度线，在矩形内生成黑白三角形且闪动。 思路 速度线可以使用多个角度相同的三角形分解矩形。三角形的渲染使用canvas连线fill就行，三角形在矩形上的两个点可以通过计算每个三角形的边长来获取。三角形在矩形上的边长使用三角函数获取。 HTML结构：包含一个画布（Canvas）用于显示图 ...

为什么有些人边框不用border属性

博主头像 ‍ 写在开头 点赞 + 收藏 学会 1) border 会改变布局（占据空间） border 会参与盒模型，增加元素尺寸。 例如，一个宽度 200px 的元素加上 border: 1px solid #000，实际宽度会变成： 200 + 1px(left) + 1px(righ ...

那个写 width: 33.33% 的前端，终于被 flex: 1 拯救了

博主头像 ‍ 写在开头 点赞 + 收藏 学会 告别百分比计算：从文档流到 Flex 弹性布局的进化之路 在 CSS 的世界里，布局方式的演进就像是一场对“控制权”的争夺战。从最初顺其自然的文档流，到精打细算的 inline-block，再到如今游刃有余的 Flexbox，我们的代码变得越来 ...

微信朋友圈图片布局

博主头像 ‍ 写在开头 点赞 + 收藏 学会 在朋友圈中，除了普遍的一行三列的布局外，一张、二张、四张图片时的布局是不一样的。一张图片时，按图片原有宽高显示。 两张图片，并行展示，图片会偏大一些。 四张图片时，一行显示两个。 三张、及四张以上时，按一行三列排序。 实现 这里结合naive ...