CSS之图像和动画篇

图像篇

一、嵌入图像（<img> 标签图像）

1. 核心特性

• 通过 HTML <img> 标签引入，属于文档流元素，直接影响布局。

• 支持 src 指向图像路径，alt 提供替代文本（无障碍必备）。

2. 核心样式属性

• width/height

• object-fit: 与容器适配方式（cover、contain、 fill）

• object-position: 在容器的定位（center、top left、坐标值（apx、bpx）

• border-radius: 圆角/圆形处理

二、背景图像（background-image）

1. 核心特性

• 通过 CSS background-image 引入，属于装饰性图像，不影响文档流布局。

• 可叠加多层图像（用逗号分隔多个 url())

2. 核心样式属性

background-imge: 定义背景图 （url(路径)）

background-repeat: 重复方式

background-position: 定位

background-size: 尺寸控制

background-attachment: 滚动行为（fixed、scroll)

三、图像效果与处理

1. 滤镜（filter）

  .img-filter {
    filter: brightness(1.2) /* 亮度 */
           contrast(1.1)  /* 对比度 */
           saturate(1.3)  /* 饱和度 */
           blur(2px);     /* 模糊 */
}

2.裁剪（clip-path）

  /* 圆形裁剪 */
.circle-clip {
  clip-path: circle(50% at center);
}

/* 多边形裁剪（菱形） */
.diamond-clip {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

3. 遮罩（mask-image）

/* 渐变遮罩（从上到下渐隐） */
.gradient-mask {
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

动画篇

1. 过渡动画（Transition）​

• 定义：元素在两个样式状态间的平滑过渡，需触发条件。​

• 核心属性（4 个）：

• transition-property： 要过渡的CSS属性

• transition-duration：过渡持续时间（必填）

• transition-timing： 过渡速度曲线

• transition-delay：过渡延迟时间

• 触发条件：hover(鼠标悬浮）active(点击时) focus(输入框获焦)

2.关键帧动画（animation）

定义：通过@keyframes自定义多阶段样式，支持自 动执行与循环。​

• 核心属性（8 个）：

• animation-name: 关联关键帧 （自定义名称）

• animati-duration:持续时间

• animation-timing-function: 速度曲线（ease、linear、ease-in-out)

• animation-delay:延迟时间

• animation-iteration-count: 循环次数

• animation-direction:播放方向（normal、reverse、alternate）

• animation-fill-mode: 结束后样式

• animation-play-state: 播放状态

3.变换动画

定义：通过transform属性改变元素几何状态，常配合 transition/animation 实现动效。​

• 细分类型：

• 2D变换: translate/rotate/scale/skew (transform: rotate(45deg) scale(1.2);)

• 3D变换: translate3d/ratate3d/scale3d (transform: rotate3d(1,1,0, 360deg);)