要在 HTML5 网页中实现 左下角向上滑动的图片动画（例如：从页面左下角滑入一张图片，常用于广告、提示图、角色插画等），可以使用 CSS 动画（@keyframes） + position: fixed 实现。

下面是一个完整、可运行的示例：

✅ 效果说明

• 图片初始位于 视口左下角之外（下方）
• 页面加载后，图片 向上滑入 到左下角位置
• 可设置动画时长、延迟、缓动效果

📄 完整代码（直接保存为 .html 即可运行）

左下角向上滑动图片

body {
  margin: 0;
  padding: 0;
  height: 200vh; /* 让页面可滚动，测试固定定位是否生效 */
  background: #f5f5f5;
}

/* 滑动图片容器 */
.slide-up-image {
  position: fixed;
  left: 20px; /* 距离左边 20px */
  bottom: -200px; /* 初始在视口下方（隐藏）*/
  width: 120px;
  height: 180px;
  background: url('https://via.placeholder.com/120x180/4a90e2/ffffff?text=滑入图') no-repeat center/cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  
  /* 启用动画 */
  animation: slideUpFromBottom 1s ease-out 0.5s forwards;
  /* 动画名 | 时长 | 缓动 | 延迟 | 保持最终状态 */
}

/* 定义关键帧动画 */
@keyframes slideUpFromBottom {
  from {
    bottom: -200px; /* 从下方开始 */
    opacity: 0;
  }
  to {
    bottom: 20px;   /* 滑到距离底部 20px */
    opacity: 1;
  }
}

向下滚动试试 👇
这张图片会固定在左下角，并从下方滑入。

🔧 自定义说明
需求 修改方式
更换图片 将 background: url(‘…’) 替换为你的图片 URL，或改用 标签

调整位置 修改 left 和最终 bottom 值（如 bottom: 30px）

改变尺寸 调整 width / height

修改动画速度 改 animation 中的 1s（如 0.8s）

延迟出现 改 0.5s（当前是 0.5 秒后开始动画）

使用 标签 见下方替代方案

🖼️ 替代方案：使用 标签（更灵活）

对应 CSS：

.slide-up-image {
position: fixed;
left: 20px;
bottom: -200px;
width: 120px;
height: auto;
border-radius: 8px;
opacity: 0;
animation: slideUpFromBottom 1s ease-out 0.5s forwards;
}

⚠️ 注意：如果用 ，需确保图片加载完成再触发动画（或设置固定高度避免布局抖动）。

💡 进阶效果（可选）

1. 悬停暂停动画
   .slide-up-image:hover {
   animation-play-state: paused;
   }

2. 多次滑入（点击触发）
   用 JavaScript 控制类名：

function triggerSlide() {
const img = document.querySelector(‘.slide-up-image’);
img.style.animation = ‘none’;
setTimeout(() => {
img.style.animation = ‘slideUpFromBottom 1s ease-out forwards’;
}, 10);
}

3. 响应式适配手机
   @media (max-width: 768px) {
   .slide-up-image {
   width: 80px;
   height: 120px;
   left: 10px;
   }
   }

✅ 总结

• 使用 position: fixed 固定在左下角
• 初始 bottom 为负值（隐藏在屏幕外）
• 通过 @keyframes 改变 bottom 和 opacity 实现 向上滑入淡入效果
• forwards 保持动画结束状态

如果你希望图片 从左侧滑入 + 向上、带弹跳效果 或 跟随滚动，也可以告诉我，我可以提供更复杂的动画！