知识篇 -- CSS高级概念
# 过渡 (Transitions) 和动画 (Animations)
# 过渡 (Transitions)
CSS 过渡允许您在不使用 Flash 动画或 JavaScript 的情况下，平滑地改变 CSS 属性值。
transition-property: 指定要过渡的 CSS 属性。transition-duration: 指定过渡的持续时间。transition-timing-function: 指定过渡的速度曲线（例如ease,linear,ease-in,ease-out,ease-in-out）。transition-delay: 指定过渡开始前的延迟时间。transition: 上述属性的简写。
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: width 2s ease-in-out 0.5s, background-color 1s linear;
}
.box:hover {
width: 200px;
background-color: red;
}
# 动画 (Animations)
CSS 动画允许您创建更复杂的动画序列，通过 @keyframes 规则定义动画的各个阶段。
@keyframes: 定义动画序列的关键帧。animation-name: 指定要绑定的@keyframes规则的名称。animation-duration: 指定动画的持续时间。animation-timing-function: 指定动画的速度曲线。animation-delay: 指定动画开始前的延迟时间。animation-iteration-count: 指定动画播放的次数（infinite为无限次）。animation-direction: 指定动画是否应该轮流反向播放（normal,reverse,alternate,alternate-reverse）。animation-fill-mode: 指定动画在播放之前和之后如何应用样式（none,forwards,backwards,both）。animation-play-state: 指定动画是运行还是暂停（running,paused）。animation: 上述属性的简写。
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
.element {
animation: slidein 3s ease-in-out infinite alternate;
}
# 变换 (Transforms)
CSS transform 属性允许您对元素进行 2D 或 3D 转换，例如移动、旋转、缩放和倾斜。
translate(x, y): 沿 X 和 Y 轴移动元素。rotate(angle): 旋转元素。scale(x, y): 缩放元素。skew(x-angle, y-angle): 倾斜元素。matrix(): 将所有 2D 转换合并为一个。translate3d(x, y, z): 沿 X、Y、Z 轴移动元素。rotate3d(x, y, z, angle): 沿 3D 空间中的轴旋转元素。scale3d(x, y, z): 缩放元素。perspective(value): 为 3D 变换定义透视视图。
.box {
transform: rotate(45deg) scale(1.2) translateX(20px);
}
# 阴影 (Shadows)
# box-shadow
为元素添加阴影效果。
.card {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 水平偏移 垂直偏移 模糊半径 颜色 */
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2) inset; /* 内阴影 */
}
# text-shadow
为文本添加阴影效果。
h1 {
text-shadow: 2px 2px 4px #333; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}
# 渐变 (Gradients)
CSS 渐变允许您在两个或多个指定颜色之间创建平滑的过渡。
# 线性渐变 (Linear Gradients)
颜色沿着一条直线过渡。
.linear-gradient {
background-image: linear-gradient(to right, red, yellow); /* 从左到右，从红到黄 */
background-image: linear-gradient(45deg, blue, green); /* 45度角，从蓝到绿 */
}
# 径向渐变 (Radial Gradients)
颜色从一个中心点向外扩散。
.radial-gradient {
background-image: radial-gradient(circle, red, yellow, green); /* 从中心向外，红->黄->绿 */
}
# 自定义属性 (CSS Variables)
CSS 自定义属性（也称为 CSS 变量）允许您定义可在整个文档中重复使用的值。
:root {
--main-color: #007bff;
--panel-background: #f8f9fa;
}
.header {
background-color: var(--main-color);
}
.panel {
background-color: var(--panel-background);
color: var(--main-color);
}
# CSS 预处理器 (CSS Preprocessors)
CSS 预处理器是 CSS 的超集，它在编译成 CSS 之前提供了一些额外的功能，如变量、嵌套、混合（mixins）、函数等。
- Sass/SCSS: 最流行的预处理器之一。
- Less: 另一个流行的预处理器。
- Stylus: 具有更灵活语法的预处理器。
# CSS 方法论 (CSS Methodologies)
CSS 方法论是一套用于组织和管理 CSS 代码的规则和最佳实践，旨在提高代码的可维护性、可扩展性和可重用性。
- BEM (Block Element Modifier): 一种组件化的命名约定，将 UI 分解为独立的块、元素和修饰符。
- OOCSS (Object Oriented CSS): 鼓励将结构和外观分离，以及将重复的模式抽象为可重用的“对象”。
- SMACSS (Scalable and Modular Architecture for CSS): 将样式规则分为五个类别：Base, Layout, Module, State, Theme。
# 性能优化 (Performance Optimization)
- 代码压缩: 移除不必要的空格、注释和缩进，减小文件大小。
- 关键 CSS (Critical CSS): 提取首屏渲染所需的最小 CSS，内联到 HTML 中，以加快页面加载速度。
- 懒加载: 对于非首屏的图片、视频等资源，延迟加载。
- 避免使用
@import:@import会导致样式表串行加载，影响性能。 - 优化选择器: 避免使用过于复杂的选择器。
# CSS 可访问性 (CSS Accessibility - A11y)
确保网站对所有用户（包括残障人士）都可用。
- 焦点状态: 为可交互元素提供清晰的
:focus样式。 - 语义化 HTML: 使用正确的 HTML 标签来传达内容的含义。
- 颜色对比度: 确保文本和背景颜色之间有足够的对比度，以便于阅读。
- 响应式设计: 确保布局在不同设备和屏幕尺寸上都能正常工作。