css3

HTML前端利用flex解决input定位的问题最近在做移动端H5聊天应用发现，当input框在最底部并且使用 position:fixed 属性的时候在苹果手机中会出现不兼容的情况。

Day 20 _ 3D 翻卡_perspective 写错人,卡片就穿帮本文是《30天精通CSS》专栏第 20 篇,订阅专栏不迷路。摘要:本文基于 CSS Transforms Level 2 与 CSS Transitions Level 1 现行规范,做一张正面问、背面答的 3D 翻卡。核心只有一句话:perspective 加在父级和加在被旋转元素自身,是两种完全不同的视点——前者让正反两面共享同一个消失点、整体翻转,后者让每个元素各转各的、3D 感明显变平。今天用两张对照图、一段翻卡 GIF、一条标了 backface 临界点的定格胶片把这件事讲透,再补 transf

Day 21 | animation 与 keyframes:把动画从 A 到 B 变成多点编排本文是《30天精通CSS》专栏第 21 篇,订阅专栏不迷路。摘要:本文基于 CSS Animations Level 1 现行规范,用一个加载指示器把 @keyframes 的完整心智讲清。transition 只能从一个状态补到另一个状态,而 keyframes 能在任意多个时间点之间编排——加载指示器、入场序列、循环呼吸全靠它。今天按四版递进:最简淡入 → 多帧位移动画 → 六个动画属性一次到位 → 和 transition 划清分工。新手最容易踩的是忘写 animation-fill-mode,动画

智慧文旅数字人体验平台demo html

神膘护体小月半

mask 渐变遮罩属性

行内块元素在垂直方向上对齐问题在项目中遇到了样式问题，父元素设置了display: inline-flex;，并且有align-items: start，但两个子元素在垂直方向上仍然不能对齐，而且查找元素显示的高度也不一样。而且如果我修改padding的值，一个向上跑、一个向下跑。

Day 15 | 不改一行 HTML,给页面加上引号、角标和标签本文是《30天精通CSS》专栏第 15 篇,订阅专栏不迷路。本文目录同一个效果,两种写法差在哪:一个真加了标签,一个只是画了个装饰

小江的记录本

【CSS】CSS 动画：transition、animation、transform、CSS3 新特性（附《思维导图》）CSS动画是通过CSS属性随时间的变化实现的视觉动效，无需JavaScript即可实现流畅的交互动画。主要分为三大类：

小江的记录本

【HTML】HTML5 新特性、语义化标签、浏览器渲染流程（附《思维导图》）HTML（HyperText Markup Language，超文本标记语言）是构建网页结构的核心标记语言，标准由 W3C 与 WHATWG 共同维护，当前处于**HTML 活标准（Living Standard）**阶段，持续迭代更新。

Flex布局中 flex: 1 的完整解析与实战指南在前端开发中，Flexbox 是最常用的布局方案之一，而 flex: 1 更是高频出现的属性值。很多开发者虽然每天都在用，却未必真正理解它的底层逻辑。本文将从 flex-basis 的角度出发，系统拆解 flex: 1 及其变体的行为差异，帮助你彻底掌握这一核心概念。

Python关于老游复刻与创新2这是双人乒乓球模拟游戏HTML代码，支持两位玩家在同一设备上使用键盘操控球拍对战。```html<!DOCTYPE html>

【应用】UUID v7 生成器 HTML 代码核心生成逻辑：UUID v7 的高 48 位基于 Date.now() 获取的毫秒级 Unix 时间戳，剩余位则通过 crypto.getRandomValues() 填充加密级随机熵，确保了唯一性和安全性。

告别枯燥字体：Web 字体加载策略与 font-display 最佳实践你是否发现，无论布局多精美，如果网页上的文字还是千篇一律的宋体或 Arial，整个设计就会显得廉价且缺乏品牌感。引入自定义的 Web 字体能瞬间提升网页的质感，但随之而来的往往是性能灾难：页面加载时文字突然消失（FOIT），或者先显示丑陋的系统字体再突然跳动（FOUT）。今天，我们就来彻底攻克 Web 字体加载的痛点，让你的网页既好看又流畅。

এ慕ོ冬℘゜

前端实战：使用 jQuery 与 CSS3 打造动态数据表格与滑块交互在后台管理系统或数据看板中，**数据表格（Table）与状态切换（Switch）**是最常见的组合。今天我们将通过一个“武器装备展示系统”的实战案例，探讨如何使用原生 CSS3 和 jQuery 实现一个轻量级的动态交互表格。

二级小助手

二级Web前端选择题高频真题20道与考场避坑笔记二级 Web 前端程序设计选择题占 40 分。这门科目考点涵盖网络协议、HTML5 标签规范、CSS3 层叠与盒模型以及 JavaScript 基础语法，很多考点其实搞清楚底层逻辑就能秒杀，但死记硬背很容易在细节上丢分。

呼噜想睡觉

Flex弹性布局一、知识点收获1. Flex弹性布局学会使用`display:flex`实现导航栏元素横向排列，掌握`justify-content`、`align-items`控制元素对齐；理解弹性布局相比浮动布局更适合自适应页面，快速完成一维方向上元素排布。

唯美花朵风格的黑胶唱片音乐播放器表格粉色渐变唱片：带纹理高光，播放时匀速旋转唱臂动画：播放时从休息位平滑移动到唱片上方四朵手绘花：白、红、橙、黄四色小花点缀盘面

‘’林花谢了春红‘’

小玩意生日快乐

Vue3 环境搭建 + 第一个 HelloVue 项目（零基础入门）很多前端新人分不清 Vue2 和 Vue3 区别，现在企业新项目全部主推 Vue3 + Vite，本系列从零起步，不跳过任何基础，今天第一篇先搞定本地开发环境，跑通第一个 Vue3 页面。

纯手搓css样式：科技感弹窗边框pc端科技感的弹窗样式，纯手搓，先看一下实现的效果：以上实现是react+ts：