css3

我命由我12345

CSS - CSS 媒体查询 orientation

伪类与伪元素的魔法：纯 CSS 打造炫酷的按钮悬停特效一个优秀的网页不仅需要静态的美，更需要动态的“生命力”。当用户将鼠标悬停在按钮或链接上时，如果毫无反应，体验会显得极其生硬。很多初学者为了实现这些特效，习惯性地引入 JavaScript，但实际上，CSS 本身就自带一套强大的交互机制。今天，我们就来揭开伪类（Pseudo-class）与伪元素（Pseudo-element）的神秘面纱，纯 CSS 打造炫酷的按钮悬停特效。

Java Web 前端简介前端开发的主要职责是将数据以美观的样式呈现出来，核心工作就是开发网页程序在学习前端之前，需要明确以下三个核心问题：

VSCode 简介+安装+JavaWeb前端常用插件+简单配置通过快速入门案例，发现由记事本文件开发 html 是非常不方便的，所以接下来需要学习一款前端专业的开发工具 VS Code

妙用:focus解决0到auto高度过渡的边界场景各位网友大家好，之前我己为大家介绍了0到auto的过渡，其核心是 height:calc-size(auto,size)

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 基础语法，很多考点其实搞清楚底层逻辑就能秒杀，但死记硬背很容易在细节上丢分。