css 脚本图片展示效果

### 使用 CSS 实现图片展示特效

#### 图片缩放效果
当鼠标悬停在图片上时，可以让其放大以吸引用户的注意力。

img {
  transition: transform 0.2s ease-in-out;
}

img:hover {
  transform: scale(1.1);
}

此代码片段定义了一个平滑过渡的效果，在用户将鼠标指针移到图像之上时会触发该效果并使图像稍微增大[^1]。

#### 圆角边框与阴影
给图片添加圆角以及投影能够增强视觉层次感。

img {
  border-radius: 15px; /* 设置圆角度数 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

img:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.19);
}

这段样式不仅设置了静态状态下图标的外观属性，还规定了当光标悬浮在其上方时会发生的变化——即更强烈的阴影效果来模拟升高的感觉。

#### 黑白到彩色转换
利用滤镜功能可以在用户交互前显示黑白版本的照片，而一旦发生互动则恢复成全彩模式。

img {
  filter: grayscale(100%);
  transition: filter 0.7s ease;
}