如何使用HTML实现鼠标移入过渡效果-html教程-PHP中文网

transition属性必须写在初始状态而非hover中，且仅对opacity、transform等可动画属性生效；需成对定义起始与结束样式（如hover:scale-110），并避免使用display、height:auto等不可过渡值。

如何使用html实现鼠标移入过渡效果

transition 属性必须配合 hover 才能生效

直接写 transition 不会触发任何动画，它只是声明“当某些 CSS 属性变化时，用什么方式过渡”。真正驱动变化的是状态切换，最常用的就是 :hover。比如想让按钮变色带淡入效果，得先定义默认样式，再在 button:hover 里改颜色，同时确保 transition 写在默认状态上。

常见错误是把 transition 只写在 :hover 里——这样鼠标移入时没过渡（因为 transition 还没生效），移出时反而有，反直觉。

transition 必须写在「初始状态」的 CSS 规则中（如 button），不能只写在 :hover
只对可过渡的属性生效：颜色（color、background-color）、尺寸（width、transform）、透明度（opacity）等；display、height（非 transform 替代方案）等不可过渡
推荐优先用 transform 和 opacity，性能比改 width 或 left 好得多，不触发重排

用 transform 实现平滑缩放/位移，避免布局抖动

想让图标放大一点，别直接改 width 和 height，那会触发浏览器重排，卡顿明显。改用 transform: scale(1.2)，GPU 加速，顺滑很多。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

button {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
button:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

transform 和 opacity 是仅有的两个被浏览器高度优化的过渡属性
多个属性过渡要写全：transition: transform 0.2s, opacity 0.2s，不能简写成 transition: all 0.2s（会拖慢性能，且可能意外过渡不需要的属性）
时间单位统一用 s（秒）或 ms（毫秒），别混用；ease 是默认缓动，想更自然可用 cubic-bezier(0.25, 0.46, 0.45, 0.94)

伪元素 hover 动画需要额外触发层

给文字加下划线动画？直接对 a:hover::after 设 transition 没用——伪元素初始状态不存在，无法过渡。得先用 opacity: 0 和 transform 把它“占位”出来，再靠 :hover 改状态。

a {
  position: relative;
  color: #333;
}
a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #007bff;
  transition: width 0.3s ease, opacity 0.2s ease;
}
a:hover::after {
  width: 100%;
  opacity: 1;
}

伪元素必须有初始样式（哪怕 width: 0、opacity: 0），否则 transition 找不到起点
涉及尺寸变化（如 width）又想顺滑，务必搭配 will-change: width（慎用，仅在必要时加）
移动端要注意 :hover 在触摸设备上可能不触发，关键交互别只依赖 hover