中级前端进阶 第十一步) 深入CSS3 新特性，附源码，可视化演示等
·
《中级前端进阶方向 第一步)JavaScript 微任务 / 宏任务机制》
《中级前端进阶方向 第二步)深入事件循环（Event Loop）》
《中级前端进阶方向 第三步)深入javascript原型链，附学习代码》
《中级前端进阶方向 第四步)深入javascript 闭包、this 、作用域提升，附学习案例源码》
《中级前端进阶方向 第五步)深入 javascript高级特性Proxy，附学习案例源码》
《中级前端进阶方向 第六步)深入 javascript 高级特性Generator生成器，附案例源码》
《中级前端进阶方向 第七步)深入 javascript 高级特性Async/Await，附源码》《中级前端进阶方向 第八步)深入 javascript 高级特性 Promise，附案例源码》
《中级前端进阶方向 第九步)深入 javascript 高级特性 模块化 与 装饰器，附案例源码》
《中级前端进阶方向 第十步)深入 浏览器性能优化（渲染机制、内存泄漏..），附案例源码》
--🖍《延伸扩展》-----------------------------------------------------------------------------------------
《中级前端进阶方向 延伸扩展一)javascript 私有状态／工厂函数／回调中保持局部状态／防抖与节流／IIFE 捕获》
快速导航：
-
选择器增强（结构性/功能性选择器）
-
盒模型与布局：Flexbox / Grid / Multi-column / Logical properties
-
视觉效果：圆角 / 投影 / 背景 / 渐变 / 多背景 / Blend / Filter
-
变换、过渡与动画（transform / transition / keyframes）
-
响应与媒体：媒体查询 / 视口单位 / 媒体特性（prefers-*）
-
变量、函数与计算：Custom Properties / calc / clamp / min/max
-
字体与排版：@font-face / font-variant / text-wrap / hyphens / ligatures
-
新伪类与伪元素（:nth-*, :is/:where/:has, ::before/::after）
-
特性检测与容错：@supports 与渐进增强
-
新兴与高级：Container Queries / CSS Houdini / Typed OM / Subgrid
-
可访问性与性能建议、常见陷阱
1. 选择器增强（Selectors）
核心点
CSS3 引入并普及了大量结构性选择器（例如 :nth-child()、:not() 等），并且后来又出现了更强大的 :is()、:where()、:has() 等（Selectors Level 3/4 的成果）。这些选择器让我们能更语义、更少 DOM、更少类地表达复杂匹配逻辑。
代表选择器与示例
/* 结构选择器 */
li:nth-child(odd) { background: #f6f6f6; }
tr:nth-child(2n+1) td { ... }
/* 复杂否定：:not() 支持复合选择器（现代浏览器） */
.article :not(:first-child) { margin-top: 1rem; }
/* 匹配任一：:is() 简化复杂选择器 */
header :is(h1, h2, h3) { margin-bottom: .5rem; }
/* 优先级友好（:where 0 specificity） */
:is(.a, .b) { color: red; } /* 特性与 :is 一样，但 :where 不增加 specificity */
:where(.a, .b) { color: blue; } /* specificity = 0 */
/* 父选择器（关系选择器）：:has() —— “父能看到子” */
article:has(img) { padding-bottom: 1rem; }
/* 注意：:has 在一些环境可能仍需检查兼容性 */
实战建议
-
:is()用在重复前缀的复杂选择器上能显著简化代码并提升可读性。 -
:where()用于默认样式（zero specificity）非常适合库/重置样式。 -
:has()很强，但要注意对性能和兼容性的影响（在大 DOM 上滥用可能影响渲染/查询）。
2. 盒模型与布局
2.1 box-sizing
* { box-sizing: border-box; }
border-box 是现代 CSS 推荐的盒模型：padding 和 border 包括在 width/height 之内，布局更直观。
2.2 Flexbox（弹性布局）
用途：单维布局（水平或垂直），项自动伸缩、对齐、换行控制。
.container {
display: flex;
flex-direction: row;
align-items: center; /* 交叉轴对齐 */
justify-content: space-between; /* 主轴对齐 */
}
.item { flex: 1 1 200px; } /* grow shrink basis */
实战：常用于导航、工具栏、卡片行等。
2.3 CSS Grid（网格布局）
用途：二维布局（行列同时控制），适合复杂网格、应用级布局。
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr;
gap: 16px; /* grid-gap 的现代写法 */
}
.header { grid-column: 1 / -1; }
技巧：grid-auto-flow: dense; 可用于紧凑布局；subgrid 在一些场景用于继承父网格（兼容需检测）。
2.4 多列（Multi-column）
.article { columns: 3 200px; column-gap: 20px; }
适合排版式布局（报刊式排版），要注意断字与图像流。
2.5 逻辑属性（Writing-mode 友好）
逻辑属性（margin-inline-start, padding-block 等）替代物理属性（margin-left），便于国际化、书写模式切换。
.block {
margin-inline-start: 1rem; /* 左/右依赖写入方向 */
padding-block: .5rem; /* 上下依赖写入方向 */
}
3. 视觉效果：背景、圆角、投影、渐变、混合
3.1 圆角（border-radius）
.box { border-radius: 8px; }
可为任意角度、或使用斜切（ellipse）: border-radius: 10px 20px / 20px 30px;
3.2 盒阴影（box-shadow）与文本阴影（text-shadow）
.card { box-shadow: 0 6px 18px rgba(0,0,0,.12); }
h1 { text-shadow: 0 1px 2px rgba(0,0,0,.3); }
3.3 多背景与渐变
.hero {
background:
linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.1)),
url('hero.jpg') center / cover no-repeat;
}
渐变类型：linear-gradient, radial-gradient, conic-gradient（圆锥渐变）。
3.4 背景混合（background-blend-mode）与混合模式（mix-blend-mode）
.overlay { mix-blend-mode: multiply; } /* 与下层内容混合 */
类似 Photoshop 的 blend 模式，可用于创造复合视觉效果。
3.5 CSS 滤镜（filter）
img { filter: grayscale(.5) blur(2px) contrast(1.2); }
filter 可以在渲染后影响 raster 化结果，动画使用需谨慎（可能触发图层合成）。
4. 变换（Transforms）、过渡（Transitions）与动画（Animations）
4.1 transform（硬件加速友好）
.box { transform: translate3d(0,0,0) rotate(10deg) scale(1.1); }
使用 transform 通常只触发合成层（GPU），比改变 top/left 更流畅。
4.2 transition（简洁交互）
.button {
transition: background-color .25s ease, transform .2s ease;
}
.button:hover { transform: translateY(-2px); }
4.3 @keyframes 动画
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
.ball { animation: bounce 600ms ease-in-out infinite; }
4.4 动画性能建议
-
动画属性尽量只使用
transform、opacity；避免触发布局（width/height/top/left等）。 -
使用
will-change预创建合成层（但别滥用，以免占用显存）。 -
对用户偏好
prefers-reduced-motion做降级。
5. 响应与媒体查询
5.1 媒体查询（Media Queries）
@media (max-width: 768px) {
.sidebar { display: none; }
}
支持条件：宽度、高度、分辨率、方向、hover 能力等。
5.2 视口单位（vw / vh / vmin / vmax）
.hero { height: 100vh; font-size: 4vw; }
注意移动端浏览器地址栏收缩会影响 vh，可用 env(safe-area-inset-bottom) 等处理安全区。
5.3 媒体特性（用户偏好）
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
@media (prefers-color-scheme: dark) {
body { background: #111; color: #eee; }
}
对无障碍和暗色主题支持非常重要。
6. 变量、计算与新函数
6.1 自定义属性（CSS Variables）
:root {
--primary: #07c;
--gutter: 16px;
}
.btn {
background: var(--primary);
padding: calc(var(--gutter) / 2);
}
优点：动态、可继承、可以在运行时用 JS 修改（document.documentElement.style.setProperty('--primary', '#f00')）。
6.2 calc() 与 clamp()/min()/max()
h1 { font-size: calc(16px + 2vw); }
/* clamp(min, preferred, max) */
p { font-size: clamp(14px, 2vw, 18px); }
clamp 用于流式字体大小，优雅地限定范围。
6.3 color-mix / color-contrast（现代色彩函数）
现代 CSS 提供更复杂色彩操作（不同浏览器实现程度不同），例如 color-mix(), color-contrast()。用于动态调色、可访问性对比判断（需检测兼容性）。
7. 字体与排版
7.1 @font-face（自托管字体）
@font-face {
font-family: 'InterVar';
src: url('Inter.woff2') format('woff2');
font-display: swap; /* swap / fallback 策略 */
}
body { font-family: 'InterVar', system-ui, sans-serif; }
font-display 决定字体加载策略（性能/可用性权衡）。
7.2 可变字体（Variable Fonts）
可变字体通过一个文件提供多个 weight/width/optical sizes，非常有利于性能与设计灵活度：
body { font-variation-settings: 'wght' 500; }
7.3 排版增强
-
text-wrap: balance;（部分浏览器）平衡行切分 -
hyphens: auto;自动断字 -
text-overflow: ellipsis; white-space: nowrap; overflow: hidden;单行省略
8. 新伪类与伪元素
8.1 常见伪元素
.btn::before { content: ''; display: inline-block; width: 1em; height: 1em; }
::marker, ::selection 等提供更细粒度的样式控制。
8.2 结构性伪类
:first-child, :last-child, :nth-child() 常用于无类名布局。
8.3 新增/现代伪类
-
:focus-within：当元素或其子元素获得焦点时被匹配。 -
:focus-visible：只有在键盘导航/可见焦点时才匹配（用于更好地控制焦点样式）。 -
:checked/:disabled：表单状态伪类。 -
:has()：父选择器能力（见前文）。
9. 特性检测：@supports
用 @supports 检测浏览器是否支持某 CSS 特性，优雅降级或 progressive enhancement。
@supports (display: grid) {
.layout { display: grid; }
}
@supports not (display: grid) {
.layout { display: flex; /* fallback */ }
}
10. 新兴与高级特性
10.1 Container Queries（容器查询）
可以基于容器尺寸而不是视口做响应式（组件化响应式 CSS 的重要支持）。
.card {
container-type: inline-size; /* 让卡片成为容器查询上下文 */
}
@container (min-width: 300px) {
.card { grid-template-columns: 1fr 200px; }
}
非常适合组件化、避免全局断点。
10.2 CSS Houdini（Paint API、Typed OM 等）
Houdini 打开了 CSS 与 JS 的接口：可以自定义绘制（Paint Worklet）、控制布局（Layout Worklet）、访问高性能 Typed OM 操作样式等。适合高级定制与高性能渲染（复杂图表、微动画）。示例（Paint API 高概念）：
// registerPaint('my-painter', class { paint(ctx, size, props) { /* canvas-like draw */ }});
/* CSS: background-image: paint(my-painter); */
注意：Houdini 功能并非所有环境都完整支持。
10.3 Typed Object Model（Typed OM）
提供更快、更安全的脚本级样式读取与写入接口（避免字符串解析的开销），适合高频率动画或复杂交互。
10.4 Subgrid（Grid 的继承网格）
subgrid 允许子元素继承父网格的行/列定义，便于更加一致的复杂布局（兼容性需确认）。
11. 可访问性、性能建议与常见陷阱
11.1 可访问性
-
使用
prefers-reduced-motion提供动画降级。 -
焦点样式不要完全移除（
outline: none要配合可见替代），使用:focus-visible精细控制。 -
在 color 选择上保证对比度，使用
color-contrast()（若可用）或工具检测。
11.2 性能
-
动画只动
transform与opacity，避免触发行/绘制。 -
will-change用于关键动画前提示浏览器，但滥用会占用显存。 -
使用
contain（如contain: layout paint）限制渲染影响域，有助组件化性能。 -
合理使用
image-rendering、WebP/AVIF、loading="lazy"等减少网络与绘制开销。
11.3 常见陷阱
-
误用
vh在移动端导致布局抖动（地址栏）。 -
CSS 变量在使用时未提供 fallback（
color: var(--c, #000)提供后备），或过度层次化导致难以维护。 -
:has()在大 DOM 上复杂选择导致性能问题（在循环或大量节点检测时需谨慎）。
12. 可视化案例源码：
提供了以下功能：
-
CSS3简介：介绍CSS3的基本概念和浏览器支持情况
-
主要CSS3特性：通过交互式卡片展示六大CSS3特性
-
动画(Animation)：可调整时长的关键帧动画
-
过渡(Transition)：可调整时长的悬停过渡效果
-
变形(Transform)：可调整强度的缩放和旋转效果
-
渐变(Gradient)：可自定义颜色的线性渐变
-
阴影(Shadow)：可调整参数的元素阴影
-
弹性盒子(Flexbox)：可调整布局方向的弹性盒子
-
-
代码示例：展示实现这些效果的CSS代码
-
实用技巧：提供CSS3使用的最佳实践和性能建议
页面采用响应式设计，可以在各种设备上正常显示，并通过交互式控件实时调整CSS参数查看效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 新特性可视化详解</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #4361ee;
--secondary: #3a0ca3;
--accent: #7209b7;
--light: #f8f9fa;
--dark: #212529;
--success: #4cc9f0;
--warning: #f72585;
--info: #4895ef;
--gradient-start: #4361ee;
--gradient-end: #4cc9f0;
--animation-duration: 1s;
--transition-duration: 0.5s;
--transform-value: 1.2;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f7ff;
color: var(--dark);
line-height: 1.6;
padding-bottom: 2rem;
}
header {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
text-align: center;
padding: 2rem 1rem;
margin-bottom: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.subtitle {
font-size: 1.2rem;
opacity: 0.9;
max-width: 800px;
margin: 0 auto;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.section {
background: white;
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
h2 {
color: var(--primary);
margin-bottom: 1.2rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--light);
display: flex;
align-items: center;
}
h2 i {
margin-right: 10px;
}
h3 {
color: var(--secondary);
margin: 1.5rem 0 0.8rem;
}
p {
margin-bottom: 1rem;
}
.cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin: 1.5rem 0;
}
.card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.card-header {
color: white;
padding: 1rem;
font-weight: bold;
display: flex;
align-items: center;
}
.card-header i {
margin-right: 8px;
font-size: 1.2rem;
}
.animation-header {
background: var(--primary);
}
.transition-header {
background: var(--accent);
}
.transform-header {
background: var(--warning);
}
.gradient-header {
background: var(--info);
}
.shadow-header {
background: var(--success);
}
.flexbox-header {
background: var(--secondary);
}
.card-body {
padding: 1.2rem;
}
.demo-box {
width: 100px;
height: 100px;
background: var(--primary);
margin: 1rem auto;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
}
.controls {
background: #f8f9fa;
padding: 1rem;
border-radius: 8px;
margin: 1rem 0;
}
.control-group {
margin-bottom: 0.8rem;
}
label {
display: block;
margin-bottom: 0.3rem;
font-weight: 500;
}
input[type="range"] {
width: 100%;
}
.btn {
display: inline-block;
background: var(--primary);
color: white;
padding: 0.6rem 1.2rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
transition: background 0.3s;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
.btn:hover {
background: var(--secondary);
}
.code-container {
background: #2d2d2d;
color: #f8f8f2;
border-radius: 6px;
padding: 1rem;
margin: 1rem 0;
overflow-x: auto;
font-family: 'Fira Code', monospace;
}
.code-comment {
color: #8292a2;
}
.code-keyword {
color: #f92672;
}
.code-function {
color: #e6db74;
}
.code-parameter {
color: #fd971f;
}
.code-string {
color: #a6e22e;
}
.code-number {
color: #ae81ff;
}
.demo-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 1rem;
}
/* 动画演示样式 */
.animated-box {
animation: demoAnimation var(--animation-duration) infinite alternate;
}
@keyframes demoAnimation {
0% {
transform: translateY(0) scale(1);
background: var(--primary);
}
100% {
transform: translateY(-20px) scale(1.1);
background: var(--accent);
}
}
/* 过渡演示样式 */
.transition-box {
transition: all var(--transition-duration) ease;
}
.transition-box:hover {
transform: rotate(45deg) scale(1.2);
background: var(--warning);
border-radius: 50%;
}
/* 变形演示样式 */
.transform-demo {
transform: scale(var(--transform-value)) rotate(calc(var(--transform-value) * 45deg));
}
/* 渐变演示样式 */
.gradient-demo {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
}
/* 阴影演示样式 */
.shadow-demo {
box-shadow: calc(var(--shadow-h) * 1px) calc(var(--shadow-v) * 1px) calc(var(--shadow-blur) * 1px) calc(var(--shadow-spread) * 1px) var(--shadow-color);
}
/* 弹性盒子演示样式 */
.flex-container {
display: flex;
height: 150px;
background: #f0f0f0;
padding: 10px;
border-radius: 8px;
margin-bottom: 1rem;
}
.flex-item {
background: var(--primary);
color: white;
margin: 5px;
padding: 10px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 768px) {
.demo-container {
grid-template-columns: 1fr;
}
}
footer {
text-align: center;
margin-top: 3rem;
color: #6c757d;
}
.tip {
background: #e9f7fe;
border-left: 4px solid var(--info);
padding: 1rem;
margin: 1rem 0;
border-radius: 0 4px 4px 0;
}
.browser-support {
display: flex;
align-items: center;
margin: 1rem 0;
flex-wrap: wrap;
}
.browser {
display: flex;
align-items: center;
margin-right: 1.5rem;
margin-bottom: 0.5rem;
}
.browser i {
font-size: 1.5rem;
margin-right: 0.5rem;
}
.browser-chrome {
color: #4285F4;
}
.browser-firefox {
color: #FF7139;
}
.browser-safari {
color: #000000;
}
.browser-edge {
color: #0078D7;
}
</style>
</head>
<body>
<header>
<h1>CSS3 新特性可视化详解</h1>
<p class="subtitle">探索CSS3的强大功能：动画、过渡、变形、渐变等</p>
</header>
<div class="container">
<section class="section">
<h2><i class="fas fa-star"></i> CSS3 简介</h2>
<p>CSS3是CSS规范的最新版本，带来了众多令人兴奋的新特性，使Web开发人员能够创建更精美、交互性更强的网页，而无需使用JavaScript或图像。</p>
<div class="tip">
<p><strong>提示：</strong> 以下演示都是纯CSS实现，没有使用JavaScript（除了交互控制部分）</p>
</div>
<div class="browser-support">
<div class="browser">
<i class="fab fa-chrome browser-chrome"></i>
<span>Chrome 4+</span>
</div>
<div class="browser">
<i class="fab fa-firefox browser-firefox"></i>
<span>Firefox 3.6+</span>
</div>
<div class="browser">
<i class="fab fa-safari browser-safari"></i>
<span>Safari 4+</span>
</div>
<div class="browser">
<i class="fab fa-edge browser-edge"></i>
<span>Edge 12+</span>
</div>
</div>
</section>
<section class="section">
<h2><i class="fas fa-paint-brush"></i> 主要CSS3特性</h2>
<div class="cards-container">
<div class="card">
<div class="card-header animation-header">
<i class="fas fa-film"></i> 动画
</div>
<div class="card-body">
<p>使用@keyframes创建复杂动画，控制中间步骤</p>
<div class="demo-box animated-box">动画</div>
<div class="controls">
<div class="control-group">
<label for="animation-duration">动画时长: <output id="animation-duration-output">1</output>s</label>
<input type="range" id="animation-duration" min="0.1" max="3" step="0.1" value="1">
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header transition-header">
<i class="fas fa-exchange-alt"></i> 过渡
</div>
<div class="card-body">
<p>在不同状态之间平滑过渡，增强用户体验</p>
<div class="demo-box transition-box">悬停我</div>
<div class="controls">
<div class="control-group">
<label for="transition-duration">过渡时长: <output id="transition-duration-output">0.5</output>s</label>
<input type="range" id="transition-duration" min="0.1" max="3" step="0.1" value="0.5">
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header transform-header">
<i class="fas fa-expand-arrows-alt"></i> 变形
</div>
<div class="card-body">
<p>对元素进行旋转、缩放、倾斜和平移</p>
<div class="demo-box transform-demo">变形</div>
<div class="controls">
<div class="control-group">
<label for="transform-value">变形强度: <output id="transform-value-output">1.2</output></label>
<input type="range" id="transform-value" min="0.5" max="2" step="0.1" value="1.2">
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header gradient-header">
<i class="fas fa-fill-drip"></i> 渐变
</div>
<div class="card-body">
<p>创建平滑的颜色过渡，替代图像渐变</p>
<div class="demo-box gradient-demo">渐变</div>
<div class="controls">
<div class="control-group">
<label for="gradient-start">起始颜色</label>
<input type="color" id="gradient-start" value="#4361ee">
</div>
<div class="control-group">
<label for="gradient-end">结束颜色</label>
<input type="color" id="gradient-end" value="#4cc9f0">
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header shadow-header">
<i class="fas fa-cloud"></i> 阴影
</div>
<div class="card-body">
<p>为元素和文本添加阴影效果，增加深度感</p>
<div class="demo-box shadow-demo">阴影</div>
<div class="controls">
<div class="control-group">
<label for="shadow-h">水平阴影: <output id="shadow-h-output">5</output>px</label>
<input type="range" id="shadow-h" min="-20" max="20" value="5">
</div>
<div class="control-group">
<label for="shadow-v">垂直阴影: <output id="shadow-v-output">5</output>px</label>
<input type="range" id="shadow-v" min="-20" max="20" value="5">
</div>
<div class="control-group">
<label for="shadow-blur">模糊度: <output id="shadow-blur-output">10</output>px</label>
<input type="range" id="shadow-blur" min="0" max="30" value="10">
</div>
<div class="control-group">
<label for="shadow-color">阴影颜色</label>
<input type="color" id="shadow-color" value="#000000">
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header flexbox-header">
<i class="fas fa-th"></i> 弹性盒子
</div>
<div class="card-body">
<p>提供更有效的布局方式，对齐和分配空间 among items</p>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<div class="controls">
<div class="control-group">
<label for="flex-direction">方向</label>
<select id="flex-direction">
<option value="row">行 (row)</option>
<option value="row-reverse">行反转 (row-reverse)</option>
<option value="column">列 (column)</option>
<option value="column-reverse">列反转 (column-reverse)</option>
</select>
</div>
<div class="control-group">
<label for="flex-justify">主轴对齐</label>
<select id="flex-justify">
<option value="flex-start">起始 (flex-start)</option>
<option value="flex-end">结束 (flex-end)</option>
<option value="center">居中 (center)</option>
<option value="space-between">之间 (space-between)</option>
<option value="space-around">周围 (space-around)</option>
</select>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<h2><i class="fas fa-code"></i> 代码示例</h2>
<h3>CSS动画</h3>
<div class="demo-container">
<div class="code-container">
<span class="code-comment">/* 定义关键帧动画 */</span><br>
<span class="code-keyword">@keyframes</span> example {<br>
<span class="code-keyword">0%</span> {<br>
transform: <span class="code-function">translateY</span>(<span class="code-number">0</span>);<br>
background: <span class="code-function">var</span>(--primary);<br>
}<br>
<span class="code-keyword">100%</span> {<br>
transform: <span class="code-function">translateY</span>(-20px);<br>
background: <span class="code-function">var</span>(--accent);<br>
}<br>
}<br><br>
<span class="code-comment">/* 应用动画 */</span><br>
.animated-element {<br>
animation: example <span class="code-number">1</span>s infinite alternate;<br>
}
</div>
<div class="code-container">
<span class="code-comment">/* 过渡效果 */</span><br>
.transition-element {<br>
transition: all <span class="code-number">0.5</span>s ease;<br>
background: <span class="code-function">var</span>(--primary);<br>
}<br><br>
.transition-element:hover {<br>
transform: <span class="code-function">rotate</span>(45deg) <span class="code-function">scale</span>(1.2);<br>
background: <span class="code-function">var</span>(--warning);<br>
border-radius: <span class="code-number">50</span>%;<br>
}
</div>
</div>
<h3>渐变与变形</h3>
<div class="demo-container">
<div class="code-container">
<span class="code-comment">/* 渐变背景 */</span><br>
.gradient-box {<br>
background: <span class="code-function">linear-gradient</span>(<br>
135deg,<br>
<span class="code-function">var</span>(--gradient-start),<br>
<span class="code-function">var</span>(--gradient-end)<br>
);<br>
border-radius: <span class="code-number">8</span>px;<br>
}
</div>
<div class="code-container">
<span class="code-comment">/* 变形效果 */</span><br>
.transformed-element {<br>
transform: <span class="code-function">scale</span>(1.2) <span class="code-function">rotate</span>(45deg);<br>
transition: transform <span class="code-number">0.3</span>s ease;<br>
}<br><br>
<span class="code-comment">/* 阴影效果 */</span><br>
.shadow-element {<br>
box-shadow: <span class="code-number">5</span>px <span class="code-number">5</span>px <span class="code-number">10</span>px <span class="code-number">0</span> <span class="code-function">rgba</span>(0, 0, 0, 0.5);<br>
}
</div>
</div>
</section>
<section class="section">
<h2><i class="fas fa-lightbulb"></i> 实用技巧</h2>
<div class="cards-container">
<div class="card">
<div class="card-body">
<h3>性能优化</h3>
<p>使用<code>transform</code>和<code>opacity</code>进行动画，这些属性不会触发重排，因此性能更好。</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h3>回退方案</h3>
<p>为不支持CSS3的浏览器提供回退样式，确保基本功能可用。</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h3>前缀处理</h3>
<p>使用Autoprefixer等工具自动添加浏览器前缀，确保跨浏览器兼容性。</p>
</div>
</div>
</div>
<div class="tip">
<p><strong>提示：</strong> 使用CSS变量（自定义属性）可以轻松管理颜色、尺寸和动画参数，并使主题切换变得简单。</p>
</div>
</section>
</div>
<footer>
<p>CSS3 新特性可视化详解 © 2023 - 使用现代CSS技术创建更精美的网页</p>
</footer>
<script>
// 更新动画时长
const animationDurationInput = document.getElementById('animation-duration');
const animationDurationOutput = document.getElementById('animation-duration-output');
animationDurationInput.addEventListener('input', function() {
const value = this.value;
animationDurationOutput.textContent = value;
document.documentElement.style.setProperty('--animation-duration', value + 's');
});
// 更新过渡时长
const transitionDurationInput = document.getElementById('transition-duration');
const transitionDurationOutput = document.getElementById('transition-duration-output');
transitionDurationInput.addEventListener('input', function() {
const value = this.value;
transitionDurationOutput.textContent = value;
document.documentElement.style.setProperty('--transition-duration', value + 's');
});
// 更新变形值
const transformValueInput = document.getElementById('transform-value');
const transformValueOutput = document.getElementById('transform-value-output');
transformValueInput.addEventListener('input', function() {
const value = this.value;
transformValueOutput.textContent = value;
document.documentElement.style.setProperty('--transform-value', value);
});
// 更新渐变颜色
const gradientStartInput = document.getElementById('gradient-start');
const gradientEndInput = document.getElementById('gradient-end');
gradientStartInput.addEventListener('input', function() {
document.documentElement.style.setProperty('--gradient-start', this.value);
});
gradientEndInput.addEventListener('input', function() {
document.documentElement.style.setProperty('--gradient-end', this.value);
});
// 更新阴影效果
const shadowHInput = document.getElementById('shadow-h');
const shadowHOutput = document.getElementById('shadow-h-output');
const shadowVInput = document.getElementById('shadow-v');
const shadowVOutput = document.getElementById('shadow-v-output');
const shadowBlurInput = document.getElementById('shadow-blur');
const shadowBlurOutput = document.getElementById('shadow-blur-output');
const shadowColorInput = document.getElementById('shadow-color');
function updateShadow() {
const h = shadowHInput.value;
const v = shadowVInput.value;
const blur = shadowBlurInput.value;
const color = shadowColorInput.value;
shadowHOutput.textContent = h;
shadowVOutput.textContent = v;
shadowBlurOutput.textContent = blur;
document.documentElement.style.setProperty('--shadow-h', h);
document.documentElement.style.setProperty('--shadow-v', v);
document.documentElement.style.setProperty('--shadow-blur', blur);
document.documentElement.style.setProperty('--shadow-color', color);
}
shadowHInput.addEventListener('input', updateShadow);
shadowVInput.addEventListener('input', updateShadow);
shadowBlurInput.addEventListener('input', updateShadow);
shadowColorInput.addEventListener('input', updateShadow);
// 更新Flexbox布局
const flexDirectionInput = document.getElementById('flex-direction');
const flexJustifyInput = document.getElementById('flex-justify');
const flexContainer = document.querySelector('.flex-container');
flexDirectionInput.addEventListener('change', function() {
flexContainer.style.flexDirection = this.value;
});
flexJustifyInput.addEventListener('change', function() {
flexContainer.style.justifyContent = this.value;
});
// 初始化
updateShadow();
</script>
</body>
</html>
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
35
0- 0
已为社区贡献14条内容
所有评论(0)