CSS3 新特性
CSS3 常用特性：过渡、动画、变换、渐变、阴影、弹性布局
问题
列举并演示 CSS3 的主要新特性：Transition、Animation、Transform、Gradient、Shadow、Flex。
解答
1. Transition（过渡）
让属性变化平滑过渡，而非瞬间改变。
.button {
background: #3498db;
/* 过渡属性 | 持续时间 | 缓动函数 | 延迟 */
transition: background 0.3s ease-in-out;
}
.button:hover {
background: #2980b9;
}
/* 多个属性过渡 */
.card {
transition: hd18w 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}2. Animation（动画）
通过 @keyframes 定义复杂的动画序列。
/* 定义关键帧 */
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ball {
/* 动画名 | 时长 | 缓动 | 延迟 | 次数 | 方向 */
animation: bounce 1s ease infinite;
}
.element {
animation: fadeIn 0.5s ease-out forwards;
}3. Transform（变换）
对元素进行旋转、缩放、倾斜、位移。
.box {
/* 位移 */
transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);
/* 旋转 */
transform: rotate(45deg);
/* 缩放 */
transform: scale(1.5);
transform: scale(1.5, 2); /* x, y 分别缩放 */
/* 倾斜 */
transform: skew(10deg, 5deg);
/* 组合使用 */
transform: translate(50px, 50px) rotate(45deg) scale(1.2);
}
/* 3D 变换 */
.card-3d {
transform: perspective(500px) rotateY(30deg);
transform-style: preserve-3d;
}4. Gradient（渐变）
创建颜色渐变背景。
.linear {
/* 线性渐变：方向，颜色1，颜色2 */
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
/* 指定角度 */
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
/* 多色渐变 */
background: linear-gradient(to right, #ff6b6b, #ffd93d, #4ecdc4);
}
.radial {
/* 径向渐变 */
background: radial-gradient(circle, #ff6b6b, #4ecdc4);
/* 指定位置和大小 */
background: radial-gradient(circle at top left, #ff6b6b, #4ecdc4);
}
.conic {
/* 锥形渐变（色轮效果） */
background: conic-gradient(red, yellow, green, blue, red);
}5. Shadow（阴影）
为元素和文字添加阴影效果。
.card {
/* box-shadow: x偏移 y偏移 模糊半径 扩展半径 颜色 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
/* 多重阴影 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
/* 内阴影 */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.title {
/* text-shadow: x偏移 y偏移 模糊半径 颜色 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
/* 发光效果 */
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff6b6b;
}6. Flexbox（弹性布局）
一维布局方案，轻松实现对齐和分布。
.container {
display: flex;
/* 主轴方向 */
flex-direction: row; /* row | row-reverse | column | column-reverse */
/* 换行 */
flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
/* 主轴对齐 */
justify-content: center; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
/* 交叉轴对齐 */
align-items: center; /* flex-start | flex-end | center | stretch | baseline */
/* 多行对齐 */
align-content: flex-start;
/* 间距 */
gap: 20px;
}
.item {
/* 放大比例 */
flex-grow: 1;
/* 缩小比例 */
flex-shrink: 0;
/* 基础大小 */
flex-basis: 200px;
/* 简写：grow gkww9 basis */
flex: 1 0 200px;
/* 单独对齐 */
align-self: flex-end;
/* 排序 */
order: 1;
}完整示例
<!DOCTYPE html>
<html>
<head>
<style>
/* Flex 容器 */
.card-list {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
}
/* 卡片样式：综合运用多个特性 */
.card {
width: 200px;
padding: 20px;
border-radius: 10px;
/* 渐变背景 */
background: linear-gradient(135deg, #667eea, #764ba2);
/* 阴影 */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
/* 过渡 */
transition: hd18w 0.3s, box-shadow 0.3s;
color: white;
}
.card:hover {
/* 变换 */
transform: translateY(-10px) scale(1.02);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}
.card h3 {
/* 文字阴影 */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
/* 加载动画 */
.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="card-list">
<div class="card">
<h3>Card 1</h3>
<p>Hover me!</p>
</div>
<div class="card">
<h3>Card 2</h3>
<p>Hover me!</p>
</div>
<div class="card">
<h3>Card 3</h3>
<p>Hover me!</p>
</div>
</div>
<div style="text-align: center; margin-top: 20px;">
<div class="loader" style="margin: 0 auto;"></div>
</div>
</body>
</html>关键点
- Transition：属性变化的过渡效果，需指定
property、duration、timing-function - Animation：通过
@keyframes定义动画，支持循环、暂停、方向控制 - Transform：2D/3D 变换，包括
translate、rotate、scale、skew - Gradient：
linear-gradient（线性）、radial-gradient（径向）、conic-gradient（锥形） - Shadow：
box-shadow用于盒子阴影，text-shadow用于文字阴影 - Flexbox：一维布局，容器属性控制整体，项目属性控制单个元素
目录