利用:hover触发状态变化，结合::before/::after创建视觉层，通过transition和transform实现平滑动画，如背景色渐变、滑入遮罩、上浮下划线等效果，关键在于伪元素content设置与定位上下文控制。
通过CSS伪类与伪元素制作悬停动画，可以实现视觉上更丰富且交互性强的效果。核心思路是利用 :hover 伪类触发状态变化，结合伪元素（如 ::before 或 ::after）创建额外的视觉层，再用 transition 或 transform 实现平滑动画。
使用 :hover 触发动画
:hover 是最常见的伪类之一，用于定义鼠标悬停时的样式。配合 transition 可以让属性变化更柔和。
示例：背景色渐变
当用户将鼠标移到按钮上时，背景色从透明变为蓝色，过渡时间为0.3秒。
.button { padding: 10px 20px; background-color: transparent; color: #333; border: 2px solid #333; transition: background-color 0.3s ease;}.button:hover {background-color: #007bff;color: white;}
用 ::before 或 ::after 制作遮罩或装饰效果
伪元素 ::before 和 ::after 能在元素前后插入内容，常用于添加图标、边框或遮罩层。结合定位和透明度控制，可做出滑入、浮现等动画。
示例：悬停时从左滑入背景条
使用 ::after 创建一个隐藏的色块，悬停时向右展开。
.hover-slide::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: #007bff; transition: width 0.4s ease;}.hover-slide:hover::after {width: 100%;}
注意： 父元素需设置 position: relative，确保伪元素定位正确。
结合 transform 实现位移动画
利用 transform 配合 opacity，可以让伪元素“飞入”或“淡入”，视觉冲击更强。
稿定抠图
AI自动消除图片背景
76 查看详情
立即学习“前端免费学习笔记（深入）”；
示例：文字下方出现上浮下划线
.underline-effect { position: relative; display: inline-block; padding: 8px 0;}.underline-effect::before {content: '';position: absolute;left: 50%;bottom: 0;width: 0;height: 2px;background-color: #007bff;transform: translateX(-50%);transition: width 0.3s ease;}
.underline-effect:hover::before {width: 100%;}
增强版： 加入 Y 轴位移，让线条从下方“弹起”：
.underline-effect::before { /* 其他样式 */ transform: translateX(-50%) translateY(2px); opacity: 0;}.underline-effect:hover::before {width: 100%;opacity: 1;transform: translateX(-50%) translateY(0);transition: all 0.3s ease;}
基本上就这些。关键是理解 :hover 控制状态，伪元素扩展视觉表现，transition 和 transform 让动画自然。不复杂但容易忽略细节，比如伪元素默认不显示（需设 content），以及定位上下文的建立。
以上就是如何通过css伪类与伪元素制作悬停动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1024076.html
微信扫一扫 
支付宝扫一扫 
